DOM节点属性-蒲公英云

DOM节点属性

原文：https://blog.csdn.net/yiren_99/article/details/47843879 建议阅读原文

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

二、nodeValue 属性： 节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型	节点属性
元素	1
属性	2
文本	3
注释	8
文档	9

例子：获取所有li标签，并输出节点的名称、节点的值、节点的类型

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>节点属性</title>
</head>
<body>
      <ul>
         <li>javascript</li>
         <li>HTML/CSS</li>
        <li>jQuery</li>     
     </ul>
     <script type="text/javascript">
         var li=document.getElementsByTagName("li");
         for(var i=0;i<li.length;i++){
             document.write("节点名称："+li[i].nodeName+" 节点属性："+li[i].nodeValue+"节点类型："+li[i].nodeType+"<br/>");
             }
     </script>
</body>
</html>

访问子结点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法： elementNode.childNodes
注意：

IE全系列、firefox、chrome、opera、safari兼容问题
节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7

访问子结点的第一和最后项

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL
语法： node.firstChild
说明： 与elementNode.childNodes[0]是同样的效果
二、lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL
语法： node.lastChild
说明： 与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果，用lastElementChild的定位更准确

lastObj.lastElementChild.value="确定";//修改最后一子节点的value值

访问父节点parentNode

获取指定节点的父节点
语法： elementNode.parentNode
注意： 父节点只有一个

document.getElementById("Table1").deleteRow(s.parentNode.parentNode.rowIndex);//访问点击节点父节点的父节点的索引值

访问兄弟节点

一、nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）
语法： nodeObject.nextSibling
二、previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）
语法： nodeObject.previousSibling