JavaScript基础：通过id值、class值、tagName值、name属性获取相应的一个或多个元素节点_js找到页面中class为id的

作者：知新_RL | 2024-02-19 07:09:34
踩
js找到页面中class为id的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript基础：通过id值、class值、tagName值、name属性获取相应的一个或多个元素节点</title>
    <!--
        闭包：
            可简单理解为子方法可以使用父方法里的变量（不建议使用闭包，变量不易释放）
        DOM:
            1、DOM: 即 Document Object Model 。
            2、DOM用于操作html文档，准确地说是操作html标签里的内容。
            3、JavaScript中将每一个标签当作对象处理。
            4、在html中，每个标签都拥有自己的属性，如：style、id、class等，也拥有触发事件、方法。
                同样在JavaScript中，作为对象处理的标签也拥有属性、事件、方法等成员。
            5、操作DOM对象，一般使用document关键字调用。
        JavaScript获取元素的方法：
            根据id值获取一个元素节点：
            document.getElementById(id);
            根据class值获取一组元素节点：
            document.getElementsByClassName(className);
            根据name值获取一组元素节点：
            document.getElementsByName(name);
            根据tagName（标签名称）值获取一组元素节点：
            document.getElementsByTagName(tagName);
            根据id值、class值、tagName值获取一个元素节点，不能使用name属性获取：
            注意：如果获取了一组元素节点，默认只返回第一个元素节点
            document.querySelector(id | className | tagName);
            根据id值、class值、tagName值获取一组元素节点，不能使用name属性获取：
            注意：即使只获取了一个元素节点，也会返回NodeList数组
            document.querySelectorAll(id | className | tagName);
    -->
    <style>
        div{
            width: 160px;
            height: 160px;
            margin: 10px;
            display: inline-block;
        }
        input{
            width: 160px;
            height: 50px;
            margin-right: 20px;
        }
        .dodgerblue{
            border: 2px solid dodgerblue;
        }
        .orange{
            border: 2px solid orange;
        }
        .hotpink{
            background-color: hotpink;
        }
        .greenyellow{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="div1" class="hotpink">我是div标签1</div>
    <div id="div2" class="hotpink">我是div标签2</div>
    <div id="div3" class="greenyellow">我是div标签3</div>
    <div id="div4" class="hotpink">我是div标签4</div>
    <br>
    <input type="text" id="txt1" name="blueBorderText" class="dodgerblue" value="">
    <input type="text" id="txt2" name="orangeBorderText" class="orange" value="">
    <input type="text" id="txt3" name="blueBorderText" class="dodgerblue" value="">
</body>
<script>
        console.log("通过id选择器查找，调用document.getElementById方法，得到的元素节点是："); 
        console.log(document.getElementById("div3"));
 
        console.log("通过class选择器查找，调用document.getElementsByClassName方法，得到的一组元素节点是："); 
        console.log(document.getElementsByClassName("hotpink"));
 
        console.log("通过tagName值（div）查找，调用document.getElementsByTagName方法，得到的一组元素节点是："); 
        console.log(document.getElementsByTagName("div"));
 
        console.log("通过tagName值（input）查找，调用document.getElementsByTagName方法，得到的一组元素节点是："); 
        console.log(document.getElementsByTagName("input"));
 
        console.log("通过name属性查找，调用document.getElementsByName方法，得到的一组元素节点是："); 
        console.log(document.getElementsByName("blueBorderText"));
 
 
 
        // 调用document.querySelector方法，
        // 通过id选择器、class选择器、tagName值查找符合条件的元素节点，不能使用name属性查找
        // 如果得到一组元素节点，只返回第一个元素节点
        
        console.log("通过id选择器查找，调用document.querySelector方法，得到的元素节点是："); 
        console.log(document.querySelector("#div3"));
       
        console.log("通过class选择器查找，调用document.querySelector方法，得到的元素节点是："); 
        console.log(document.querySelector(".hotpink"));
 
        console.log("通过tagName值（div）查找，调用document.querySelector方法，得到的元素节点是："); 
        console.log(document.querySelector("div"));
 
        console.log("通过tagName值（input）查找，调用document.querySelector方法，得到的元素节点是："); 
        console.log(document.querySelector("input"));
 
        // 不能通过name属性查找，返回值为null
        console.log("通过name属性查找，调用document.querySelector方法，得到的元素节点是："); 
        console.log(document.querySelector("blueBorderText"));
 
 
 
        // 调用document.querySelectorAll方法
        // 通过id选择器、class选择器、tagName值查找符合条件的元素节点，不能使用name属性查找
        // 返回一组元素节点，即使只有一个元素节点，也返回NodeList数组
        
        console.log("通过id选择器查找，调用document.querySelectorAll方法，得到的一组元素节点是："); 
        console.log(document.querySelectorAll("#div3"));
 
        console.log("通过class选择器查找，调用document.querySelectorAll方法，得到的一组元素节点是："); 
        console.log(document.querySelectorAll(".hotpink"));
 
        console.log("通过tagName值（div）查找，调用document.querySelectorAll方法，得到的一组元素节点是："); 
        console.log(document.querySelectorAll("div"));
 
        console.log("通过tagName值（input）查找，调用document.querySelectorAll方法，得到的一组元素节点是："); 
        console.log(document.querySelectorAll("input"));
 
        // 不能通过name属性查找，返回值为NodeList[]
        console.log("通过name属性查找，调用document.querySelectorAll方法，得到的一组元素节点是："); 
        console.log(document.querySelectorAll("blueBorderText"));
 
</script>
</html>
控制台显示以下信息：
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/113286