获取元素的原生JS方法

1. 两种方法的比较

原生 JS 获取元素的方法：queryXXX 和 getElementByXXX。这里比较了使用他们的区别：

	1.根据id获取标签元素:  唯一的元素
        document.getElementById("ID") 
        document.querySelector("#ID") 
            
    2.根据class获取多个元素 
        document.getElementsByClassName("class属性值") 
        document.querySelectorAll(".class属性值") 
            
	3.根据标签名称获取多个元素
        document.getElementsByTagName("标签")
        document.querySelectorAll("标签")
	
	4. 根据name属性获取多个元素 
		document.getElementsByName('name属性值')
		document.querySelectorAll([name=name值]) 
    
    5. 获取当前元素的父标签
    	element.parentElement  //element表示当前标签对象

2. 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JS获取元素的方法</title>
    <style>
        .clz{
            background-color: red;
        }
    </style>
</head>
<body>
<span name="name_span" id="t1" style="font-size: 30px" class="clz">原生 JS 获取元素的方法</span>
</body>
<script>
    //getElementByXXX方法
        //根据id获取
    let elementById = document.getElementById("t1");
    console.log(elementById);

        //根据类属性值
    let arr = document.getElementsByClassName("clz");
    console.log(arr[0]);

        //根据name属性值
    let byName = document.getElementsByName("name_span");
    console.log(byName[0]);

        //根据标签名获取
    let tagName = document.getElementsByTagName("span");
    console.log(tagName[0]);


    //queryXXX方法，传递的参数值和css选择器语法一致
    //es6新特性 根据id获取
    console.log( document.querySelector("#t1") );
    //根据类属性值
    console.log( document.querySelectorAll(".clz")[0]);
    //根据name属性值
    console.log( document.querySelectorAll("[name=name_span]")[0]);


</script>
</html>

Console：

原文链接：https://qwert.blog.csdn.net/article/details/105421773

Regino

发布了369 篇原创文章 · 获赞 381 · 访问量 2万+

私信关注

JavaScript 获取元素的原生JS方法

目录

获取元素的原生JS方法

1. 两种方法的比较

2. 代码示例

猜你喜欢