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]
vue 文件可用通过 ref 获取元素。
