原生JS获取元素方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElement</title>
</head>
<body>
<!-- 通过id属性名获取指定某个元素：getElementById -->
<div id="app"></div>
<!-- 通过class属性名获取指定某类元素：getElementsByClassName -->
<div class="box"></div>
<!-- 通过name属性名获取指定某类元素 -->
<div name="box2"></div>
<!-- 通过标签名获取指定某类元素：getElementsByTagName -->
<span></span>
<!-- 通过选择器获取指定某个元素 -->
<p id="pId" class="pClass"></p>
<!-- 通过选择器获取指定某类元素 -->
<div>我有蓝色背景</div>
</body>
<script type="text/javascript">
// getElementById(id属性名)--返回一个为id属性名的一个元素
document.getElementById("app").innerHTML = "通过getElementById获取的元素";
// getElementsByClassName(class属性名)--返回一个class属性名的类数组
document.getElementsByClassName("box")[0].innerHTML = "通过getElementsByClassName获取的元素";
// getElementsByName(name属性名)--返回一个name属性名的类数组
document.getElementsByName("box2")[0].innerHTML = "通过getElementsByName获取的元素"
// getElementsByTagName(标签名/元素名)--返回一个标签名的类数组
document.getElementsByTagName("span")[0].innerHTML = "通过getElementsByTagName获取的元素";
// querySelector(选择器)--返回第一个元素
// 通过标签名/元素名获取
document.querySelector("p").innerHTML = "通过querySelector获取的元素";
// 通过class属性名获取
document.querySelector(".pClass").style.color = "#f00";
// 通过id属性名获取
document.querySelector("#pId").style.fontSize = "40px";
// querySelectorAll(选择器)--返回一类标签名一致/class名一致/id名一致的类数组
// 获取第一个元素
document.querySelectorAll("div")[0].style.backgroundColor = "#bfa";
// 获取最后一个元素
let divLists = document.querySelectorAll("div");
divLists[divLists.length - 1].style.backgroundColor = "#1890ff";
</script>
</html>
一、getElementById
通过ID获取元素
document.getElementById("app")
返回值只能获取到一个元素
二、getElementsByTagName
通过标签名/元素名获取元素
document.getElementsByTagName("标签名/元素名")
//实例
//获取li元素
let liLists = document.getElementsByTagName("li");
//给第一个li设置样式
liLists[0].style.backgroundColor = "#f00";
//给最后一个li设置样式
liLists[liLists.length - 1].style.backgroudColor = "#0f0";
返回值是一个类数组
三、getElementsByClassName
通过class属性名获取元素
document.getElementsByClassName("class属性名");
//实例-括号内不写
document.getElementsByClassName("(.)app/(#)app");
返回值是一个类数组
四、getElementsByName
通过name属性获取元素
document.getElementsByName("name属性");
//实例
document.getElementsByName("zhdj");
//获取name=zhdj的元素
返回值是一个类数组
五、querySelector
通过选择器获取第一个元素
document.querySelector("元素选择器/id选择器/class选择器/...");
//实例
document.querySelector("li/#id/.className");
返回第一个元素
六、querySelectorAll
通过选择器获取一类元素
document.querySelectorAll("元素选择器/id选择器/class选择器/...");
//实例
document.querySelectorAll("li/#id/.className");
