js中DOM查询元素方法总结

js中DOM查询元素方法主要包含getElementById、getElementsBy系列及querySelector系列，下面依次介绍下

DOM规范类

一、getElementById

getElementById

getElementById返回的值类型为[object HTMLDivElement]
上图中测试的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

</head>

<body>
    <div id="parent">
        <div class="child"><a href="http://www.baidu.com">百度链接</a></div>
    </div>
    <script>
        console.log(document.getElementById("parent"));
        console.log(document.getElementById("parent").toString());
    </script>


</body>
</html>

二、 getElementsByClassName

getElementsByClassName

getElementsByClassName返回的值的类型为[object HTMLCollection]，在其后面添加数组编号[0]时，返回的值的类型就变为[object HTMLDivElement]

getElementsByClassName

三、getElementsByTagName

getElementsByTagName

上述图中的代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

</head>

<body>
    <div class="parent">
        <div class="child"><a href="http://www.baidu.com">百度链接</a></div>
    </div>
    <script>
        console.log(document.getElementsByTagName("a"));
        console.log(document.getElementsByTagName("a").toString());
    </script>


</body>
</html>

getElementsByTagName的返回值类型为[object HTMLCollection]，加上数组编号[0]后会变成如下图所示的结果

getElementsByTagName

四、getElementsByName

getElementsByName

getElementsByName疑问！！！！

getElementsByName返回的值类型是[object NodeList]类型而不是[object HTMLCollection] ！！！但是其返回的确实是元素的集合（HTMLCollection）而非节点的集合（NodeList）《javascript高级程序设计》第三版第258页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
    <fieldset>
        <legend>which color do you prefer</legend>
        <ul>
            <li><input type="radio" value="red" id="colorRed" name="color" >
                <label for="colorRed">Red</label> </li>
            <li><input type="radio" value="green" id="colorGreen" name="color" >
                <label for="colorGreen">Green</label> </li>
        </ul>
    </fieldset>
    <script>
        console.log(document.getElementsByName("color")) ;
        console.log(document.getElementsByName("color")[1]);
        console.log(document.getElementsByName("color").toString()) ;
        console.log(document.getElementsByName("color")[1].toString()) ;
    </script>
</body>
</html>

selectors API规范类

一、 querySelector()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

</head>

<body>
<div id="parent">
    <div class="child">
        <a href="http://www.baidu.com">百度链接</a>
    </div>
</div>
<script>
    console.log(document.querySelector("#parent"));
    console.log(document.querySelector("#parent").toString());
</script>


</body>
</html>

querySelector

querySelector 此时返回值类型为[object HTMLDivElement]，将上述代码改成如下形式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

</head>

<body>
<div id="parent">
    <ul class="child">
        <li>我是child选择器ul里的li1</li>
        <li>我是child选择器ul里的li2</li>
    </ul>
    <div class="child">我是child选择器的div </div>
</div>
<script>
    console.log(document.querySelector(".child "));
    console.log(document.querySelector(".child").toString());
</script>


</body>
</html>

querySelector 改后

二、querySelectorAll（）

将上述代码改成如下形式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

</head>

<body>
<div id="parent">
    <ul class="child">
        <li>我是child选择器ul里的li1</li>
        <li>我是child选择器ul里的li2</li>
    </ul>
    <div class="child">我是child选择器的div </div>
</div>
<script>
    console.log(document.querySelectorAll(".child "));
    console.log(document.querySelectorAll(".child").toString());
    console.log(document.querySelectorAll(".child ")[0]);
    console.log(document.querySelectorAll(".child")[0].toString());
</script>


</body>
</html>

querySelectorAll

需要说明的是querySelectorAll返回的是静态（static）的NodeList！！！【一般NodeList及HTMLCollection均为实时的（live）】

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *