DOM查询（一）

周白卿

已于 2022-07-16 09:44:49 修改

阅读量140

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端

于 2022-07-15 17:33:01 首次发布

本文链接：https://blog.csdn.net/qq_51088023/article/details/125807710

版权

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

获取元素节点

通过document对象调用

getElementById()：通过id属性获取一个元素节点对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var button01 = document.getElementById("btn");
            //获取id为btn的按钮
            alert(button01.innerHTML);
            //打印btn
            //innerHTML，通过这个属性可以获取到元素内部的HTML代码（字符）
        };
    </script>
</head>
<body>
    <button id="btn">点我一下</button>
</body>
</html>

getElementsByTagName()：通过标签名获取一组元素节点对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var lis = document.getElementsByTagName("li");
            //获取所有li节点
            //这个方法会返回一个类数组对象，所有查询到的元素都会封装到数组对象中
            //即使查询到的结果只有一个，也会封装到数组中返回
            alert(lis.length);       
            //打印lis的长度
            for(var i=0;i<lis.length;i++){
                alert(lis[i].innerHTML);
            }
            //遍历lis，获取li中的内容
        };
    </script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

getElementsByName()：通过name属性获取一组元素节点对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var inputs = document.getElementsByName("gender");
            //获取所有name为gender的节点
            alert(inputs.length);        
            //打印inputs长度
            for(var i=0;i<inputs.length;i++){
                //alert(inputs[i].innerHTML);
                //innerHTML用于获取元素内部的HTML代码（字符）
                //对于自结束标签，这个属性没有意义
                //如果需要读取元素节点的属性，直接使用  元素.属性名
                //例子：元素.id、元素.name、元素.value
                //注意：class属性不能采用这种方式
                //读取class属性需要使用  元素.className
                alert(inputs[i].value);
            }
            //遍历inputs，获取inputs中的所有value名称
        };
    </script>
</head>
<body>
    man
    <input type="radio" name="gender" value="man"/>
    woman
    <input type="radio" name="gender" value="woman"/>
</body>
</html>