javascript节点

Posted 2020-07-07

  DOM将html或xml文档描绘成一个由多层节点构成的结构。节点都继承自一个基类型，除IE外，其他所有浏览器都可以访问到这个类型。

  节点有三个重要的属性，分别是：节点类型（nodeType）、节点名称（nodeName）、节点的值（nodeValue）。

 

---

 

一、节点类型（只读的）

     节点类型用来区分不同类型的节点，注意每种类型都对应一个数字值。

     以下是一些常见的节点类型：

节点类型	常量值	数字值
元素节点	Node.ELEMENT_NODE	1
属性节点	Node.ATTRIBUTE_NODE	2
文本节点	Node.TEXT_NODE	3
注释节点	Node.COMMENT_NODE	8
文档节点	Node.DOCUMENT_NODE	9

     用法：xx.nodeType(xx是节点对象)

     如果要判断节点的类型，最好是用数字值进行判断，而不要用常量值判断，这在IE中会导致错误，为了确保跨浏览器兼容，最好写代码如下：

1 if(xx.nodeType==1){ 
2    alert("Node is an element");
3 }

    此外，使用nodeType还可以解决获取子节点个数及求得节点的兄弟节点这两种问题的浏览器兼容问题,如下面的代码：

 1 <ul>
 2    <li>html</li>
 3    <Li>css</Li>
 4    <li>javascript</li>
 5 </ul>  
 6 
 7    <script type="text/javascript">
 8         var nodelist = document.getElementsByTagName("ul")[0].childNodes;
 9         document.write("ul子节点的长度为："+nodelist.length);
10    </script>

输出结果为：ul子节点的长度为：7

明明ul里面只有三个<li>元素，为什么显示的结果却是7呢?

这是因为除IE之外的浏览器认为节点之间的空白符是一个空白文本节点，所以会出现这种结果，因此在这种情况下，我们需要对节点的类型进行判断，这里以查找下一个节点为例，如果下一个节点不是元素节点，则将下下个节点赋给x

1 function get_nextSibling(n){
2         var x=n.nextSibling;
3         while (x && x.nodeType!=1){
4             x=x.nextSibling;
5         }
6         return x;
7     }

 

---

 

 

二、节点名称（只读的）

•  元素节点的nodeName: 就是标签名，如<p>、<div>、<h2>等。
•  属性节点的nodeName：就是节点的属性，如<a>标签的”href“属性等。
• 文本节点的nodeName： 永远是#text
• 文档节点的nodeName： 永远是#document

 用法：xx.nodeName(xx是节点对象)  

 

---

 

 

三、节点的值（可以改变）

     1、元素节点一般不用这个属性，因为它会返回undefined或null
          来看一个小例子:

  1 <li id="one">javascript<li>
  2 var mylist = document.getElementById("one");
  3 
  4 document.write(mylist.nodeValue);

      这里<li>元素节点的value输出是null。
      <li>元素的子节点（文本节点）的值才是javascript，应这样写：

1  document.write(mylist.firstChild.nodeValue);

    或者说<li>的innerHTML才是javascript

    2、文本节点的nodeValue是文本本身
    3、属性节点的nodeValue是属性值