三种方式查找HTML元素（JavaScript操作DOM）

通过id查找HTML元素

js直接提供了getElementById()这个方法来查找文档中的内容，括号内填写的类容就是id中的属性名称。
小案例：查找id="p3"的文档内容，写入至id="demo"的p标签中

<body>
    <p id="p1">hello,js1</p>
    <p id="p2">hello,js2</p>
    <p id="p3">hello,js3</p>
    <p id="demo"></p>
    <script>
    	//注意，这是对象，指的就是<p id="p3">hello,js3</p>而不是hello,js3
    	var p = document.getElementById("p3");
    	document.getElementById("demo").innerHTML = p.innerHTML;
    	//浏览器运行后，id=“demo”的文档内容会输出hello,js3
    </script>
</body>

通过标签名查找HTML元素

getElementsByTagName()方法是通过标签名进行查找HTML元素的，括号中只能填写标签名，就是p,div,h1,h2等等。
现在通过结合id查找和标签名查找元素进行一个小案例，看完之后就懂了，不懂来打我。
小案例：综合上面的案例，将p标签外包裹一层div，将3写入id="p4"中

<body>
    <div id="id_div"> 
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <p id="p4"></p>
    
    <script>
       //首先查出id="id_div"的div标签对象
        var id_div = document.getElementById("id_div");
        //再查出div中所有的p标签
        var p_div = id_div.getElementsByTagName("p");
        //多个p标签通过索引遍历，下标从0开始
        document.getElementById("p4").innerHTML = p_div[2].innerHTML;//3
    </script>
</body>

通过类名查找HTML元素

使用场景：如果需要找到拥有相同类名的所有 HTML 元素，建议使用 getElementsByClassName()
案例：相同的class，输出其中一个元素文本内容至p="demo"中

<body>
        <p class="p1">1</p>
        <p class="p1">2</p>
        <p class="p1">3</p>
        <p id="demo"></p>
    <script>
        //查出相同的p1
        var class_div = document.getElementsByClassName("p1");
        //写入到id=“demo”中
        document.getElementById("demo").innerHTML = class_div[0].innerHTML;//1
    </script>
</body>

三种方式查找HTML元素（JavaScript操作DOM）

通过id查找HTML元素

通过标签名查找HTML元素

通过类名查找HTML元素

猜你喜欢