欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Web API---DOM---节点的概念，属性，和获取相关的节点

程序员文章站 2022-03-03 22:15:31
回顾概念 文档: document 元素: 页面中所有的标签, 元素 element, 标签 元素 对象 节点: 页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)) Node 根元素:html标签 需求 用之前学习的知识点能否解决？获取div中所有的标签,设置每个标签的背景颜色 节点 任 ......

回顾概念

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

需求---用之前学习的知识点能否解决？获取div中所有的标签,设置每个标签的背景颜色

节点---任意一个标签中的元素获取都非常的方便

 

节点的属性

可以使用标签--元素.出来
可以使用属性节点.出来
文本节点.点出来
 
节点的类型
nodetype: 节点的类型: 1----标签, 2---属性, 3---文本
nodename: 节点的名字: 标签节点---大写的标签名字, 属性节点---小写的属性名字, 文本节点----#text
nodevalue: 节点的值: 标签节点---null, 属性节点---属性值, 文本节点---文本内容
 
 

获取相关的节点

 

 

获取父级节点和父级元素

.parentnode
.parentelement
 

获取相关的节点属性

.parentnode.nodetype   // 1  --------标签
.parentnode.nodename  // div-----大写的标签名字
.parentnode.nodevalue  // null------标签
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>

</head>
<body>
<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>

<script src="common.js"></script>
<script>

  var ulobj=my$("uu");
  console.log(ulobj.parentnode);//div
  console.log(ulobj.parentnode.parentnode);//body
  console.log(ulobj.parentnode.parentnode.parentnode);//html
  console.log(ulobj.parentnode.parentnode.parentnode.parentnode);//document
  console.log(ulobj.parentnode.parentnode.parentnode.parentnode.parentnode);//null

//  //ul标签的父级节点
//  console.log(ulobj.parentnode);
//  //ul标签的父级元素
//  console.log(ulobj.parentelement);
//
//  console.log(ulobj.parentnode.nodetype);//标签的---1
//  console.log(ulobj.parentnode.nodename);//标签---大写的标签名字
//  console.log(ulobj.parentnode.nodevalue);//标签---null

</script>
</body>
</html>

 

获取子节点和子元素

.childnodes // 7个

.children  //3个

 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>title</title>

</head>

<body>
  <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>

  <script src="common.js"></script>
  <script>
    //div
    var dvobj = document.getelementbyid("dv");
    //子节点
    console.log(dvobj.childnodes);//7个子节点
    //子元素
    console.log(dvobj.children); //3
  </script>
</body>

</html>

 

获取里面的每个子节点

用for循环，长度是：.childnodes.length
 
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>title</title>

</head>

<body>
  <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>

  <script src="common.js"></script>
  <script>
    //div
    var dvobj = document.getelementbyid("dv");
    //获取里面的每个子节点
    for (var i = 0; i < dvobj.childnodes.length; i++) {
      var node = dvobj.childnodes[i];
      //nodetype--->节点的类型:1---标签,2---属性,3---文本
      //nodename--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
      //nodevalue-->节点的值:标签---null,属性--属性的值,文本--文本内容
      console.log(node.nodetype + "=====" + node.nodename + "====" + node.nodevalue);
    }

  </script>
</body>

</html>

 

认识下即可：获取属性的节点

.getattributenode("id")

//2====id====dv

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>title</title>

</head>

<body>
  <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>

  <script src="common.js"></script>
  <script>
    //div
    var dvobj = document.getelementbyid("dv");
    //获取的是属性的节点
    var node = dvobj.getattributenode("id");
    console.log(node.nodetype + "====" + node.nodename + "====" + node.nodevalue);//2====id====dv

  </script>
</body>

</html>

 

12行代码:都是获取节点和元素的

前4个没有兼容问题

后面8个有

<body>
<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>
<script src="common.js"></script>
<script>

  //12行代码:都是获取节点和元素的
  //ul
  var ulobj=document.getelementbyid("uu");
  //父级节点
  console.log(ulobj.parentnode);
  //父级元素
  console.log(ulobj.parentelement);
  //子节点
  console.log(ulobj.childnodes);
  //子元素
  console.log(ulobj.children);

　//我是分割线//

  //第一个子节点
  console.log(ulobj.firstchild);//------------------------ie8中是第一个子元素
  //第一个子元素
  console.log(ulobj.firstelementchild);//-----------------ie8中不支持
  //最后一个子节点
  console.log(ulobj.lastchild);//------------------------ie8中是第一个子元素
  //最后一个子元素
  console.log(ulobj.lastelementchild);//-----------------ie8中不支持
  //某个元素的前一个兄弟节点
  console.log(my$("three").previoussibling);
  //某个元素的前一个兄弟元素
  console.log(my$("three").previouselementsibling);
  //某个元素的后一个兄弟节点
  console.log(my$("three").nextsibling);
  //某个元素的后一个兄弟元素
  console.log(my$("three").nextelementsibling);

</script>
</body>

 

 

总结获取节点:

凡是获取节点的代码在谷歌和火狐得到的都是相关的节点
凡是获取元素的代码在谷歌和火狐得到的都是相关的元素
从子节点和兄弟节点开始, 凡是获取节点的代码在ie8中得到的是元素；而获取元素的相关代码, 在ie8中得到的是undefined，ie中不支持

上一篇： Mac的触发角是什么?Mac触发角怎么用

下一篇： HTML基础——基础标签

推荐阅读