计算机系统应用教程网站

网站首页 > 技术文章 正文

Js基础10:节点基础 js节点操作

btikc 2024-10-25 10:57:56 技术文章 6 ℃ 0 评论

一、什么是节点


 回顾概念:
 文档: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";
        }
    }
 };

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表