优质

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

周雅彤优秀作者

原创内容来源：小居数码网时间：2024-08-13 17:34:01 阅读() 收藏：44 分享：42 爆

导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有892个文字，大小约为4KB，预计阅读时间3分钟。

一、什么是节点

js中节点

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

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

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

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

相关html代码

<divid="dv"><span>这是div中的第一个span标签</span><p>这是div中的第二个元素,第一个p标签</p><ulid="uu"> <li>乔峰</li> <li>鹿茸</li> <liid="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><htmllang="en"><head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>   div{     width:300px;     height:450px;     border:1pxsolidred;   } </style></head><body> <inputtype="button"value="变色"id="btn"/> <divid="dv">   <span>这是span</span>   <p>这是p</p>   <span>这是span</span>   <p>这是p</p>   <span>这是span</span>   <p>这是p</p>   <span>这是span</span>   <ahref="http://">百度</a> </div></body></html>

JavaScript代码

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

上面就是小居数码小编今天给大家介绍的关于（js中节点）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

（546）个朋友认为回复得到帮助。

部分文章信息来源于以及网友投稿，转载请说明出处。

本文标题：js节点操作方法（js中节点）：http://sjzlt.cn/shuma/155321.html

上一篇：免费的内网穿透网站（内网穿透实现远程桌面）

下一篇：mysql语句大全实例教程（sql基础教程和mysql必知必会）