Java教程

JavaScript获取元素的常用方式

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