JavaScript03

标签：fine   alert   css   create   tag   bsp   方式   ntb   文档   

DOM(document object model )文档对象模型
    节点：node
    
    获取节点的方式：
    　　直接方式：
          　　通过元素的id属性获取(最常用)
                alert(window.document.getElementById(‘uname‘).value);
          　　通过元素的name属性获取
                alert(document.getElementsByName(‘pwd‘)[0].value);
         　　 通过标签的名称来获取
　　　       var inputs = document.getElementsByTagName(‘input‘);
               alert(inputs.length);
　　

　　　　间接方式：
           　　通过父元素获取子元素
　　　　     var frm = document.getElementById(‘frm‘);
                alert(frm.childNodes.length);
            
            　 通过子元素获取父元素
            　 var  uname = document.getElementById(‘uname‘);
                alert(uname.parentNode.method);
            
            　 通过兄弟节点获取
                alert(uname.nextSibling.value+"获取下一个兄弟节点");
                alert(uname.previousSibling+"获取上一个兄弟节点");
            
            　 节点类型：文本节点 ，  属性节点，元素节点：nodeType=1
            
            　 alert(uname.nodeType);  // 元素节点：1
                alert(uname.nextSibling.nodeType);//文本节点：3
                alert(uname.value.nodeType);//属性节点：undefined
            
    通过节点操作属性，样式，文本
        固有属性：<input/>   value  name type
        自定义属性:<input/>  abc
        function $(obj){
                return document.getElementById(obj);
            }
            
            //attribute :属性
            function testAttr(){
                //获取元素对象
                var uname = $(‘uname‘);
                //alert(uname.value+"固有属性");
                //alert(uname.abc+"自定义属性");
                //alert(uname.getAttribute(‘abc‘));
                uname.setAttribute(‘cat‘,‘xiaohua‘)
                alert(uname.getAttribute(‘cat‘));
            }
            
            function testCss1(){
                //获取div元素
                var div = $(‘div1‘);
                //1.修改其style属性
                div.style.width ="300px";
                div.style.height = "300px";
                div.style.border = "1px solid red";
                
            }
            
            function testCss2(){
                //2.修改其className
                var div = $(‘div1‘);
                div.className = "divCls1";
            }
            
            function testText(){
                //获取div元素
                var div = $(‘div1‘);
                //innerHTML
                //div.innerHTML = "<h1>今天天气真好！</h1>";
                //innerText
                div.innerText = "<h1>今天天气真好！</h1>";
            }
        
    通过节点操作文档结构
        node
        创建节点：document.createElement("标签名");
        删除子节点：父节点对象.removeChild(子节点名称);
        追加子节点：父节点对象.appendChlid(子节点名称);
        
    通过节点操作表单以及表单项元素
    
    
    
            
   

JavaScript03

标签：fine   alert   css   create   tag   bsp   方式   ntb   文档   

原文地址：http://www.cnblogs.com/huanhuan10/p/6442432.html