cari

Rumah  >  Artikel  >  hujung hadapan web  >  JS获取元素的N种方法及其动静态讨论

JS获取元素的N种方法及其动静态讨论

jacklove
jackloveasal
2018-05-21 14:09:271482semak imbas

在学习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为37e013417dc94116a55d3fccec6f9247hello dolby94b3e26ee717c64999d7867364b1b4a3，37e013417dc94116a55d3fccec6f9247hello bean94b3e26ee717c64999d7867364b1b4a3，为什么没有其他两个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时已不满足i8258e7473978c9925e9656cb13114d3f36cc49f0c466276486e50c850b7e4956

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

//(7)处打印值0bd60c3c81ecadce59a7dc90d0ee7fb616b28748ea4df4d9c2150843fecfba68//(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)处打印值0bd60c3c81ecadce59a7dc90d0ee7fb6"red""green""blue"16b28748ea4df4d9c2150843fecfba68//(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)处打印值
   0bd60c3c81ecadce59a7dc90d0ee7fb616b28748ea4df4d9c2150843fecfba68//(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的相关问题

Atas ialah kandungan terperinci JS获取元素的N种方法及其动静态讨论. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：设计模式中的组合模式在JavaScript程序构建中的使用（高级篇）Artikel seterusnya：详细解读JavaScript设计模式开发中的桥接模式（高级篇）

Artikel berkaitan

Lihat lagi