前言：
此时大家对“js获取子节点值”可能比较注重，小伙伴们都想要学习一些“js获取子节点值”的相关知识。那么小编在网摘上收集了一些有关“js获取子节点值””的相关文章，希望看官们能喜欢，朋友们一起来了解一下吧！一、什么是节点
回顾概念: 文档:document 元素:页面中所有的标签,元素---element, 标签----元素---对象 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node 根元素:html标签
节点node
nodeType
nodeName
nodeValue
元素节点
1
标签名（大写）
null
属性节点
2
属性名
属性值
文本节点
3
#text
文本内容
CDATA节点
4
#cdata-section
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=";>百度</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"; } } }; 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js获取子节点值 #html节点 #html节点类型 #html文档节点 #能获取到所有子节点的属性
