JavaScript之DOM基礎
阿新 • • 發佈：2018-12-02
選取DOM元素的方法
| 方法 | 語法 | 說明 |
|---|---|---|
| 通過ID | getElementById() | 返回帶有指定ID的元素 |
| 通過標籤名 | getElementsByTagName() | 返回帶有指定標籤名的所有元 素，返回的是一個類陣列物件 |
| 通過name屬性 | getElementsByName() | 返回指定name屬性值的所有 子元素的集合，返回的是一個 類陣列物件 |
| 通過CSS類 | getElementsByClassName() | 返回指定class名稱的元素 |
通過ID選取元素( getElementById() )
<!doctype html> 通過標籤名選取元素( getElementsByTagName() )
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>前端開發</li>
<li>伺服器端開發</li>
<li>UI設計</li>
</ul>
<script>
var lis=document.getElementsByTagName("ul");
var lis=document.getElementsByTagName("li");
console.log(ul);
console.log(li);
</script>
</body>
</html>
注:通過標籤名選取的元素是一個類陣列物件，下標從0開始
通過name屬性選取元素( getElementsByName() )
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id ="infor">
<input type="checkbox" name="like">
<input type="checkbox" name="like">
<input type="checkbox" name="like">
<input type="checkbox" name="like">
</form>
<script>
var inputs=document.getElementsByName("like");
console.log(inputs);
console.log("獲得到的帶name屬性的元素有：" + inputs.length + "");
</script>
</body>
</html>
注:通過標籤名選取的元素是一個類陣列物件，下標從0開始
通過CSS類選取元素( getElementsByClassName() )
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="news">
<p class="new1">新聞標題1</p>
<p class="new2">新聞標題2</p>
<p class="new1">新聞標題1</p>
</div>
<script>
var div=document.getElementsByClassName("news")[0];
var new1=div.getElementsByClassName("new1") ;
var new2=div.getElementsByClassName("new2") ;
console.log(div);
console.log(new1);
console.log(new2);
</script>
</body>
</html>
注:
- 通過標籤名選取的元素是一個類陣列物件，下標從0開始
- 通過getElementsByClassName(“news”)[0];獲得到了第一個div，他的子元素在他基礎上通過類選擇器獲取元素
- 如果直接寫var div=document.getElementsByClassName(“news”);的或，獲取的是類名為news的陣列，而不是p標籤的父元素