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