欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談JS獲取元素的N種方法及其動(dòng)靜態(tài)討論

 更新時(shí)間:2017年08月25日 16:51:30   作者:_Dot大師兄  
這篇文章主要介紹了淺談JS獲取元素的N種方法及其動(dòng)靜態(tài)討論,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

實(shí)際前端開(kāi)發(fā)工作中,我們經(jīng)常會(huì)遇到要獲取某些元素,以達(dá)到更新該元素的樣式、內(nèi)容等目的。而文檔對(duì)象模型 (DOM) 是HTML和XML文檔的編程接口,它提供了對(duì)文檔的結(jié)構(gòu)化的表述,并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問(wèn),從而改變文檔的結(jié)構(gòu),樣式和內(nèi)容。DOM 將文檔解析為一個(gè)由節(jié)點(diǎn)和對(duì)象(包含屬性和方法的對(duì)象)組成的結(jié)構(gòu)集合,它會(huì)將web頁(yè)面和腳本或程序語(yǔ)言連接起來(lái)。也因此,JavaScript可以通過(guò)DOM API獲取元素節(jié)點(diǎn),方法有如下幾種:其中querySelector()和querySelectorAll()為ES5的元素選擇方法

1、getElementById():

接收一個(gè)參數(shù):要取得的元素的ID(區(qū)分大小寫,必須嚴(yán)格匹配),返回一個(gè)Element對(duì)象(也可看作是動(dòng)態(tài)NodeList集合,只是集合中只包含一個(gè)匹配的元素,但也會(huì)實(shí)時(shí)反映DOM節(jié)點(diǎn)的變化),若當(dāng)前文檔中擁有特定ID的元素不存在則返回nul。
語(yǔ)法:

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()方法不會(huì)搜索不在文檔中的元素。當(dāng)創(chuàng)建一個(gè)元素且分配ID后,必須要使用insertBefore()或其他類似的方法把元素插入到文檔中之后才能使用 getElementById() 獲取到:

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

2、getElementsByClassName():

接收一個(gè)參數(shù),即包含一個(gè)或多個(gè)類名的字符串(類名通過(guò)空格分隔),返回一個(gè)HTMLCollection動(dòng)態(tài)集合(也可以說(shuō)返回一個(gè)NodeList類數(shù)組對(duì)象),集合中包含以當(dāng)前元素為根節(jié)點(diǎn),所有指定 class 名的子元素。
語(yǔ)法:

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

getElementsByClassName 可以在任意的元素上調(diào)用,不僅僅是document。 調(diào)用這個(gè)方法的元素將作為本次查找的根元素。

示例:

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

document.getElementsByClassName('test');

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

document.getElementsByClassName('red test');

在id 為'main'的元素的子節(jié)點(diǎn)中,獲取所有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] //一個(gè)動(dòng)態(tài)的HTMLCollection集合,長(zhǎng)度為1,innerHTML為<p class="myP">hello dolby</p>,<p class="myP">hello bean</p>,為什么沒(méi)有其他兩個(gè)p元素一會(huì)兒解釋。

//(4)處打印值
[p.myP,p.myP] //一個(gè)動(dòng)態(tài)的HTMLCollection集合,長(zhǎng)度為2,innerHTML分別為"hello dolby","hello bean"。

以上用刪除節(jié)點(diǎn)的方法驗(yàn)證了getElementsByClassName方法返回的是一個(gè)HTMLCollection動(dòng)態(tài)集合。

⬆️以上代碼中,首先div取得了頁(yè)面中類名為"myDiv"的元素組成的動(dòng)態(tài)集合,p取得了頁(yè)面中類名為"myP"的元素組成的動(dòng)態(tài)集合,接著用一個(gè)for循環(huán)來(lái)刪除"myDiv"集合中第一項(xiàng)(即上例中唯一的div元素)中的"myP"集合中的每一項(xiàng),結(jié)果只有第一項(xiàng)和第三項(xiàng)被刪除了,這是為什么呢?

原因是動(dòng)態(tài)集合中DOM結(jié)構(gòu)的變化能夠自動(dòng)反映到所保存的對(duì)象中,最開(kāi)始p.legth=4,當(dāng)i=0時(shí)刪除了頁(yè)面中第一個(gè)p元素,此后p.length=3;i=1時(shí)刪除了剩余的三個(gè)p中的項(xiàng)目索引為1的項(xiàng),此后p.length=2;i=2時(shí)已不滿足i<p.length這一條件,所以不會(huì)繼續(xù)執(zhí)行循環(huán)。至此只刪除了頁(yè)面上的第一和第三個(gè)p元素,所以打印p得到了一個(gè)長(zhǎng)度為2的HTMLCollection動(dòng)態(tài)集合,其中包含"hello dolby"和"hello bean",p的變化也實(shí)時(shí)反映到了動(dòng)態(tài)集合div中,所以才有(1)處的打印結(jié)果。

那么怎樣才能遍歷類數(shù)組對(duì)象HTMLCollection集合中的每一項(xiàng)并且刪除所有項(xiàng)呢?

還是一個(gè)for循環(huán)搞定⬇️,每次刪除對(duì)象集合中的最后一項(xiàng)就可以啦~

//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集合,長(zhǎng)度為0

3、getElementsByTagName():

接收一個(gè)參數(shù):要取得的元素的標(biāo)簽名(不區(qū)分大小寫),返回一個(gè)HTMLCollection動(dòng)態(tài)集合(也可以說(shuō)返回一個(gè)NodeList類數(shù)組對(duì)象),集合中包含以當(dāng)前元素為根節(jié)點(diǎn)(不包括當(dāng)前元素自身),所有指定標(biāo)簽名的子元素,子元素的順序是在當(dāng)前元素的子樹(shù)中出現(xiàn)的順序,如果沒(méi)有搜索到元素則集合為空。
語(yǔ)法:

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循環(huán)改為for (var i=0,len=p.length;i<len;i++) {div.removeChild(p[0]);}也可;將集合p的長(zhǎng)度賦值給變量len,這樣len就是一個(gè)固定值,每次都刪除當(dāng)前集合項(xiàng)目索引為0的項(xiàng),就可以循環(huán)遍歷刪除掉集合里的所有項(xiàng)。
    for (var i=p.length;i--;){
      div.removeChild(p[i]);
    }
    console.log(p); //(8)
  </script>
</body>

與getElementByClassName相同,返回動(dòng)態(tài)集合,所以循環(huán)刪除結(jié)果也相同

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

//(8)處打印值
[] //空的HTMLCollection集合,長(zhǎng)度為0

4、getElementsByName():

接收一個(gè)參數(shù):帶有給定name屬性值的元素,返回一個(gè)動(dòng)態(tài)NodeList類數(shù)組對(duì)象,對(duì)象中包含以當(dāng)前元素為根節(jié)點(diǎn),所有指定name屬性值的子元素。最常用的場(chǎng)景是取得單選按鈕。

示例:

<!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返回的是一個(gè)NodeList動(dòng)態(tài)集合

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

//(10)處打印值
[] //空的NodeList集合,長(zhǎng)度為0

5、querySelector():

接收一個(gè)參數(shù):一個(gè)包含一個(gè)或多個(gè)CSS 選擇器的字符串(多個(gè)選擇器以逗號(hào)分隔),返回匹配指定CSS選擇器的第一個(gè)元素節(jié)點(diǎn)(無(wú)法選中CSS偽元素),沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)則返回null。

語(yǔ)法:

element = document.querySelector(selectors);

示例:一個(gè)強(qiáng)大的選擇方式

<div class="user-panel main">
  <input name="login"/> //這個(gè)標(biāo)簽將被返回
</div>

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

示例:如果要匹配的ID或選擇器不符合 CSS 語(yǔ)法(比如不恰當(dāng)?shù)厥褂昧嗣疤?hào)或者空格),你必須用反斜杠將這些字符轉(zhuǎn)義。由于 JavaScript 中,反斜杠是轉(zhuǎn)義字符,所以當(dāng)你輸入一個(gè)文本串時(shí),你必須將它轉(zhuǎn)義兩次(一次是為 JavaScript 字符串轉(zhuǎn)義,另一次是為 querySelector 轉(zhuǎn)義):

<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') // 匹配第一個(gè)div

 document.querySelector('#foo:bar')  // 不匹配任何元素
 document.querySelector('#foo\\:bar') // 匹配第二個(gè)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> //如你所見(jiàn),querySelector也是靜態(tài)的快照

6、querySelectorAll():

接收一個(gè)參數(shù):一個(gè)包含一個(gè)或多個(gè)CSS 選擇器的字符串(多個(gè)選擇器以逗號(hào)分隔),返回靜態(tài)NodeList對(duì)象集合,該集合中包含匹配指定CSS選擇器的所有節(jié)點(diǎn),元素節(jié)點(diǎn)的變化無(wú)法實(shí)時(shí)反映在結(jié)果中;如果參數(shù)中包含CSS偽元素則返回一個(gè)空的對(duì)象集合。

語(yǔ)法:

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] //返回的是靜態(tài)NodeList集合,元素節(jié)點(diǎn)的變化無(wú)法實(shí)時(shí)反映在結(jié)果中

7、elementFromPoint():

接收兩個(gè)參數(shù):分別是相對(duì)于當(dāng)前窗口左上角的橫縱坐標(biāo),單位為CSS像素,不需要加單位;返回位于頁(yè)面指定位置的元素,如果該元素不可返回(如滾動(dòng)條)則返回它的父元素,如果坐標(biāo)值無(wú)意義(如負(fù)值)則返回null。

語(yǔ)法

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>

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

是不是覺(jué)得看了上面這些頭好大啊,什么是動(dòng)態(tài)什么是靜態(tài),有沒(méi)有好記一點(diǎn)的方法呢?
有噠!

你可以簡(jiǎn)單地理解為,getElementBy系列返回的都是動(dòng)態(tài)的HTMLCollection集合,動(dòng)態(tài)集合中的DOM結(jié)構(gòu)變化能實(shí)時(shí)地反映到所保存的對(duì)象中,而querySelector系列返回的都是靜態(tài)的NodeList對(duì)象,是一個(gè)快照,對(duì)DOM的任何操作都不會(huì)對(duì)其產(chǎn)生影響。

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

相同點(diǎn):

  • 二者都是類數(shù)組對(duì)象
  • 二者都具有l(wèi)ength屬性
  • 二者都具有item()方法
  • 二者都是動(dòng)態(tài)的元素集合,每次訪問(wèn)都需要重新對(duì)文檔進(jìn)行查詢。

你一定會(huì)好奇,誒?前面不是說(shuō)querySelector系列返回的都是靜態(tài)的NodeList對(duì)象咩?怎么又變成動(dòng)態(tài)的呢?原因在此:

規(guī)范中對(duì) querySelectorAll 有明確要求,規(guī)定其必須返回一個(gè)靜態(tài)的 NodeList 對(duì)象。

在Chrome中情況如下:

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

不同點(diǎn):

NodeList 對(duì)象會(huì)包含文檔中的所有節(jié)點(diǎn),如 Element、Text 和 Comment 等;HTMLCollection 對(duì)象只會(huì)包含文檔中的 Element 節(jié)點(diǎn)。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • el-popover嵌套select彈窗點(diǎn)擊實(shí)現(xiàn)自定義關(guān)閉功能

    el-popover嵌套select彈窗點(diǎn)擊實(shí)現(xiàn)自定義關(guān)閉功能

    el-popover彈窗內(nèi)嵌套下拉選擇框,點(diǎn)擊el-popover彈出外部區(qū)域需關(guān)閉彈窗,點(diǎn)擊查詢、重置需關(guān)閉彈窗,遇到這樣的需求怎么解決呢,下面小編給大家介紹el-popover嵌套select彈窗點(diǎn)擊實(shí)現(xiàn)自定義關(guān)閉功能,感興趣的朋友一起看看吧
    2024-07-07
  • JS實(shí)現(xiàn)橫向輪播圖(中級(jí)版)

    JS實(shí)現(xiàn)橫向輪播圖(中級(jí)版)

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)橫向輪播圖的中級(jí)版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • JS計(jì)算斐波拉切代碼實(shí)例

    JS計(jì)算斐波拉切代碼實(shí)例

    這篇文章主要介紹了js計(jì)算斐波拉切,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-09-09
  • Bootstrap 填充Json數(shù)據(jù)的實(shí)例代碼

    Bootstrap 填充Json數(shù)據(jù)的實(shí)例代碼

    本篇文章主要介紹了Bootstrap 填充Json數(shù)據(jù)的實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-01-01
  • javascript 多種搜索引擎集成的頁(yè)面實(shí)現(xiàn)代碼

    javascript 多種搜索引擎集成的頁(yè)面實(shí)現(xiàn)代碼

    這個(gè)頁(yè)面是為了方便自己同時(shí)使用多種搜索引擎(呵呵我用其作默認(rèn)主頁(yè)),在IE5/IE6/FireFox下均運(yùn)行正常,效果如下圖
    2010-01-01
  • JavaScript資源預(yù)加載組件和滑屏組件的使用推薦

    JavaScript資源預(yù)加載組件和滑屏組件的使用推薦

    這篇文章主要介紹了JavaScript資源預(yù)加載組件和滑屏組件的使用推薦,分別為preload和slide的用法講解,使用起來(lái)非常簡(jiǎn)單,需要的朋友可以參考下
    2016-03-03
  • javascript模擬C#格式化字符串

    javascript模擬C#格式化字符串

    學(xué)習(xí)C#的朋友都知道format()這個(gè)方法,本文給大家介紹在javascript中如何實(shí)現(xiàn)此操作,js模擬C#字符串格式化操作,需要的盆友一起學(xué)習(xí)吧
    2015-08-08
  • 完美兼容IE,chrome,ff的設(shè)為首頁(yè)、加入收藏及保存到桌面js代碼

    完美兼容IE,chrome,ff的設(shè)為首頁(yè)、加入收藏及保存到桌面js代碼

    這篇文章主要給大家分享了完美兼容IE,chrome,ff的設(shè)為首頁(yè)、收藏本站及保存到桌面js代碼,有需要的小伙伴參考下。
    2014-12-12
  • 詳解js訪問(wèn)對(duì)象的屬性和方法

    詳解js訪問(wèn)對(duì)象的屬性和方法

    在本篇文章里我們給大家分享了關(guān)于js訪問(wèn)對(duì)象的屬性和方法的相關(guān)知識(shí)點(diǎn),有需要的朋友們可以學(xué)習(xí)下。
    2018-10-10
  • 淺談js中的閉包

    淺談js中的閉包

    閉包是一個(gè)比較抽象的概念,尤其是對(duì)js新手來(lái)說(shuō).書上的解釋實(shí)在是比較晦澀,對(duì)我來(lái)說(shuō)也是一樣.閉包是很多語(yǔ)言都具備的特性,在js中,閉包主要涉及到j(luò)s的幾個(gè)其他的特性:作用域鏈,垃圾(內(nèi)存)回收機(jī)制,函數(shù)嵌套,等等.
    2015-03-03

最新評(píng)論