JS 获取元素
2022/7/28 23:30:27
本文主要是介绍JS 获取元素,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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 获取元素。
-
参考文章传送门:点我
-
参考文章传送门:菜鸟
这篇关于JS 获取元素的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set