javascript核心技术（二十二）DOM--查找节点(五) H5方法获取页面元素

人亦已歌 · 发表于 2023-1-24 14:18:47

HTML5即H5提供了一系列通过CSS选择器语法获取元素的方法，使用起来更为方便。
通过H5方法获取页面元素时，同样返回一个NodeList节点列表，是一个类数组的特殊对象。可以直接当作数组使用。NodeList节点列表里面的每一个元素，是具体的一个标签。
首先简单说一下CSS选择器语法，在后面的课程中我们会专门讲CSS的：

id='username' 表示为#username
class='div100' 表示为.div100
<div></div> 表示为div
input标签的name='username' 表示为input[name=username]
同时选择p标签和a标签表示为p,a

复制代码

请看以下代码：

<!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>H5方法获取页面元素</title>
</head>
<body>
    <div id="div1" class="div100 div300">div1</div>
    <div id="div1" class="div11 div33">div111</div>
    <div id="div2" class="div100">div2</div>
    <div id="div3" class="div200">div3</div>
    <div id="div4" class="div200">div4</div>

    <input type="button" name="" value="按钮" id="btn">
    姓名：<input type="text" name="username" value="" id="username">
    密码：<input type="password" name="password" value="" id="password">
    性别：<input type="radio" name="sex" value="" id="nan">男
    <input type="radio" name="sex" value="" id="nv">女
</body>
<script>
        var divs = document.querySelectorAll('div');//查找所有div标签
        console.log(divs);
        console.log(divs[0]);//取出第一个div标签
        // querySelector 返回具体的一个标签 ；如果满足选择器的有多个，则返回第一个
        var div = document.querySelector('div');//查找第一个div标签
        console.log(div);

        var div = document.querySelector('#div1');//查找id为div1的标签
        console.log(div);

        var divs = document.querySelectorAll('.div100');//查找class为div100的标签
        console.log(divs);
</script>
</html>