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

谁借莪１个温暖的怀抱￠ 2023-02-13 14:40 34阅读 0赞

#### 通过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>