获取DOM元素

根据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")

了解即可