一、什么是节点
回顾概念:
文档: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="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";
}
}
};
本文暂时没有评论，来添加一个吧(●'◡'●)