JavaScript基础：通过id值、class值、tagName值、name属性获取相应的一个或多个元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript基础：通过id值、class值、tagName值、name属性获取相应的一个或多个元素节点</title>
<!--
闭包：
可简单理解为子方法可以使用父方法里的变量（不建议使用闭包，变量不易释放）
DOM:
1、DOM: 即 Document Object Model 。
2、DOM用于操作html文档，准确地说是操作html标签里的内容。
3、JavaScript中将每一个标签当作对象处理。
4、在html中，每个标签都拥有自己的属性，如：style、id、class等，也拥有触发事件、方法。
同样在JavaScript中，作为对象处理的标签也拥有属性、事件、方法等成员。
5、操作DOM对象，一般使用document关键字调用。
JavaScript获取元素的方法：
根据id值获取一个元素节点：
document.getElementById(id);
根据class值获取一组元素节点：
document.getElementsByClassName(className);
根据name值获取一组元素节点：
document.getElementsByName(name);
根据tagName（标签名称）值获取一组元素节点：
document.getElementsByTagName(tagName);
根据id值、class值、tagName值获取一个元素节点，不能使用name属性获取：
注意：如果获取了一组元素节点，默认只返回第一个元素节点
document.querySelector(id | className | tagName);
根据id值、class值、tagName值获取一组元素节点，不能使用name属性获取：
注意：即使只获取了一个元素节点，也会返回NodeList数组
document.querySelectorAll(id | className | tagName);
-->
<style>
div{
width: 160px;
height: 160px;
margin: 10px;
display: inline-block;
}
input{
width: 160px;
height: 50px;
margin-right: 20px;
}
.dodgerblue{
border: 2px solid dodgerblue;
}
.orange{
border: 2px solid orange;
}
.hotpink{
background-color: hotpink;
}
.greenyellow{
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="div1" class="hotpink">我是div标签1</div>
<div id="div2" class="hotpink">我是div标签2</div>
<div id="div3" class="greenyellow">我是div标签3</div>
<div id="div4" class="hotpink">我是div标签4</div>
<br>
<input type="text" id="txt1" name="blueBorderText" class="dodgerblue" value="">
<input type="text" id="txt2" name="orangeBorderText" class="orange" value="">
<input type="text" id="txt3" name="blueBorderText" class="dodgerblue" value="">
</body>
<script>
console.log("通过id选择器查找，调用document.getElementById方法，得到的元素节点是：");
console.log(document.getElementById("div3"));
console.log("通过class选择器查找，调用document.getElementsByClassName方法，得到的一组元素节点是：");
console.log(document.getElementsByClassName("hotpink"));
console.log("通过tagName值（div）查找，调用document.getElementsByTagName方法，得到的一组元素节点是：");
console.log(document.getElementsByTagName("div"));
console.log("通过tagName值（input）查找，调用document.getElementsByTagName方法，得到的一组元素节点是：");
console.log(document.getElementsByTagName("input"));
console.log("通过name属性查找，调用document.getElementsByName方法，得到的一组元素节点是：");
console.log(document.getElementsByName("blueBorderText"));
// 调用document.querySelector方法，
// 通过id选择器、class选择器、tagName值查找符合条件的元素节点，不能使用name属性查找
// 如果得到一组元素节点，只返回第一个元素节点
console.log("通过id选择器查找，调用document.querySelector方法，得到的元素节点是：");
console.log(document.querySelector("#div3"));
console.log("通过class选择器查找，调用document.querySelector方法，得到的元素节点是：");
console.log(document.querySelector(".hotpink"));
console.log("通过tagName值（div）查找，调用document.querySelector方法，得到的元素节点是：");
console.log(document.querySelector("div"));
console.log("通过tagName值（input）查找，调用document.querySelector方法，得到的元素节点是：");
console.log(document.querySelector("input"));
// 不能通过name属性查找，返回值为null
console.log("通过name属性查找，调用document.querySelector方法，得到的元素节点是：");
console.log(document.querySelector("blueBorderText"));
// 调用document.querySelectorAll方法
// 通过id选择器、class选择器、tagName值查找符合条件的元素节点，不能使用name属性查找
// 返回一组元素节点，即使只有一个元素节点，也返回NodeList数组
console.log("通过id选择器查找，调用document.querySelectorAll方法，得到的一组元素节点是：");
console.log(document.querySelectorAll("#div3"));
console.log("通过class选择器查找，调用document.querySelectorAll方法，得到的一组元素节点是：");
console.log(document.querySelectorAll(".hotpink"));
console.log("通过tagName值（div）查找，调用document.querySelectorAll方法，得到的一组元素节点是：");
console.log(document.querySelectorAll("div"));
console.log("通过tagName值（input）查找，调用document.querySelectorAll方法，得到的一组元素节点是：");
console.log(document.querySelectorAll("input"));
// 不能通过name属性查找，返回值为NodeList[]
console.log("通过name属性查找，调用document.querySelectorAll方法，得到的一组元素节点是：");
console.log(document.querySelectorAll("blueBorderText"));
</script>
</html>控制台显示以下信息：
