返回列表 回复 发帖

[HTML DOM] DOM节点

节点(Node)类型

Node接口定义了对应不同节点类型的12个常量(它们会在nodeType特性中使用到),IE

中没有定义这些常量,不过我们可以自己定义。
  1. if (typeof Node == undefined) {
  2.     Node = {
  3.         ELEMENT_NODE : 1,
  4.         ATTRIBUTE_NODE : 2,
  5.         TEXT_NODE : 3,
  6.         CDATA_SECTION_NODE : 4,
  7.         ENTITY_REFERENCE_NODE : 5,
  8.         ENTITY_NODE : 6,
  9.         PROCESSING_INSTRUCTION_NODE : 7,
  10.         COMMENT_NODE : 8,
  11.         DOCUMENT_NODE : 9,
  12.         DOCUMENT_TYPE_NODE : 10,
  13.         DOCUMENT_FRAGMENT_NODE : 11,
  14.         NOTATION_NODE : 12
  15.     };
  16. }
复制代码
Node特性

常用的Node特性介绍(中括号里是其类型):

  • nodeName:节点的名字(根据节点类型而定义)【String】
  • nodeValue:节点的值(根据节点类型而定义)【String】
  • nodeType:节点的类型常量值之一【String】
  • ownerDocument:指向这个节点所属的文档【Document】
  • childNodes:所有子节点集合【NodeList】
  • firstChild:指向childNodes集合中的第一个节点【Node】
  • lastChild:指向childNodes集合中的最后一个节点【Node】
  • previousSibling:指向前一个兄弟节点,没有则为null【Node】
  • nextSibling:指向后一个兄弟节点,没有则为null【Node】
  • attributes:一个元素的特性的Attr对象,仅用于Element节点类型【NamedNodeMap】

在childNodes集合中有一个length属性可以用来显示子节点的个数,比如页面上有

如下元素:
  1. <div id="box-number">
  2.     <p>one</p>
  3.     <p>two</p>
  4.     <p>three</p>
  5. </div>
复制代码
下面代码是获取上面div中子节点的个数:
  1. var boxNum = document.getElementById('box-number');
  2. alert(boxNum.childNodes.length); // 输出3
复制代码

Node方法


常用的Node方法介绍(中括号里是其返回类型):

  • hasChildNodes():当childNodes集合包含一个或多个节点时返回true【Boolean】
  • appendChild(node):将node添加到childNodes的末尾【Node】
  • removeChild(node):从childNodes中删掉node【Node】
  • replaceChild(new, old):将childNodes中的old节点替换成new节点【Node】
  • insertBefore(new, red):在childNodes中的red节点前插入new节点【Node】

注意在使用appendChild(node)方法时,如果node已经在childNodes当中时,并

不会再次添加node节点,而只是将node节点移到childNodes的末尾。
  1. var boxNum = document.getElementById('box-number'),
  2.     pOne = boxNum.childNodes[0];
  3. boxNum.appendChild(pOne);
  4. // 最后会显示<p>two</p><p>three</p><p>one</p>
复制代码
处理元素节点的特性

DOM中定义了四个元素方法来操作元素的特性:

  • getAttribute(name):获取特性节点;
  • setAttribute(name, value):设置特性节点;
  • removeAttribute(name):移除特性节点;
  • createAttribute(name):创建特性节点。

例如获取上面div中的id特性:
  1. alert(boxNum.getAttribute('id')); // 输出box-number
复制代码

创建和操作节点


DOM中常用到的创建节点的方法包括:

  • createElement(target):创建标签名为target的元素节点;
  • createTextNode(text):创建包含文本为text的文本节点;
  • createDocumentFragment():创建文档碎片节点。

createElement,createTextNode,appendChild

比如要在上面的id为box-number的div中的末尾添加一个新元素<p>four</p>:
  1. var pFour = document.createElement('p'),
  2.     text = document.createTextNode('four');
  3. pFour.appendChild(text);
  4. boxNum.appendChild(pFour);
复制代码
removeChild,replaceChild,insertBefore

移除节点、替换节点和在某节点前插入节点:
  1. boxNum.removeChild(pOne); // 移除节点<p>one</p>

  2. var pFive = document.createElement('p'),
  3.     text = document.createTextNode('five');
  4. pFive.appendChild(text);

  5. boxNum.replaceChild(pFive, pFour); // 将节点<p>four</p>替换成<p>five</p>

  6. boxNum.insertBefore(pFour, pFive); // 在节点<p>five</p>前添加节点<p>four</p>
复制代码
实现insertAfter功能

利用appendChild方法和insertBefore方法可以实现insertAfter方法:
  1. /**
  2. * 在某个节点后插入一个新节点
  3. *
  4. * @param Node newNode 要插入的新节点
  5. * @param Node ref DOM中已经存在的节点
  6. * @return Node
  7. */
  8. function insertAfter(newNode, ref) {
  9.     ref.nextSibling ? ref.parentNode.insertBefore(newNode, ref.nextSibling) : ref.parentNode.appendChild(newNode);
  10. }
复制代码
createDocumentFragment

在进行添加节点操作时,添加一个节点,页面就会更新并反映出这个变化。对于少

量的更新,这是很好的,然而,当要向DOM中添加大量数据时,如果逐个进行添加

,这个过程就会十分缓慢。为此,可以创建一个文档碎片,把所有的新节点附加

在其上,然后一次性地将文档碎片添加到DOM中。
  1. var nameList = ['cctv', 'asdf', 'keal', 'jack', 'rose'],
  2.     i,
  3.     ii = nameList.length,
  4.     nameP,
  5.     text;
  6. for (i = 0; i < ii; i++) {
  7.     nameP = document.createElement('p');
  8.     text = document.createTextNode(nameList[i]);
  9.     nameP.appendChild(text);
  10.     document.body.appendChild(nameP);
  11. }
复制代码
上面这段代码虽然运行良好,但它调用了5次document.body.appendChild()方法,

每次都会产生一次页面更新。这时创建碎片文档就显得十分有用:
  1. var nameList = ['cctv', 'asdf', 'keal', 'jack', 'rose'],
  2.     i,
  3.     ii = nameList.length,
  4.     nameP,
  5.     text,
  6.     fgm = document.createDocumentFragment();
  7. for (i = 0; i < ii; i++) {
  8.     nameP = document.createElement('p');
  9.     text = document.createTextNode(nameList[i]);
  10.     nameP.appendChild(text);
  11.     fgm.appendChild(nameP);
  12. }
  13. document.body.appendChild(fgm);
复制代码
上面代码中每个新的p元素都先添加在文档碎片中,最后

调用document.body.appendChild()方法来一次性地将碎片中的子节点添

加到DOM中,这意味着只需要进行一次页面更新。
返回列表