html-dom獲取元素筆記
??獲取元素的方式
# 非常規(guī)方式
在 HTML 中，有三個特殊的元素： <html>、 <head>和 <body> 可以使用以下方式直接獲取它們：document.documentElement; // 獲取<html>元素
document.head; // 獲取<head>元素
document.body; // 獲取<body>元素
console.log(document.documentElement);
console.log(document.head);
console.log(document.body);# 常規(guī)方式
對于一般的元素，無法直接獲取到，但可以使用以下方法：通過 id 屬性獲取元素：document.getElementById('id')
通過 name 屬性獲取元素：document.getElementsByName('name')
通過 class 屬性獲取元素：document.getElementsByClassName('class')
通過標(biāo)簽名獲取元素：document.getElementsByTagName('div')
以此類推，可以根據(jù)元素的屬性來獲取相應(yīng)的元素。
# 特殊方式
還可以使用 querySelector() 和 querySelectorAll() 方法通過選擇器獲取元素：1、標(biāo)簽選擇器：可以使用標(biāo)簽名稱來選擇元素，例如：
（1）、document.querySelector('div')：選擇第一個 <div> 元素。
（2）、document.querySelector('p')：選擇第一個 <p> 元素。
2、類選擇器：可以使用類名來選擇具有特定類的元素，類名以 . 開頭，例如：
document.querySelector('.my-class')：選擇具有 my-class 類的第一個元素。
3、ID選擇器：可以使用元素的ID來選擇元素，ID以 # 開頭，例如：
document.querySelector('#my-id')：選擇具有 my-id ID的元素。
4、屬性選擇器：可以使用元素的屬性來選擇元素，例如：
document.querySelector('[name="my-name"]')：選擇具有 name 屬性值為 my-name 的元素。
5、后代選擇器：可以選擇某個元素的后代元素，例如：
document.querySelector('div p')：選擇第一個 <div> 元素內(nèi)的第一個 <p> 元素。
6、偽類選擇器：可以選擇元素的特定狀態(tài)或位置，例如：
document.querySelector('a:hover')：選擇第一個被鼠標(biāo)懸停的 <a> 元素。
當(dāng)然這只是例子,使用選擇器時，可以使用 CSS 選擇器的語法來指定元素。
??偽數(shù)組
當(dāng)使用以下方法獲取一組元素時，它們會返回一個類似數(shù)組的對象（偽數(shù)組）：1、document.querySelectorAll()：通過選擇器獲取一組元素。
2、document.getElementsByClassName()：通過類名獲取一組元素。
3、document.getElementsByTagName()：通過標(biāo)簽名獲取一組元素。
這些方法返回的偽數(shù)組對象（NodeList）具有類似數(shù)組的特性，但不是真正的數(shù)組。它們通常具有 length 屬性和可以通過索引訪問元素的能力，但不具備數(shù)組的方法（例如 forEach()、map() 等）。
如果你需要在偽數(shù)組上使用數(shù)組方法，可以使用以下方法將其轉(zhuǎn)換為真正的數(shù)組：
Array.from()： 將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組。
Array.prototype.slice.call()： 使用 call() 方法將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組。
以下是示例，展示了如何使用這些方法：
// 使用 document.querySelectorAll() 獲取一組元素
var elements = document.querySelectorAll('.example');
// 使用 document.getElementsByClassName() 獲取一組元素
var elements = document.getElementsByClassName('example');
// 使用 document.getElementsByTagName() 獲取一組元素
var elements = document.getElementsByTagName('div');偽數(shù)組可以使用length 屬性獲取長度
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
console.log(element);
}// 使用 Array.from() 方法將偽數(shù)組轉(zhuǎn)換為真正的數(shù)組
var arrayElements = Array.from(elements);
// 或者使用 Array.prototype.slice.call() 方法
var arrayElements = Array.prototype.slice.call(elements);
//forEach 方法循環(huán)輸出元素
arrayElements.forEach(function(element) {
console.log(element);
});console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);??一些小例子
準(zhǔn)備html結(jié)構(gòu)<div class="example">
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
</div>修改列表的第一項
方法一：使用 querySelector() 方法
var firstItem = document.querySelector('.example li:first-child');
firstItem.innerHTML = '修改后的列表項1';方法二：使用 getElementsByClassName() 方法和索引
var parentElement = document.getElementsByClassName('example')[0];
var items = parentElement.getElementsByTagName('li');
items[0].innerHTML = '修改后的列表項1';方法三：使用 querySelectorAll() 方法和索引
var items = document.querySelectorAll('.example li');
items[0].innerHTML = '修改后的列表項1';以上是常用的獲取元素的方式，根據(jù)具體的需求選擇合適的方法來獲取元素。
文章來自：https://xtbbb.com/default/11.html
信息科技 2024-02-13 02:34:12 通過 網(wǎng)頁 瀏覽(883) 打印