JavaScript获取元素的常用方式

2021/5/12 20:27:21

编程Tag： javascript 选择器元素 var 获取 id document

本文主要是介绍JavaScript获取元素的常用方式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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获取元素的常用方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript获取元素的常用方式

相关编程文章