DOM獲取元素

1. 如何獲取頁面元素

DOM在實際開發中主要用來操作元素，獲取頁面中的元素可以使用以下幾種方式：

根據ID獲取
根據標簽名獲取
通過HTML5新增的方法獲取（推薦）
特殊元素獲取

2. 根據ID獲取

使用getElementById()方法可以獲取戴有ID的元素物件，（古老方法不太推薦）

<div id="fruit">apple</div>
<script>
    var eg = document.getElementById('fruit');
</script>

3. 根據標簽名獲取

使用getElementByTagName()方法可以回傳帶有指定標簽名的物件的集合，（古老方法不太推薦）

<div>apple</div>
<div>banana</div>
<div>watermelon</div>
<script>
    var eg = document.getElementByTagName('div');    // 得到的是一個物件的集合，以偽陣列的形式存盤
    console.log(eg[0]);    // 回傳第一個div物件
</script>

注：

因為得到的是一個物件的集合，所以我們想要操作里面的元素就需要遍歷
得到的元素物件是動態的
如果頁面中只有一個這個元素，回傳的還是偽陣列的形式
如果頁面中沒有這個元素，回傳的是空的偽陣列的形式

還可以獲取某個元素（父元素）內部所有指定標簽名的子元素，

<ol id='fruit'>
    <li>apple</li>
    <li>banana</li>
    <li>watermelon</li>
</ol>
<script>
    var eg = document.getElemrntById('fruit');
    console.log(eg.getElementByTagName('li'));    // 獲取eg內的所有子元素
</script>

注：父元素必須是單個物件（必須指明是哪一個元素物件），獲取的時候不包括父元素自己，

4. 通過HTML5新增的方法獲取

推薦使用這種方法，

// 1.根據類名回傳元素物件集合
document.getElementByClassName('類名');

// 2.根據指定選擇器回傳第一個元素物件
document.querySelector('選擇器');

// 3.根據指定選擇器回傳
document.querySelectorAll('選擇器');

// 1.getElementByClassName
var eg1 = document.getElementByClassName('hello');

// 2.querySelector
var eg2 = document.querySelector('.world');    // 類選擇器
var eg3 = document.querySelector('#good');    // id選擇器

// 3.querySelectorAll
var eg4 = document.querySelectorAll('li');    // 標簽選擇器

5. 獲取特殊元素

獲取body元素

document.body    // 回傳body元素物件

獲取html元素

document.documentElement    // 回傳html元素物件

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/196613.html

標籤：JavaScript

上一篇：vscode prettier 代碼格式化和 eslint 沖突解決方式 vue

下一篇：Node.js基礎學習(1)