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

回顾概念

文档: 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中不支持