JS获取DOM元素的8种方式
1. 标签名获取元素(结果为数组)
2. 类名获取元素(结果为数组)
3. id名获取元素
4. name属性获取元素(结果为数组)
5. 获取html元素
6. 获取body元素
7. 获取所有类型的元素(获取单个)
8.获取所有类型的元素(获取多个多个)
<!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>Document</title>
</head>
<body>
<div class="box">1</div>
<div id="container">2</div>
<input type="text" name="search" />
<script>
// ### 获取dom元素的8种方式
// 1.标签名获取元素(数组)
let divs = document.getElementsByTagName("div");
console.log(divs, divs[0], divs[1]);
// 2.类名获取元素(数组)
let boxes = document.getElementsByClassName("box");
console.log(boxes, boxes[0]);
// 3.id名获取元素
let contaniner = document.getElementById(".container");
console.log(container);
// 4.name属性获取元素(数组)
let searches = document.getElementsByName("search");
console.log(searches, searches[0]);
// 5.获取html元素
let html = document.documentElement;
console.log(html);
// 6.获取body元素
let body = document.body;
console.log(body);
// 7.获取所有类型的元素(单个)
let div1 = document.querySelector("div"); //标签选择器
console.log(div1);
let box1 = document.querySelector(".box"); //类选择器
console.log(box1);
let div2 = document.querySelector("#container"); //id选择器
console.log(div2);
// 8.获取所有类型的元素(多个)
let newDivs = document.querySelectorAll("div");
console.log(newDivs, newDivs[0], newDivs[1]);
</script>
</body>
</html>