點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

淺談JS獲取元素的N種方法及其動靜態討論

來源：懂視網責編：小采時間：2020-11-27 22:31:46

淺談JS獲取元素的N種方法及其動靜態討論

淺談JS獲取元素的N種方法及其動靜態討論:實際前端開發工作中，我們經常會遇到要獲取某些元素，以達到更新該元素的樣式、內容等目的。而文檔對象模型 (DOM) 是HTML和XML文檔的編程接口，它提供了對文檔的結構化的表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內

推薦度：

點擊下載本文 文檔為doc格式

導讀淺談JS獲取元素的N種方法及其動靜態討論:實際前端開發工作中，我們經常會遇到要獲取某些元素，以達到更新該元素的樣式、內容等目的。而文檔對象模型 (DOM) 是HTML和XML文檔的編程接口，它提供了對文檔的結構化的表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內

實際前端開發工作中，我們經常會遇到要獲取某些元素，以達到更新該元素的樣式、內容等目的。而文檔對象模型 (DOM) 是HTML和XML文檔的編程接口，它提供了對文檔的結構化的表述，并定義了一種方式可以使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析為一個由節點和對象（包含屬性和方法的對象）組成的結構集合，它會將web頁面和腳本或程序語言連接起來。也因此，JavaScript可以通過DOM API獲取元素節點，方法有如下幾種：其中querySelector()和querySelectorAll()為ES5的元素選擇方法

1、getElementById()：

接收一個參數：要取得的元素的ID(區分大小寫，必須嚴格匹配)，返回一個Element對象（也可看作是動態NodeList集合，只是集合中只包含一個匹配的元素，但也會實時反映DOM節點的變化），若當前文檔中擁有特定ID的元素不存在則返回nul。
語法：

element = document.getElementById(id);

示例：刪除

<body>
 <div id="myDiv">
 <p class="myP">hello world</p>
 <p class="myP">hello dolby</p>
 <p class="myP">hello dot</p>
 <p class="myP">hello bean</p>
 </div>
 <script>
 var div = document.getElementById("myDiv");
 console.log(div); //(1)
 var body=document.querySelector('body');
 body.removeChild(div);
 console.log(body); //(2)
 </script>
</body>

//(1)處打印值
 <div id="myDiv">
 <p class="myP">hello world</p>
 <p class="myP">hello dolby</p>
 <p class="myP">hello dot</p>
 <p class="myP">hello bean</p>
 </div>

//(2)處打印值
<body>
 <script>
 var div = document.getElementById("myDiv");
 console.log(div); //(1)
 var body=document.querySelector('body');
 body.removeChild(div);
 console.log(body); //(2)
 </script>
</body>

示例：

<!DOCTYPE html>
<html>
<head>
 <title>getElementById example</title>
 <script>
 function changeColor(newColor) {
 var elem = document.getElementById("para1");
 elem.style.color = newColor;
 }
 </script>
</head>
<body>
 <p id="para1">Some text here</p>
 <button onclick="changeColor('blue');">blue</button>
 <button onclick="changeColor('red');">red</button>
</body>
</html>

getElementById()方法不會搜索不在文檔中的元素。當創建一個元素且分配ID后，必須要使用insertBefore()或其他類似的方法把元素插入到文檔中之后才能使用 getElementById() 獲取到:

var element = document.createElement("div");
element.id = 'testqq';
var el = document.getElementById('testqq'); // el will be null!

2、getElementsByClassName()：

接收一個參數，即包含一個或多個類名的字符串（類名通過空格分隔），返回一個HTMLCollection動態集合（也可以說返回一個NodeList類數組對象），集合中包含以當前元素為根節點，所有指定 class 名的子元素。
語法：

var elements = document.getElementsByClassName(names); 
var elements = rootElement.getElementsByClassName(names);

getElementsByClassName 可以在任意的元素上調用，不僅僅是document。調用這個方法的元素將作為本次查找的根元素。

示例：

獲取所有 class 為 'test' 的元素:

document.getElementsByClassName('test');

獲取所有 class 同時包括 'red' 和 'test' 的元素:

document.getElementsByClassName('red test');

在id 為'main'的元素的子節點中，獲取所有class為'test'的元素:

document.getElementById('main').getElementsByClassName('test');

示例：刪除

//html代碼
<div class="myDiv">
 <p class="myP">hello world</p>
 <p class="myP">hello dolby</p>
 <p class="myP">hello dot</p>
 <p class="myP">hello bean</p>
 </div>

//js代碼一
 <script>
 var div = document.getElementsByClassName("myDiv");
 console.log(div); //(3)
 var p = document.getElementsByClassName("myP");
 for (var i = 0; i < p.length; i++) {
 div[0].removeChild(p[i]);
 }
 console.log(p); //(4)
 </script>

//(3)處打印值
[div.myDiv] //一個動態的HTMLCollection集合，長度為1，innerHTML為<p class="myP">hello dolby</p>，<p class="myP">hello bean</p>，為什么沒有其他兩個p元素一會兒解釋。

//(4)處打印值
[p.myP,p.myP] //一個動態的HTMLCollection集合，長度為2，innerHTML分別為"hello dolby"，"hello bean"。

以上用刪除節點的方法驗證了getElementsByClassName方法返回的是一個HTMLCollection動態集合。

⬆️以上代碼中，首先div取得了頁面中類名為"myDiv"的元素組成的動態集合，p取得了頁面中類名為"myP"的元素組成的動態集合，接著用一個for循環來刪除"myDiv"集合中第一項（即上例中唯一的div元素）中的"myP"集合中的每一項，結果只有第一項和第三項被刪除了，這是為什么呢？

原因是動態集合中DOM結構的變化能夠自動反映到所保存的對象中，最開始p.legth=4，當i=0時刪除了頁面中第一個p元素，此后p.length=3；i=1時刪除了剩余的三個p中的項目索引為1的項，此后p.length=2；i=2時已不滿足i<p.length這一條件，所以不會繼續執行循環。至此只刪除了頁面上的第一和第三個p元素，所以打印p得到了一個長度為2的HTMLCollection動態集合，其中包含"hello dolby"和"hello bean"，p的變化也實時反映到了動態集合div中，所以才有(1)處的打印結果。

那么怎樣才能遍歷類數組對象HTMLCollection集合中的每一項并且刪除所有項呢？

還是一個for循環搞定⬇️，每次刪除對象集合中的最后一項就可以啦～

//js代碼二
 <script>
 var div = document.getElementsByClassName("myDiv")[0];
 console.log(div); //(5)
 var p = document.getElementsByClassName("myP");
 for (var i=p.length;i--;){
 div.removeChild(p[i]);
 }
 console.log(p); //(6)
 </script>

//(5)處打印值
<div class="myDiv"></div>

//(6)處打印值
[] //空的HTMLCollection集合，長度為0

3、getElementsByTagName()：

接收一個參數：要取得的元素的標簽名（不區分大小寫），返回一個HTMLCollection動態集合（也可以說返回一個NodeList類數組對象）,集合中包含以當前元素為根節點（不包括當前元素自身），所有指定標簽名的子元素，子元素的順序是在當前元素的子樹中出現的順序，如果沒有搜索到元素則集合為空。
語法：

elements = element.getElementsByTagName(tagName)

示例：

// check the alignment on a number of cells in a table. 
var table = document.getElementById("forecast-table"); 
var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
 var status = cells[i].getAttribute("data-status"); 
 if ( status == "open" ) { 
 // grab the data 
 }
}

示例：刪除

<body>
 <div id="myDiv">
 <p class="myP">hello world</p>
 <p class="myP">hello dolby</p>
 <p class="myP">hello dot</p>
 <p class="myP">hello bean</p>
 </div>
 <script>
 var div = document.getElementById("myDiv");
 console.log(div); //(7)
 var p = document.getElementsByTagName("p");
//以下for循環改為for (var i=0,len=p.length;i<len;i++) {div.removeChild(p[0]);}也可；將集合p的長度賦值給變量len，這樣len就是一個固定值，每次都刪除當前集合項目索引為0的項，就可以循環遍歷刪除掉集合里的所有項。
 for (var i=p.length;i--;){
 div.removeChild(p[i]);
 }
 console.log(p); //(8)
 </script>
</body>

與getElementByClassName相同，返回動態集合，所以循環刪除結果也相同

//(7)處打印值
<div id="myDiv"></div>

//(8)處打印值
[] //空的HTMLCollection集合，長度為0

4、getElementsByName()：

接收一個參數：帶有給定name屬性值的元素，返回一個動態NodeList類數組對象，對象中包含以當前元素為根節點，所有指定name屬性值的子元素。最常用的場景是取得單選按鈕。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
 ...
</head>

<body>
<form name="up"><input type="text"></form>
<div name="down"><input type="text"></div>

<script>
var up_forms = document.getElementsByName("up");
console.log(up_forms[0].tagName); // returns "FORM"
</script>
</body>
</html>

示例：刪除

<body>
 <div id="myDiv">
 <input type="radio" name="fav-color">red
 <input type="radio" name="fav-color">green
 <input type="radio" name="fav-color">blue
 </div>
 <script>
 var div = document.getElementById("myDiv");
 console.log(div); //(9)
 var ipt_favCol = document.getElementsByName("fav-color");
 for (var i = ipt_favCol.length; i--;) {
 div.removeChild(ipt_favCol[i]);
 }
 console.log(ipt_favCol); //(10)
 </script>
</body>

getElementByName返回的是一個NodeList動態集合

//(9)處打印值
<div id="myDiv">
"red"
"green"
"blue"
</div>

//(10)處打印值
[] //空的NodeList集合，長度為0

5、querySelector()：

接收一個參數：一個包含一個或多個CSS 選擇器的字符串（多個選擇器以逗號分隔），返回匹配指定CSS選擇器的第一個元素節點（無法選中CSS偽元素），沒有發現匹配的節點則返回null。

語法：

element = document.querySelector(selectors);

示例：一個強大的選擇方式

<div class="user-panel main">
 <input name="login"/> //這個標簽將被返回
</div>

<script>
 var el = document.querySelector("div.user-panel.main input[name=login]");
</script>

示例：如果要匹配的ID或選擇器不符合 CSS 語法（比如不恰當地使用了冒號或者空格），你必須用反斜杠將這些字符轉義。由于 JavaScript 中，反斜杠是轉義字符，所以當你輸入一個文本串時，你必須將它轉義兩次（一次是為 JavaScript 字符串轉義，另一次是為 querySelector 轉義）：

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 console.log('#foo\bar') // "#fooar"
 document.querySelector('#foo\bar') // 不匹配任何元素

 console.log('#foo\\bar') // "#foo\bar"
 console.log('#foo\\\\bar') // "#foo\\bar"
 document.querySelector('#foo\\\\bar') // 匹配第一個div

 document.querySelector('#foo:bar') // 不匹配任何元素
 document.querySelector('#foo\\:bar') // 匹配第二個div
</script>

示例：刪除

 <div id="myDiv">
 <p class="myP">hello world</p>
 <p class="myP">hello dolby</p>
 <p class="myP">hello dot</p>
 <p class="myP">hello bean</p>
 </div>
 <script>
 var div = document.getElementById("myDiv");
 console.log(div); //(11)
 var p = document.querySelector("p");
 div.removeChild(p);
 console.log(p); //(12)
 </script>

//(11)處打印值
 <div id="myDiv">
 <p class="myP">hello dolby</p>
 <p class="myP">hello dot</p>
 <p class="myP">hello bean</p>
 </div>

//(12)處打印值
 <p class="myP">hello world</p> //如你所見，querySelector也是靜態的快照

6、querySelectorAll()：

接收一個參數：一個包含一個或多個CSS 選擇器的字符串（多個選擇器以逗號分隔），返回靜態NodeList對象集合，該集合中包含匹配指定CSS選擇器的所有節點，元素節點的變化無法實時反映在結果中；如果參數中包含CSS偽元素則返回一個空的對象集合。

語法：

elementList = document.querySelectorAll(selectors);

示例：

var matches = document.querySelectorAll("div.note, div.alert");

示例：刪除

 <div id="myDiv">
 <p class="myP">hello world</p>
 <p class="myP">hello dolby</p>
 <p class="myP">hello dot</p>
 <p class="myP">hello bean</p>
 </div>
 <script>
 var div = document.getElementById("myDiv");
 console.log(div); //(13)
 var p = document.querySelectorAll("p");
 for (var i = 0; i < p.length; i++) {
 div.removeChild(p[i]);
 }
 console.log(p); //(14)
 </script>

//(13)處打印值
 <div id="myDiv"></div>
//(13)處打印值
 [p.myP,p.myP,p.myP,p.myP] //返回的是靜態NodeList集合，元素節點的變化無法實時反映在結果中

7、elementFromPoint()：

接收兩個參數：分別是相對于當前窗口左上角的橫縱坐標，單位為CSS像素，不需要加單位；返回位于頁面指定位置的元素，如果該元素不可返回（如滾動條）則返回它的父元素，如果坐標值無意義（如負值）則返回null。

語法

var element = document.elementFromPoint(x, y);

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<title>elementFromPoint example</title>

<script>
function changeColor(newColor) {
 elem = document.elementFromPoint(2, 2);
 elem.style.color = newColor;
}
</script>
</head>

<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>

這一個獲取元素的方法用得不多所以不多做介紹。

是不是覺得看了上面這些頭好大啊，什么是動態什么是靜態，有沒有好記一點的方法呢？
有噠！

你可以簡單地理解為，getElementBy系列返回的都是動態的HTMLCollection集合，動態集合中的DOM結構變化能實時地反映到所保存的對象中，而querySelector系列返回的都是靜態的NodeList對象，是一個快照，對DOM的任何操作都不會對其產生影響。

那么Nodelist和HTMLCollection有什么異同呢？

相同點：

二者都是類數組對象

二者都具有length屬性

二者都具有item()方法

二者都是動態的元素集合，每次訪問都需要重新對文檔進行查詢。

你一定會好奇，誒？前面不是說querySelector系列返回的都是靜態的NodeList對象咩？怎么又變成動態的呢？原因在此：

規范中對 querySelectorAll 有明確要求，規定其必須返回一個靜態的 NodeList 對象。

在Chrome中情況如下：

document.querySelectorAll('a').toString(); // return "[object NodeList]"
document.getElementsByTagName('a').toString(); // return "[object HTMLCollection]"

不同點：

NodeList 對象會包含文檔中的所有節點，如 Element、Text 和 Comment 等；HTMLCollection 對象只會包含文檔中的 Element 節點。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

淺談JS獲取元素的N種方法及其動靜態討論

推薦度：

點擊下載本文 文檔為doc格式

標簽：種方法 js 種方式

熱門焦點

淺談JS獲取元素的N種方法及其動靜態討論

淺談JS獲取元素的N種方法及其動靜態討論

淺談JS獲取元素的N種方法及其動靜態討論

最新推薦

猜你喜歡

熱門推薦