首頁 > web前端 > js教程 > 主體

JS取得元素的N種方法及其動態討論

jacklove
發布: 2018-05-21 14:09:27
原創
1458 人瀏覽過

在學習JavaScript過程中會遇到js取得元素的問題,本篇將會對其取得元素的方法進行解說。

在實際前端開發工作中,我們經常會遇到要取得某些元素,以達到更新該元素的樣式、內容等目的。而文檔物件模型(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(&#39;body&#39;);
        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(&#39;body&#39;);
        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(&#39;blue&#39;);">blue</button>
  <button onclick="changeColor(&#39;red&#39;);">red</button></body></html>
登入後複製

getElementById( )方法不會搜尋不在文件中的元素。當建立一個元素且指派ID後,必須要使用insertBefore()或其他類似的方法把元素插入到文件中之後才能使用getElementById() 取得到:

var element = document.createElement("div");
element.id = &#39;testqq&#39;;var el = document.getElementById(&#39;testqq&#39;); // 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為

hello dolby

hello bean

,為什麼沒有其他兩個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

那麼怎樣才能遍歷類別數組物件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 for (var i=p.length;i--;){
div.removeChild(p[i]);
} console.log(p); //(8)

与getElementByClassName相同,返回动态集合,所以循环删除结果也相同

//(7)处打印值

//(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)处打印值

"red""green""blue"
//(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(&#39;#foo\bar&#39;)               // "#fooar"
  document.querySelector(&#39;#foo\bar&#39;)    // 不匹配任何元素
  console.log(&#39;#foo\\bar&#39;)              // "#foo\bar"
  console.log(&#39;#foo\\\\bar&#39;)            // "#foo\\bar"
  document.querySelector(&#39;#foo\\\\bar&#39;) // 匹配第一个div
  document.querySelector(&#39;#foo:bar&#39;)    // 不匹配任何元素
  document.querySelector(&#39;#foo\\:bar&#39;)  // 匹配第二个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)处打印值

//(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(&#39;blue&#39;);">blue</button>
<button onclick="changeColor(&#39;red&#39;);">red</button></body></html>
登入後複製

这一个获取元素的方法用得不多所以不多做介绍。

是不是觉得看了上面这些头好大啊,什么是动态什么是静态,有没有好记一点的方法呢?
有哒!

你可以简单地理解为,getElementBy系列返回的都是动态的HTMLCollection集合,动态集合中的DOM结构变化能实时地反映到所保存的对象中,而querySelector系列返回的都是静态的NodeList对象,是一个快照,对DOM的任何操作都不会对其产生影响。

那么Nodelist和HTMLCollection有什么异同呢?

相同点:

二者都是类数组对象

二者都具有length属性

二者都具有item()方法

二者都是动态的元素集合,每次访问都需要重新对文档进行查询。

你一定会好奇,诶?前面不是说querySelector系列返回的都是静态的NodeList对象咩?怎么又变成动态的呢?原因在此:
规范中对 querySelectorAll 有明确要求,规定其必须返回一个静态的 NodeList 对象。
在Chrome中情况如下:

document.querySelectorAll(&#39;a&#39;).toString();    // return "[object NodeList]"document.getElementsByTagName(&#39;a&#39;).toString();    // return "[object HTMLCollection]"
登入後複製

不同点:

NodeList 对象会包含文档中的所有节点,如 Element、Text 和 Comment 等;HTMLCollection  对象只会包含文档中的 Element 节点

本篇对hs获取元素进行了详细的讲解,更多相关内容请关注php中文网。

相关推荐:

JavaScript全总结之DOM的Element

实现jquery懒加载、回到顶部

关于this的相关问题

以上是JS取得元素的N種方法及其動態討論的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!