JavaScript中获取元素的方法

pre>
    div id="test">
    这是一个div元素/div>
    var testElement = document.getElementById("test");
    console.log(testElement.innerHTML)

可以看到，使用getElementById获取元素非常简单，并且可以方便地操作元素对象的内容和属性。但需要注意的是，该方法只能获取到id属性值唯一的元素。

pre>
    ul>
    li>
    这是列表1/li>
    li>
    这是列表2/li>
    li>
    这是列表3/li>
    /ul>
    var liElements = document.getElementsByTagName("li");
    console.log(liElements.length);
    

使用getElementsByTagName可以获取到多个元素对象，返回的是一个HTMLCollection对象，可以通过遍历这个对象来操作每一个元素对象。

pre>
    ul>
    li class="active">
    这是列表1/li>
    li class="active">
    这是列表2/li>
    li>
    这是列表3/li>
    /ul>
    var activeElements = document.getElementsByClassName("active");
    console.log(activeElements.length);
    

getElementsByClassName也是返回一个HTMLCollection对象，可以通过遍历 HTMLCollection 来 操作每一个元素对象。

pre>
    p class="content">
    这是一个段落元素/p>
    var pElement = document.querySelector(".content");
    console.log(pElement.innerHTML);
    

在querySelector中可以使用多种选择器表达式，例如标签选择器、类选择器、ID选择器等，具体使用可以参考CSS选择器相关文档。需要注意的是，querySelector只返回匹配表达式的第一个元素对象。

pre>
    ul>
    li class="active">
    这是列表1/li>
    li class="active">
    这是列表2/li>
    li class="content">
    这是列表3/li>
    /ul>
    var activeElements = document.querySelectorAll(".active");
    console.log(activeElements.length);
    

与querySelector类似，querySelectorAll也可以使用多种选择器表达式，返回的是一个NodeList对象，可以通过遍历NodeList对象来操作每一个元素对象。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！