Javascript中，Dom節點常見的只有三種:分別是元素節點，屬性節點，文本節點。我們可以用nodeType值來判斷節點的類型，它們對應的nodeType屬性值分別是1，2，3。
而獲取元素節點，有六種方式。
1.getElementById()
通過id來選中元素。使字變成紅色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">Javascript</div>
</body>
<script>
function func() {
var oDiv = document.getElementById("div1");
oDiv.style.color = "red";
}
func()
</script>
</html>
2.getElementsByTagName()
通過標簽名來選中元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
<script>
function func() {
var oUl = document.getElementById("list");
var oList = document.getElementsByTagName("li");
oList[2].style.color = "red";
}
func()
</script>
</html>
結果：
3.getElementsByClassName()
通過類名來獲取元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li class="select">Javascript</li>
<li class="select">jQuery</li>
<li class="select">Vue.js</li>
</ul>
</body>
<script>
function func() {
var oList = document.getElementsByClassName("select");
oList[0].style.color = "red";
}
func()
</script>
</html>
結果與上面相同。
4.querySelector與querySelectorAll()
分別表示滿足條件的第一個元素或者所有元素。括號內的寫法與CSS選擇器的寫法一樣。
document.querySelectorAll(“.test”)表示獲取所有class為test的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>JavaScript</div>
<div class="test">JavaScript</div>
<div class="test">JavaScript</div>
<div>JavaScript</div>
<div class="test">JavaScript</div>
</body>
<script>
function func() {
var oDiv = document.querySelectorAll(".test");
oDiv[0].style.color = "red";
}
func()
</script>
</html>
也可以使用quesrySelector()精確地獲取某個元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>javascript</li>
<li>javascript</li>
<li>javascript</li>
<li>javascript</li>
<li>javascript</li>
</ul>
</body>
<script>
function func() {
var oLi = document.querySelector("#list li:nth-child(3)");
oLi.style.color = "red";
}
func()
</script>
</html>
5.getElementsByName()
通過name屬性來獲取表單元素。一般也只用表單元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label><input type="radio" name="status" value="本科"/>本科</label>
<label><input type="radio" name="status" value="碩士"/>碩士</label>
<label><input type="radio" name="status" value="博士"/>博士</label>
</body>
<script>
function func() {
var oInput = document.getElementsByName("status");
oInput[2].checked = true;
}
func()
</script>
</html>
6.document.title和document.body
獲取一個頁面僅有的一個title和body元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
function func() {
document.title = "這是title元素";
document.body.innerHTML = "<p style='color: red'>這是body元素</p>";
}
func()
</script>
</html>
最后，注意getElementByTagName可以操作動態創建的Dom，而getElsmentById不可以。關於創建元素，則需要另外了解了。