JS获取元素的N种方法及其动静态讨论-js教程-PHP中文网

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

jacklove

发布： 2018-05-21 14:09:27

原创

1587人浏览过

在学习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('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');

Uni-CourseHelper

私人AI助教，高效学习工具

查看详情

在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)

以上就是JS获取元素的N种方法及其动静态讨论的详细内容，更多请关注php中文网其它相关文章！