外观
获取 DOM 元素
约 280 字小于 1 分钟
2024-10-02
根据 CSS 选择器获取
document.querySelector("css选择器")如果页面有多个相同的元素, 只会选择第一个.
返回的是一个HTMLElement对象, 如果没有匹配到, 返回null.
<div>abc</div>
<div class="Test">123</div>
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
<script>
const Div1 = document.querySelector("div")
console.log(Div1)
console.log(Div1.innerHTML)
// abc
const Div2 = document.querySelector(".Test")
console.log(Div2)
console.log(Div2.innerHTML)
// 123
const Li = document.querySelector("ul li:first-child")
console.log(Li)
console.log(Li.innerHTML)
// Test1
</script>和CSS一模一样, 不会CSS的回去重修Html5CSS3
匹配多个元素
document.querySelectorAll("css选择器")<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
<script>
const Li = document.querySelectorAll("ul li")
console.log(Li)
console.log(Li[0].innerHTML)
// Test1
</script>返回的是一个NodeList对象集合, 如果没有匹配到, 返回空集合.
其他获取方法
// 根据id获取第一个元素
document.getElementById("id")
// 根据标签获取一类元素, 例如获取页面所有div
document.getElementsByTagName("div")
// 根据类名获取元素, 例如获取所有类名为 w 的
document.getElementsByClassName("w")了解即可.
版权所有
版权归属:Erhai_lake