js中节点（js节点操作方法）

命中注定 • 2022-06-14 22:00:27 • 软件

一、什么是节点

 回顾概念:
 文档:document
 元素:页面中所有的标签,元素---element, 标签----元素---对象
 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
 根元素:html标签

节点node	nodeType	nodeName	nodeValue
元素节点	1	标签名（大写）	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容
CDATA节点	4	#c>CDATA区域内容
实体引用名称节点	5	引用名称	null
实体名称节点	6	实体名称	null
处理指令节点	7	target	entire content cluding the target
注释节点	8	#comment	注释内容
文档节点	9	#document	null
文档类型节点	10	doctype的名称	null
文档片段节点	11	#document-fragment	null
DTD声明节点	12	符号名称	null

 ****节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
 nodeType:节点的类型
 nodeName:节点的名字
 nodeValue:节点的值

二、节点的获取（包含元素节点）

相关html代码

 <div id="dv">
   <span>这是div中的第一个span标签</span>
   <p>这是div中的第二个元素,第一个p标签</p>
   <ul id="uu">
     <li>乔峰</li>
     <li>鹿茸</li>
     <li id="three">段誉</li>
     <li>卡卡西</li>
     <li>雏田</li>
   </ul>
 </div>

获取父节点（属性）：

 // 获取某节点的父级节点
 node.parentNode
 // 获取某节点的父级元素
 node.parentElement

获取子节点（属性）：

 // 获取某节点的子节点
 node.childNodes
 // 获取某节点的子元素
 node.children

属性节点（方法）：

 // 获取属性节点
 node.getAttributeNode("name")

获取其他相关节点（属性）—— 拓展：

 // 获取某节点的第一个子节点
 node.firstChild;//-----------------------IE8中是第一个子元素
 // 获取某节点的第一个子元素
 node.firstElementChild;//----------------IE8中不支持
 // 获取某节点的最后一个子节点
 node.lastChild;//------------------------IE8中是第一个子元素
 // 获取某节点的最后一个子元素
 node.lastElementChild;//-----------------IE8中不支持
 
 // 获取某节点的前一个兄弟节点
 node.previousSibling;
 // 获取某节点的前一个兄弟元素
 node.previousElementSibling;
 // 获取某节点的后一个兄弟节点
 node.nextSibling;
 // 获取某节点的后一个兄弟元素
 node.nextElementSibling;

案例：点击按钮设置div中p标签改变背景颜色（掌握）

html和css代码

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         div {
             width: 300px;
             height: 450px;
             border: 1px solid red;
        }
     </style>
 </head>
 
 <body>
     <input type="button" value="变色" id="btn" />
     <div id="dv">
         <span>这是span</span>
         <p>这是p</p>
         <span>这是span</span>
         <p>这是p</p>
         <span>这是span</span>
         <p>这是p</p>
         <span>这是span</span>
         <a href="http://www.baidu.com">百度</a>
     </div>
 </body>
 
 </html>

JavaScript代码

 get_id("btn").onclick = function () {
     //先获取div
     var dvObj = get_id("dv");
     //获取里面所有的子节点
     var nodes = dvObj.childNodes;
     //循环遍历所有的子节点
     for (var i = 0; i < nodes.length; i++) {
         //判断这个子节点是不是p标签
         if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
             nodes[i].style.backgroundColor = "red";
        }
    }
 };