jacascript DOM节点——元素节点、属性节点、文本节点

元素节点

　　元素节点就是html标签元素，元素节点主要提供了对元素标签名、子节点及属性的访问；

　　元素节点的三个node属性：nodetype：1、nodename/tagname：元素的标签名大写、nodevalue：null；

　　其父节点 parentnode 指向包含该元素节点的元素节点 element 或文档节点 document；

　　元素的 childnodes 属性中包含了它的所有子节点，这些子节点可能是元素、文本、注释、处理指令节点；

　　childnodes 结合 nodetype 可以检查有几个元素子节点：

   <ul class="list" id="list">
      <li class="in"></li>
      <li class="in"></li>
    </ul>
    <script>
      var olist = document.getelementbyid('list');
      var children = olist.childnodes;
      var num = 0;
      for(var i = 0; i < children.length; i++){
        if(children[i].nodetype == 1){
          num++;
        }
      }
      console.log(num);//2  有2个元素子节点  
    </script>

　　操作属性的方法主要有hasattribute()、getattribute()、setattribute()、removeattribute()四个，可以针对任何属性使用，包括那些以htmlelement类型属性的形式定义的属性；

• obj.hasattribute(attr)方法返回一个布尔值，表示当前元素节点是否包含指定属性；
• ie6/ie7不支持 hasattribute() 方法；
• obj.hasattribute(attr)检测 class 属性时，直接用 class 就可以了，不要用classname;
• obj.hasattribute(attr)检测 for属性时，直接用 for就可以了，不要用htmlfor;

 <div class="wrapper" id='test' for="nice" style="width:200px;height:100px;background:#f0f">123</div>
    <script type="text/javascript">
      var otest = document.getelementbyid('test');
      //ie6/ie7不支持hasattribute方法
      console.log(otest.hasattribute('class'));//true
      console.log(otest.hasattribute('classname'));//false  
      console.log(otest.hasattribute('id'));//true
      console.log(otest.hasattribute('style'));//true
      console.log(otest.hasattribute('for'));//true
      console.log(otest.hasattribute('htmlfor'));//false
    </script>

• obj.getattribute(attr)方法用于取得属性的值，如果给定名称的属性不存在或无参数则返回null；
• obj.getattribute(attr)获取 class 时，直接用 class 就可以了；ie6/ie7除外，ie6/ie7的 getattribute(attr) 方法要用 classname；
• obj.getattribute(attr)获取 for时，直接用 for就可以了；
• obj.setattribute(attr,value)方法接受两个参数：要设置的属性名和值，如果已经存在，则替换现有的值。如果属性不存在，则创建该属性并设置相应的值。该方法无返回值；
• obj.setattribute(attr,value)设置 class 时，直接用 class 就可以了；
• obj.setattribute(attr,value)设置 for 时，直接用 for 就可以了；
• obj.setattribute(attr,value)设置 style 时，直接用 style 就可以了；在 ie7及以下，用 obj.style.setattribute("csstext",value);  这里的 style 只是行间样式；
• 我们一般用 obj.currentstyle ? obj.currentstyle[attr] : getcomputedstyle(obj)[attr]; 来获取元素当前样式；

 <script type="text/javascript">
      var otest = document.getelementbyid('test');
      otest.setattribute('class','aaa'); //setattribute直接用class就可以了
      otest.setattribute('classname','bbb');
      console.log(otest.class);//undefined ie8及以下会报错缺少标识符
      console.log(otest.getattribute('class'));//aaa getattribute直接用class就可以了
      console.log(otest.classname);//aaa
      console.log(otest.getattribute('classname'));//bbb
      otest.setattribute('style','border:1px solid red;height: 100px;'); //setattribute直接用 style 就可以了
      console.log(otest.style);//所有的style设置，包括你没有设置的，太多了，肯定不是你想要的
      console.log(otest.getattribute('style'));
      //border:1px solid red;height: 100px; getattribute直接用 style 就可以了
      otest.setattribute('for','eee'); //setattribute直接用for就可以了
      otest.setattribute('htmlfor','fff')
      console.log(otest.for);//undefined  ie8及以下会报错缺少标识符
      console.log(otest.htmlfor);//undefined
      console.log(otest.getattribute('for'));//eee getattribute直接用for就可以了
      console.log(otest.getattribute('htmlfor'));//fff
      console.log(otest);
      //<div class="aaa" id="test" for="eee" style="ddd" classname="bbb" htmlfor="fff">123</div>
    </script>

• obj.removeattribute(attr)方法用于彻底删除元素的属性，这个方法不仅会彻底删除元素的属性值，还会删除元素属性。该方法无返回值；

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var otest = document.getelementbyid('test');
      otest.removeattribute('class'); //removeattribute直接用class就可以了
      otest.removeattribute('for');
      otest.removeattribute('style'); 
      console.log(otest);// <div id="test">123</div>
    </script>

属性节点

　　属性节点，有的叫特性节点，差不多一个意思；

　　属性节点的三个node属性，nodetype:2、nodename/name:属性名称、nodevalue/value：属性值；

　　属性节点还有一个 specified 属性，specified 是一个布尔值，用以区别特性是在代码中指定的，还是默认的。这个属性的值如果为true，则意味着在html中指定了相应特性，或者是通过 setattribute() 方法设置了该属性。在ie中，所有未设置过的特性的该属性值都为false，而在其他浏览器中，所有设置过的特性的该属性值都是true，未设置过的特性，如果强行为其设置 specified 属性，则报错。

　　元素节点有一个 attributes 属性，它包含一个 namednodemap，包含当前元素所有的属性及属性值，与nodelist类似，也是一个动态的集合。元素的每一个属性都由一个attr节点表示，每个节点都保存在namednodemap对象中，每个节点的 nodename 就是属性的名称，节点的 nodevalue 就是属性的值；

　　createattribute(attr) 创建新的属性节点；

　　attributes属性包含以下四个方法:

1. obj.attributes.setnameditem(attr);  向列表中添加节点，该方法无返回值；要先创建属性，在以nodevalue的形式赋属性值，在传入setnameditem
2. obj.attributes.getnameditem(attr);  返回 nodename 属性等于 attr 的节点；以" attr=value " 形式返回；
3. obj.attributes.removenameditem(attr); 从列表中移除 nodename 属性等于 attr 的节点，并返回该节点；
4. obj.attributes.item(index); 返回位于下标 index 位置处的节点，也可以用[]代替， obj.attributes[index]；

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      var otest = document.getelementbyid('test');
      console.log(otest.attributes);// namednodemap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(otest.attributes.item(1).specified);//true
      console.log(otest.attributes.getnameditem('id'));//id='test'
      console.log(typeof otest.attributes.getnameditem('id'));//object
      console.log(otest.attributes.removenameditem('for'));//id='test'
      console.log(otest.attributes);// namednodemap {0: class, 1: id, 2: style, length: 3}
      var abc = document.createattribute("abc"); 
      abc.nodevalue = "1234567";
      otest.attributes.setnameditem(abc);
      //obj.attributes.setnameditem(attr) 要先创建属性，在以nodevalue的形式赋属性值，在传入setnameditem
      console.log(otest.attributes);// namednodemap {0: class, 1: id, 2: style, 3: abc, length: 4}
      console.log(otest.attributes.item(1));//id='test'
      console.log(otest.attributes[1]);//id='test'
    </script>

　　attributes属性主要用于属性遍历。在需要将dom结构序列化为html字符串时，多数都会涉及遍历元素特性

<div class="wrapper" id='test' for="nice" style="background:#f0f;height: 100px;">123</div>
    <script type="text/javascript">
      function outputattributes(obj){
        var arr = [],
          attrname,
          attrvalue,
          i;
        for(i = 0; i < obj.attributes.length; i++){
          attrname = obj.attributes[i].nodename;
          attrvalue = obj.attributes[i].nodevalue;
          arr.push(attrname + '=\"' + attrvalue + '\"');
        }
        return arr.join(" ");
      }
      var otest = document.getelementbyid('test');
      console.log(otest.attributes);//namednodemap {0: class, 1: id, 2: for, 3: style, length: 4}
      console.log(typeof otest.attributes);//object
      console.log(outputattributes(otest));
      //class="wrapper" id="test" for="nice" style="background:#f0f;height: 100px;"
      console.log(typeof outputattributes(otest));//string
    </script>

文本节点

　　文本节点的三个node属性，nodetype:3、nodename:'#text'、nodevalue:节点所包含的文本，其父节点 parentnode 指向包含该文本节点的元素节点，文本节点没有子节点；

　　关于文本节点，遇到最多的兼容问题是空白文本节点问题。ie8及以下浏览器不识别空白文本节点，而其他浏览器会识别空白文本节点 ；所以有时候我们需要清理空白文本节点；

 <div id="test">
      <div>hello world!</div>
    </div>
    <script type="text/javascript">
      var otest = document.getelementbyid('test');
      //第一个和最后一个都是空白文本节点
      console.log(otest.firstchild);//" "  
      console.log(otest.lastchild);//" "  
      console.log(otest.childnodes);//[text, div, text]  
      //标准浏览器输出[text, div, text]，text表示空白文本节点
      //ie8及以下浏览器输出[div]，并不包含空白文本节点
      console.log(otest.childnodes.length); //3
      //标准浏览器返回3
      //ie8及以下浏览器返回1，并不包含空白文本节点
      //清理空白文本节点
      function cleanwhitespace(oeelement){
         for(var i = 0; i < oeelement.childnodes.length; i++){
           var node = oeelement.childnodes[i];
           if(node.nodetype == 3 && !/\s/.test(node.nodevalue)){
             node.parentnode.removechild(node);
           }
         }
      }
      cleanwhitespace(otest);
      console.log(otest.childnodes);//[div]
      console.log(otest.childnodes.length); //1
    </script>

文本节点属性：

• 文本节点的 data 属性与 nodevalue 属性相同；
• wholetext 属性将当前 text 节点与毗邻的 text 节点，作为一个整体返回。大多数情况下，wholetext 属性的返回值，与 data 属性和 textcontent 属性相同；
• 文本节点的 length 属性保存着节点字符的数目，而且 nodevalue.length、data.length 也保存着相同的值；   

<div id="testdata">hello world!</div>
    <div id="testwholetext">hello world!</div>
    <script type="text/javascript">
      var otestdata = document.getelementbyid('testdata');
      //第一个和最后一个都是空白文本节点
      console.log(otestdata.firstchild);//"hello world!"  
      console.log(typeof otestdata.firstchild);//object  
      console.log(otestdata.childnodes.length); //1
      console.log(otestdata.firstchild.nodevalue);//"hello world!" 
      console.log(typeof otestdata.firstchild.nodevalue);//string
      console.log(otestdata.firstchild.data);//"hello world!" 
      //文本节点的data属性与nodevalue属性相同,都是 string 类型
      console.log(otestdata.firstchild.data === otestdata.firstchild.nodevalue);//true
      var otestwholetext = document.getelementbyid('testwholetext');
      console.log(otestwholetext.childnodes); //[text]
      console.log(otestwholetext.childnodes.length); //1
      console.log(otestwholetext.firstchild.wholetext);//hello world!
      console.log(otestwholetext.firstchild.data);//hello world!  
      otestwholetext.firstchild.splittext('or');
      console.log(otestwholetext.childnodes); //[text, text]
      console.log(otestwholetext.childnodes.length); //2
      console.log(otestwholetext.firstchild);//#text
      console.log(otestwholetext.firstchild.wholetext);//hello world!
      //wholetext属性将当前text节点与毗邻的text节点，作为一个整体返回。
      console.log(otestdata.firstchild.length);//12
      console.log(otestdata.firstchild.nodevalue.length);//12
      console.log(otestdata.firstchild.data.length);//12
    </script>

文本节点方法：

　　文本节点的操作与字符串的操作方法相当类似。一般地，我们获取文本都用 innerhtml，然后再去字符串的操作方法去操作。

• document.createtextnode(text); 方法用于创建文本节点，这个方法接收一个参数，要插入节点中的文本；插入的是文本，就算写的是标签，也是当做文本来插入的；
• splittext(index) 方法将一个文本节点分成两个文本节点，即按照 index 指定的位置分割 nodevalue 值。原来的文本节点将包含从开始到指定位置之前的内容。这个方法会返回一个新文本节点，包含剩下的文本；
• appenddata(text) 方法将 text 添加到节点的末尾，该方法无返回值；
• deletedata(index,count) 方法从 index指定的位置开始删除 count 个字符，无返回值；
• insertdata(index,text) 方法在 index 指定的位置插入 text，无返回值；
• replacedata(index,count,text) 方法用 text 替换从 index 指定位置开始到 index+count 为止的文本，无返回值；
• substringdata(index,count) 方法提取从 index 指定的位置开始到 offset+count 为止处的字符串，并返回该字符串。原来的文本节点无变化；

以上所述是小编给大家介绍的jacascript dom节点——元素节点、属性节点、文本节点，希望对大家有所帮助