Javascript节点 *** 作_html-js-css

节点 *** 作是Javascript获取元素的方式之一。另一种是利用Javascript提供的DOM方法获取元素。常见的有getElementById，getElementsByTagName()等；

这种方法每获取一次元素就要getElement一次，较为繁琐(相对于节点 *** 作而言)。我们可以使用节点 *** 作，在获取某一个元素后，使用节点 *** 作就可以直接获取它的子元素，子节点，兄弟节点等。

节点简介

节点在Javascript中包括文本节点，属性节点，元素节点，注释节点。节点具有节点类型(nodeType)，节点值(nodeValue)，节点名称(nodeName)。

节点类型 nodeType	不同类型的节点具有不同的编号，如元素节点编号为1
节点名称 nodeName	元素节点对应元素名，注释节点返回#comment，文本节点返回#text······
节点值 nodeValue	仅限于文本，注释，XML的CDATA节点。其他节点的属性值为null，可读可写。

个人测试代码




  
  
  
  测试
  


  
    
    里面不是空的
    ？？

nodeType各种节点对应值-以下图片摘自MDN 。个人感觉实际记忆价值不大，需要时能够查到即可。

节点 *** 作实际属性和方法属性 Node.firstChild 返回当前节点的第一个子节点，没有就返回null。


  
    
    里面不   是空的
    ？？

输出结果为取值为换行和空格的文本节点。

Node.lastChild 返回当前节点的最后一个子节点，没有返回null。


  
    
    里面不   是空的
    ？？

输出结果同样为值为换行和空格的文本节点。

以上两个方法由于可能获取到文本节点，常常使用firstElementNode lastElementNode这两个属性来获取第一个或最后一个元素节点。

输出结果就是第一个和最后一个li。

Node.childNodes 返回一个具有当前节点的全部子节点的类数组，类数组没有push，pop等数组方法，但具有length属性。返回值是实时更新的，随着节点修改而改变。


  
    
    里面不   是空的
    ？？

输出结果为类数组

Node.children 类似于childNodes，但是只是针对元素节点。


  
    ??
    11

以上为输出结果。

Node.nodeValue 返回当前节点的节点值，可读可写。当对这个属性赋值时就可以修改属性值。


  
    
    里面不   是空的
    ？？

输出结果为？？，也可以对这个属性进行修改，赋值字符串即可，此处不再展示。

Node.nextSibling 返回当前节点的下一个兄弟节点。不可修改(可读不可写)


  
    
    里面不   是空的
    ？？

输出的是值为换行和空格的文本节点。

Node.previousSibling 返回当前节点的上一个兄弟节点。可读不可写。


  
    
    里面不   是空的
    ？？

输出内容

以上两个属性针对元素还有nextElementSibling,previousElementSibling。效果也是针对元素，避免获取文本节点，注释节点等其他节点。

输出结果分别是第三个节点，第一个节点。

Node.parentNode 返回当前节点的父节点，没有则返回null。


  
    
    里面不   是空的
    ？？

输出内容为div元素。

Node.parentElement 返回当前节点的父元素，没有则返回null。相对于上一个方法，更针对于获取元素，避免了父节点为非元素节点的可能。


  
    
    里面不   是空的
    ？？

输出内容也是div元素

Node.textContent 返回当前节点的内部可视文本。不包括注释，display为none的元素内部文本，包括换行空格。(若想针对这个属性深入思考可以看本人的另一篇博文)


  
    
    里面不   是空的
    ？？

输出内容方法 Node.appendChild() 将参数指定的节点添加到当前节点的子节点，成为最后一个子节点。


  
    
    里面不   是空的
    ？？

修改后页面结构变为：

Node.cloneNode() 参数是一个布尔值。为真，克隆内容包含当前节点的全部子代节点。为假时只是当前节点内容，不包括子代。这个方法会返回一个克隆节点，一般需要赋值到其他变量上来保存克隆出来的变量。


  
    
    里面不   是空的
    ？？

输出的这个box_cpoy不在页面中，属于一个DOM外的节点。参数为真，复制的内容包括子节点及其内容。参数为假时复制不包括子节点。

Node.contains() 参数是一个节点，作用是判定当前节点是否包含参数节点。包含则返回true，反之返回false。这里的包含关系可以是子代的子代······，仍会返回true。


  
    
    里面不   是空的
    ？？

输出为true

Node.hasChildNode() 无参数。作用是判定当前节点的子节点中是否含有子节点。返回值为布尔值。当然也可以使用node.firstNode!=null判断，node.childNodes.length!=0


  
    
    里面不   是空的
    ？？

输出为false

Node.insertBefore() 第一个参数是需要移动位置的节点，第二个参数是作为相对位置的节点，第一个参数节点会插入到第二个参数节点前。如果第一个参数节点已经出现在html文档中，这个方法就会移动该节点到新位置并删除原位置的节点。


  
    
    里面不   是空的
    ？？

修改后网页结构

document.creatElement() 参数为一个表示标签名的字符串。返回值就是新创建的元素。这个方法创建元素后不会直接放到页面中，而是需要使用appendChild *** 作把元素放到页面中。

Node.isEqualNode() 比较当前节点和参数节点是否是同一节点，比较范围包括属性和属性值，节点类型，节点值。相同返回true，反之返回false。


  
    
    里面不   是空的
    ？？

这里以两种方式访问同一节点，输出为true。

Node.replaceChild() 第一个参数是新节点，第二个参数是被替换的节点。新节点如果已经出现在html文档中，原本位置的就会被删除。


  
    
    里面不   是空的
    ？？

以上为修改后的网页结构。

Node.removeNode() 参数是需要删除的子节点。该方法会返回被删除的节点。可以使用变量保存被删除节点(如果需要的话)。


  
    
    里面不   是空的
    ？？

以上为修改后网页结构。删除了ul中的文本节点

Node.normalize() 无参数，作用是规范化当前节点以及后代节点。会删去空文本节点，以及一些连续的文本节点。

Node.getRootNode() 参数是一个布尔值。这个方法的作用返回是DOM树的根节点，即为HTMLDocument。参数默认为假,检索到shadow root就返回，为真则检索到普通root。(这玩意对笔者来说是没见过的新概念，有兴趣可以在MDN上找到相关资料)

Node.compareDocumentPosition()（非重点）参数是另一个节点。作用是比较当前节点与另一节点的位置关系，返回值是一个十进制数值，不同数字代表不同含义。本人测试代码如下

console.log(box.compareDocumentPosition(box));//0 两者一致
console.log(box.compareDocumentPosition(box.previousSibling));//2 当前节点在另一个节点后面
console.log(box.compareDocumentPosition(box.nextSibling));//4 当前节点在另一个节点前面
console.log(box.compareDocumentPosition(box.parentNode));//10 当前节点是另一个节点的子节点
console.log(box.compareDocumentPosition(box.firstChild));//20 当前节点是另一个节点的父节点

这里值得一提的是本人查阅MDN得到的结果与自行测试的结果不同，如有兴趣并懂得原因还请不吝赐教。

部分涉及命名空间的部分方法因笔者尚未进行命名空间的学习，不再展开赘述。以下逐一列出，大家可以自行参考学习。Node.lookupNamespaceURI()，Node.lookupPrefix()，Node.isDefaultNamespace()

以上就是本次节点 *** 作的相关知识点分享，本文参考MDN官方文档，这时并没有涉及废弃的方法。大家如由兴趣也可以在这里查看MDN的相关资料。本文如有不足或错误之处，欢迎指正。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1322904.html