JS 获取 DOM 元素

1、根据id获取元素

1、根据id获取元素，document.getElementById("id属性的值")，返回值是一个元素对象。

<div class="box" id="oneBox" >
    <span>测试</span>
    <span>测试</span>
    <span>测试</span>
</div>

document.getElementById("oneBox"); // div dom元素

2、根据标签名字获取元素

2、根据标签名字获取元素，document.getElementsByTagName("标签的名字")，返回值是一个伪数组。

<div class="box" id="oneBox" >
    <span>测试</span>
    <span>测试</span>
    <span>测试</span>
</div>

document.getElementsByTagName("span"); // 数组，HTMLCollection(3) [span, span, span]

3、根据类名（class）获取元素

3、根据类名（class）获取元素，document.getElementsByClassName("类的名字")，返回值是一个伪数组。

<div class="box" id="oneBox" >
    <span>测试</span>
    <span>测试</span>
    <span>测试</span>
</div>

document.getElementsByClassName("box");// 数组，HTMLCollection [div#oneBox.box, oneBox: div#oneBox.box]

4、根据name属性的值获取元素

4、根据name属性的值获取元素，document.getElementsByName("name属性的值")，返回值是一个伪数组。

<div class="box" id="oneBox" name="oneBox">
    <span name="oneBox">测试</span>
    <span>测试</span>
    <span>测试</span>
</div>

document.getElementsByName("oneBox"); // NodeList(2) [div#oneBox.box, span]

5、document.querySelector

5、根据选择器获取元素，document.querySelector("选择器")，返回值是一个元素对象。如果有相同的元素，返回找到的第一个元素。

<div class="box" id="oneBox" name="oneBox">
    <span name="oneBox">测试</span>
    <span>测试</span>
    <span>测试</span>
</div>

document.querySelector("span"); // <span name="oneBox">测试</span>
document.querySelector("#oneBox"); // <div class="box" id="oneBox" name="oneBox">...</div>
document.querySelector(".box"); // <div class="box" id="oneBox" name="oneBox">...</div>

获取多个p 中 class="example" 的第一个元素:

<p class="example">段落</p> 
<p>1</p>
<p>2</p>
<p>3</p>

document.querySelector("p.example") // <p class="example">段落</p>

6、document.querySelectorAll

6、根据选择器获取元素，document.querySelectorAll("选择器")，返回值是一个伪数组。

<div class="box" id="oneBox" name="oneBox">
    <span id="oneBox">测试</span>
    <span>测试</span>
    <span>测试</span>
</div>

document.querySelectorAll("span"); // NodeList(3) [span#oneBox, span, span]
document.querySelectorAll(" #oneBox"); // NodeList(2) [div#oneBox.box, span#oneBox]