DOM document Object Model 檔案物件模型：把檔案中的標簽，屬性，文本，轉換成物件來管理，
文章目錄
- html body部分
- script部分
- getElementsByTagName
- getElementById
- getElementsByClassName
- querySelector
- 獲取body的所有元素
- 獲取html的所有元素
- 獲取按鈕
html body部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="time">2019-9-9</div>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
<ol id = "ol">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ol>
<div class = "box">盒子</div>
<div class = "box">盒子</div>
<div id = "nav">
<ul>
<li>首頁</li>
<li>產品</li>
</ul>
</div>
<button id="btn">唐伯虎</button>
</body>
</html>
獲取物件的常用方法：
script部分
getElementsByTagName
- getElementsByTagName：根據標簽（元素 如 ul，li…）獲取
var list = document.getElementsByTagName('li');
console.log(list); // 回傳的是偽陣列
console.log(list[0]);
// 依次列印
for (var i = 0; i < list.length; i++) {
console.log(list[i]);
}
var a1 = document.getElementsByTagName('ol');
// 根據標簽名獲取，注意區別
console.log(a1[0].getElementsByTagName('li'));
// console.log(a1.getElementsByTagName('li')); 這個會報錯，只能是【單個父元素】里取子元素
getElementById
- getElementById：根據屬性 id="name"獲取
var ol = document.getElementById('ol'); // 注意與上面的區別，這個是根據id獲取，id只有一個，所以不用加[i]
console.log(ol.getElementsByTagName('li'));
getElementsByClassName
- getElementsByClassName： 根據類名 class="name"獲取
querySelector
- querySelector：選擇器的使用有特別需要注意的一點： 會根據id，class，tag型別的不同，字串形式是不一樣的
不像getElementsByTagName，getElementById，getElementsByClassName，直接寫名字就好，比如’box’，‘li’
var firstBox = document.querySelector('.box'); // 獲取的是第一個 類：.name
console.log(firstBox);
var nav = document.querySelector('#nav'); // id: #name
console.log(nav);
var li = document.querySelector('li'); // tag: name
console.log(li);
var allBox = document.querySelectorAll('.box'); // 選擇器獲取多個
console.log(allBox);
獲取body的所有元素
var bodyEle = document.body;
console.log(bodyEle);
獲取html的所有元素
var htmlEle = document.documentElement;
console.log(htmlEle);
獲取按鈕
var btn = document.getElementById("btn");
btn.onclick = function() {
alert('點秋香');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/260068.html
標籤：其他