技術文章 » javascript怎麼獲取html檔案的節點

javascript怎麼獲取html檔案的節點

2022-01-23 19:00:18

方法：1、用「document.getElementById("id屬性值")」語句；2、用「document.getElementsByTagName("標籤名字")」語句；3、用「document.documentElement」語句。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

1. 通過document節點獲取（直接獲取）

案例：

<body>
    <ul >
        <li id="one">一個</li>
        <li name="name1" >二個</li>
        <li class="classname">三個</li>
        <li>四個</li>
    </ul>
</body>

1.1 通過ID

語法：document.getElementById("id屬性值")

特點：根據ID值獲取元素，返回元素物件；(id唯一)
範例：

  var one=document.getElementById("one");
    console.log(one);

在這裡插入圖片描述

1.2 通過標籤名

語法：document.getElementsByTagName("標籤名字")

特點：標籤名字獲取元素,返回來的是一個偽陣列,裡面儲存了多個的DOM物件；

範例：

 var li=document.getElementsByTagName("li")
    console.log(li);

在這裡插入圖片描述

1.3 通過name值

語法：document.getElementsByName("name屬性的值")

特點：根據name屬性的值獲取元素,返回來的是一個偽陣列,裡面儲存了多個的DOM物件
範例：

var name1=document.getElementsByName("name1")[0];
    console.log(name1);

在這裡插入圖片描述

1.4 通過class

語法：document.getElementsByClassName("類樣式的名字")

特點：據類樣式的名字來獲取元素,返回來的是一個偽陣列,裡面儲存了多個的DOM物件
範例：

 var classname=document.getElementsByClassName("classname")[0];
    console.log(classname);//

在這裡插入圖片描述

1.5 通過選擇器

語法：document.querySelector("選擇器的名字")

特點：根據選擇器獲取元素,返回來的是一個元素物件；
範例：

 var que1=document.querySelector("#one");
    console.log(que1); //

在這裡插入圖片描述

1.6 通過所有選擇器

語法： document.querySelectorAll("選擇器的名字")

特點：據選擇器獲取元素,返回來的是一個偽陣列,裡面儲存了多個的DOM物件；
範例：

var queall=document.querySelectorAll("li");
    console.log(queall); //

在這裡插入圖片描述

1.7 特殊元素獲取

語法：doucumnet.body

特點：返回body元素物件
範例：

  var body=document.body ;
    console.log(body);

在這裡插入圖片描述

1.8 HTML元素獲取

語法：document.documentElement

特點：html元素物件
範例：

var dc=document.documentElement  ;
    console.log(dc);

在這裡插入圖片描述

2. 通過父級節點獲取

（一般在已經獲取父節點，通過父節點來獲取子位元組）

<body>
    <div id="digbox">
        <!-- 第一個 -->
        <div id="box1">
            <ul class="ul">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
            </ul>
        </div>
        <!-- 第二個 -->
        <div id="box2">
            <a href="#">這是第二個div</a>
        </div>

        <!-- 第三個 -->
        <div id="box3">
            <a href="#">這是第三個div</a>
        </div>
    </div>
</body>

2.1 獲取第一個節點

語法：

document.getElementById("test").firstElementChild;
document.getElementById("test").firstChild;

特點：獲取第一個節點

範例：

var box=document.getElementById("digbox").firstElementChild;
    console.log(box);
     
    var box1=document.getElementById("digbox").firstChild;
    console.log(box1);

在這裡插入圖片描述

2.2 獲取最後一個子節點
語法：

document.getElementById("test").lastElementChild;；
document.getElementById("test").lastChild;

特點：獲取最後一個子節點

範例：

 var box2= document.getElementById("digbox").lastElementChild;
    console.log(box2);

    var box3= document.getElementById("digbox").lastChild;
    console.log(box3);

在這裡插入圖片描述

2.3 獲取所有子節點

語法：

document.getElementById("test").children[0];
document.getElementById("test").childNodes;
document.getElementById("test").childElementCount;

特點：獲取所有子節點

範例：

 var box4= document.getElementById("digbox").children[0];
    console.log(box4);

    var box5= document.getElementById("digbox").childNodes;
    console.log(box5);

    var box6= document.getElementById("digbox").childElementCount;
    console.log(box6);

在這裡插入圖片描述

2.4 獲取直接子節點

語法：document.getElementById("id")

特點：獲取直接子節點

範例：

  var box7= document.getElementById("digbox");
    console.log(box7);

在這裡插入圖片描述

2.5 獲取對應屬性的節點

語法：document.getElementById("id").getElementsByClassName("ul")；

特點： 獲取對應屬性的節點(可以是ID，class，屬性，標籤)常用；

範例：

    var box8= document.getElementById("digbox").getElementsByClassName("ul");
    console.log(box8);

在這裡插入圖片描述

3. 通過兄弟節點獲取

<body>
    <div id="box">
        <p>這是第一個標籤</p>
        <p id="box2">這是第二個標籤</p>
       <div ><a href="">這是第三個標籤</a></div>
    </div>
</body>

3.1 獲取當前節點的前一個節點

語法：

document.getElementById("id").previousElementSibling；
document.getElementById("id").previousSibling

特點： 返回指定節點的前一個節點，如果沒有 previousSibling 節點，則返回值為 null。

範例：

var box1=document.getElementById("box2").previousElementSibling;
  console.log(box1);

  var box2=document.getElementById("box2").previousSibling;
  console.log(box2);

在這裡插入圖片描述

3.2 獲取當前節點的後一個節點

語法：

document.getElementById("id").nextSibling
document.getElementById("id").nextElementSibling；

特點： 返回指定節點之後緊跟的節點，如果沒有 nextSibling 節點，則返回值為 null。

範例：

 var box3=document.getElementById("box2").nextElementSibling;
  console.log(box3);

  var box4=document.getElementById("box2").nextSibling;
  console.log(box4);

在這裡插入圖片描述

4. 通過子級節點獲取

4.1 通過子節點獲取父級節點

<body>
    <div id="box">
        <p id="box2">這是第二個標籤</p>
    </div>
</body>

語法：document.getElementById("id").parentNode

特點： 返回指定節點的父節點,如果指定節點沒有父節點，則返回 null。

範例：

  var box=document.getElementById("box2").parentNode;
  console.log(box);

在這裡插入圖片描述

【相關推薦：】

以上就是javascript怎麼獲取html檔案的節點的詳細內容，更多請關注TW511.COM其它相關文章！