JS---DOM---節點的概念，屬性，和獲取相關的節點

時間 2019-12-09

標籤 dom 節點概念屬性獲取相關欄目 JavaScript 简体版

原文原文鏈接

回顧概念

文檔: document

元素: 頁面中全部的標籤, 元素---element, 標籤----元素---對象

節點: 頁面中全部的內容(標籤,屬性,文本(文字,換行,空格,回車))----Node

根元素:html標籤

需求---用以前學習的知識點可否解決？獲取div中全部的標籤,設置每一個標籤的背景顏色html

節點---任意一個標籤中的元素獲取都很是的方便node

節點的屬性

能夠使用標籤--元素.出來

能夠使用屬性節點.出來

文本節點.點出來

節點的類型

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個spa

<!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")code

//2====id====dvhtm

<!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個有blog

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