获取 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

许可证：署名 4.0 国际 (CC-BY-4.0)