欢迎大家来到IT世界,在知识的湖畔探索吧!
一、什么是节点
回顾概念:
文档:document
元素:页面中所有的标签,元素---element, 标签----元素---对象
节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
根元素:html标签欢迎大家来到IT世界,在知识的湖畔探索吧!
|
节点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 |
欢迎大家来到IT世界,在知识的湖畔探索吧! ****节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来) 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>获取父节点（属性）：
欢迎大家来到IT世界,在知识的湖畔探索吧! // 获取某节点的父级节点 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"; } } };免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/76655.html
