1、根據id獲取
（1）getElementById() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取元素</title>
<script>
window.onload = function() {
var uname = document.getElementById("myname");
console.log(uname);
console.log(typeof uname);
}
</script>
</head>
<body>
<div id="myname">2020-07-22</div>
</body>
</html>
- getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用。
- 參數id大小寫敏感
- 返回的是一個元素的對象
（2）console.dir
window.onload = function() { var uname = document.getElementById("myname"); console.log(uname); console.log(typeof uname); console.dir(uname); }
console.dir能夠返回詳細信息：
attributeStyleMap: StylePropertyMap size: 0 __proto__: StylePropertyMap attributes: NamedNodeMap {0: id, id: id, length: 1} autocapitalize: "" autofocus: false baseURI: "http://127.0.0.1:8020/test20200630/test.html?__hbt=1595464777990" childElementCount: 0 childNodes: NodeList [text] children: HTMLCollection [] classList: DOMTokenList [value: ""] className: "" clientHeight: 64 clientLeft: 0 clientTop: 0 clientWidth: 900 contentEditable: "inherit" dataset: DOMStringMap {} dir: "" draggable: false elementTiming: "" enterKeyHint: "" firstChild: text firstElementChild: null hidden: false id: "myname" innerHTML: "2020-07-22" innerText: "2020-07-22" inputMode: "" isConnected: true isContentEditable: false lang: "" lastChild: text lastElementChild: null localName: "div" namespaceURI: "http://www.w3.org/1999/xhtml" nextElementSibling: iframe#blockbyte-bs-sidebar.notranslate
2、根據標簽獲取
（1）根據標簽獲取元素
<html>
<head>
<meta charset="UTF-8">
<title>獲取元素</title>
<script>
window.onload = function() {
var list = document.getElementsByTagName("div");
console.log(list);
for(var i in list){
console.log(list[i]);
}
}
</script>
</head>
<body>
<div>2020-07-22</div>
<div>2020年7月23日08:58:28</div>
<div>2020年7月23日08:58:35</div>
<div>2020年7月23日08:58:43</div>
<div>2020年7月23日08:58:46</div>
</body>
</html>
返回帶有指定標簽名的對象集合
（2）返回標簽內的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取元素</title>
<script>
window.onload = function() {
var test=document.getElementById("test");
var testli=test.getElementsByTagName("li");
console.log(testli);
}
</script>
</head>
<body>
<ul id="test">
<li>2020年7月23日09:15:55</li>
<li>2020年7月23日09:16:02</li>
<li>2020年7月23日09:16:08</li>
</ul>
</body>
</html>
3、html5新增的獲取方法
（1）根據類名獲取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取元素</title>
<script>
window.onload = function() {
var boxs=document.getElementsByClassName("box");
console.log(boxs);
}
</script>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>
（2）querySelector
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取元素</title>
<script>
window.onload = function() {
var box=document.querySelector(".box");
console.log(box);
}
</script>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>
只能返回指定選擇器的第一個對象，id選擇器用#，類加點
（3）querySelectorAll
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取元素</title>
<script>
window.onload = function() {
var boxs=document.querySelectorAll(".box");
console.log(boxs);
}
</script>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>
只能返回指定選擇器的所有對象，id選擇器用#，類加點
4、獲取特殊元素
（1）獲取body元素和html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取元素</title>
<script>
window.onload = function() {
var bodyTest=document.body;
var htmlTest=document.documentElement;
console.log(bodyTest);
console.log(htmlTest);
}
</script>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
</body>
</html>
