Js基础10:节点基础

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

大家好,欢迎来到IT知识分享网。

一、什么是节点

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/87201.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信