首页 > 代码库 > JavaScript03

JavaScript03

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