JavaScript获取元素的常用方式

时间：2021-05-12 20:18:45 阅读：8 评论：0 收藏：0 [点我收藏+]

注：（代码非本人所写，只用于学习参考）

1.使用id获取元素

document.getElementById("id属性的值");

2.使用name属性的值获取元素

document.getElementsByName("name属性的值");

3.使用类样式的名字获取元素

document.getElementsByClassName("类样式的名字");

4.使用标签名字获取元素

document.getElementsByTagName("标签的名字");

5.使用选择器获取元素

document.querySelector("选择器");

document.querySelectorAll("选择器");

1.使用id获取元素

document.getElementById("id属性的值");

document.getElementById(‘id‘)方法，是由document对象提供的用于查找元素的方法，该方法

返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素

则返回undefined。

<body>
        <div id="box">你好</div>
        <script>
            var Obox = document.getElementById(‘box‘);
            console.log(Obox);
        </script>
</body>

效果图

技术分享图片

2.使用name属性的值获取元素

document.getElementsByName("name属性的值");

document.getElementsByName()方法，是通过name属性来获取元素，一般用于获取表单元

素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和

复选框。

<body>
        <p>请选择你最喜欢的水果（多选）</p> <label><input type="checkbox" name="fruit" value="苹果">苹果</label> <label><input
                type="checkbox" name="fruit" value="香蕉">香蕉</label> <label><input type="checkbox" name="fruit"
                value="西瓜">西瓜</label>
        <script>
            var fruits = document.getElementsByName(
            ‘fruit‘); 
        </script>
    </body>

效果图

技术分享图片

3.使用类样式的名字获取元素

document.getElementsByClassName("类样式的名字");

document.getElementsByClassName()方法，用于通过类名来获得某些元素集合。

<body> <span class="one">英语</span> <span class="two">数学</span> <span class="one">语文</span> <span
            class="two">物理</span>
        <script>
            var Ospan1 = document.getElementsByClassName(‘one‘);
            var Ospan2 = document.getElementsByClassName(‘two‘);
            Ospan1[0].style.fontWeight = ‘bold‘;
            Ospan2[1].style.background = ‘red‘;
        </script>
    </body>

效果图

技术分享图片

4.使用标签名字获取元素

document.getElementsByTagName("标签的名字");

getElementsByTagName()方法获取到的集合是动态集合，也就

是说，当页面增加了标签，这个集合中也会自动增加元素。

    <body>
    <input type="button" value="改变" id="btn">
    <div>
       <p>123</p>
       <p>123</p>
       <p>123</p>
    </div>
    <script>
        document.getElementById("btn").onclick = function () {
            var pObjs = document.getElementsByTagName("p");
            for (var i = 0; i < pObjs.length; i++) {
                pObjs[i].innerText = "p标签";
            }
        };
    </script>
    </body>

技术分享图片

5.使用选择器获取元素

document.querySelector("选择器");

document.querySelectorAll("选择器");

querySelector()和querySelectorAll()

querySelector()方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法返回指定

选择器的所有元素对象集合。

<body>
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div id="nav">
            <ul>
                <li>首页</li>
                <li>产品</li>
            </ul>
        </div>
        <script>
            var firstBox = document.querySelector(‘.box‘);
            console.log(
                firstBox);
                
            var allBox = document.querySelectorAll(‘.box‘);
            console.log(allBox);
            (‘li‘);
            console.log(lis);
        </script>
    </body>

效果图

技术分享图片

2021-05-12 17:40:23

JavaScript获取元素的常用方式

原文：https://www.cnblogs.com/leif4634/p/14760881.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)