DOM节点属性

ゝ一纸荒年。 2022-02-18 23:09 358阅读 0赞

原文：[https://blog.csdn.net/yiren\_99/article/details/47843879][https_blog.csdn.net_yiren_99_article_details_47843879] 建议阅读原文

## 节点属性 ##

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

1.  nodeName : 节点的名称
2.  nodeValue ：节点的值
3.  nodeType ：节点的类型

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

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

**二、nodeValue 属性：** 节点的值

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

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

例子：获取所有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  
**注意：**

1.  IE全系列、firefox、chrome、opera、safari兼容问题
2.  节点之间的空白符，在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

[https_blog.csdn.net_yiren_99_article_details_47843879]: https://blog.csdn.net/yiren_99/article/details/47843879