DOM獲取頁面元素
阿新 • • 發佈：2021-11-09
文件物件模型(Document Object Model)，是W3C阻止推薦的處理可擴充套件標記語言(HTML或者XML)的標準程式設計介面。W3C已定義了一系列的DOM介面，通過這些DOM介面可以改變網頁的內容、結構和樣式。
獲取頁面元素的方法：1.根據id獲取(getElementById()獲取元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="time">2021-10-11</div>
<script>
//1.文件頁面從上往下載入，所以先得有標籤 所以我們的script寫到標籤下面
//2.get獲得element元素by通過駝峰命名法
//3.引數id是大小寫敏感的字串
//4.返回的是一個元素物件
var result = document.getElementById('time');
console.log(result);
console.log(typeof result);
//5.console.dir列印我們返回的元素物件更好的檢視裡面的屬性和方法
console.dir(result);
</script>
</body>
</html>
2.根據標籤名獲取(getElementsByTagName('標籤名')返回帶有指定標籤名的物件的集合)
注意：1.因為得到的是一個物件的集合，所以我們想要操作裡面的元素就需要遍歷。
2.得到元素物件是動態的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>獲取某類標籤元素</title>
</head>
<body>
<ul>
<li>知否知否，應是綠肥紅瘦</li>
<li>知否知否，應是綠肥紅瘦</li>
<li>知否知否，應是綠肥紅瘦</li>
<li>知否知否，應是綠肥紅瘦</li>
</ul>
<ol id='ol'>
<li>昨夜雨疏風驟</li>
<li>昨夜雨疏風驟</li>
<li>昨夜雨疏風驟</li>
<li>昨夜雨疏風驟</li>
<li>昨夜雨疏風驟</li>
</ol>
<script>
//1.返回的是獲取元素物件的集合 以偽陣列的形式儲存的
var lis=document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
//2.依次列印裡面的元素物件可以採用遍歷的方式
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
//3.如果頁面中只有一個li 返回的還是偽陣列的形式
//4.如果頁面中沒有這個元素返回的空的偽陣列的形式
//5.element.getElementsByTagName('標籤名');
//var ol=document.getElementsByTagName('ol');
//console.log(ol[0].getElementsByTagName('li'));
var ol=document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
//getElementById,getElementsByName,getElementsByTagName,getElementsByClassName四者之間的區別
//getElementById():這個方法將返回一個與那個有著給定id屬性值的元素節點對應的物件。
//getElementsByName():方法可返回帶有指定名稱的物件的集合。
//getElementsByTagName():方法返回一個物件陣列，每個物件分別對應著文件裡有著給定標籤的一個元素。這個理解起來有點拗口。
//W3school中是這樣定義的：此方法可返回帶有指定標籤名的物件的集合。
//getElementsByClassName():方法返回文件中所有指定類名的元素集合，作為 NodeList 物件。
</script>
</body>
</html>
3.通過HTML5新增的方法獲取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首頁</li>
<li>產品</li>
</ul>
</div>
<script>
//1.getElementsByClassName根據類名獲得某些元素集合
var boxs=document.getElementsByClassName('box');
console.log(boxs);
//2.querySelector 返回指定選擇器的第一個元素物件
var firstBox=document.querySelector('.box');
console.log(firstBox);
var nav=document.querySelector('#nav');
console.log(nav);
var li=document.querySelector('li');
console.log(li);
//3.querySelectorAll('選擇器') 返回選擇器所有元素
var allBox=document.querySelectorAll('.box');
console.log(allBox);
//獲取body元素
var bodyEle=document.body;
console.log(bodyEle);
//獲取HTML元素
var htmlEle=document.documentElement;
console.log(htmlEle);
</script>
</body>
</html>
getElementById, getElementsByName, getElementsByTagName, getElementsByClassName四者之間的區別
getElementById(): 這個方法將返回一個與那個有著給定id屬性值的元素節點對應的物件。
getElementsByName(): 方法可返回帶有指定名稱的物件的集合。
getElementsByTagName(): 方法返回一個物件陣列，每個物件分別對應著文件裡有著給定標籤的一個元素。這個理解起來有點拗口。
W3school中是這樣定義的：此方法可返回帶有指定標籤名的物件的集合。
getElementsByClassName(): 方法返回文件中所有指定類名的元素集合，作為 NodeList 物件。