腳本之家服務器常用軟件

快捷導航

JavaScript中DOM常見的操作匯總

更新時間：2023年08月13日 14:22:41 作者：一花一world

DOM（文檔對象模型）是一種用于表示和操作HTML和XML文檔的標準，在JavaScript中，可以使用DOM?API來對DOM進行操作，下面就來看看常見的操作都有哪些吧

常見的DOM操作

1.獲取元素：

document.getElementById(id): 根據(jù)元素的id屬性獲取元素。

document.getElementsByClassName(className): 根據(jù)元素的class屬性獲取元素。

document.getElementsByTagName(tagName): 根據(jù)元素的標簽名獲取元素。

document.querySelector(selector): 根據(jù)選擇器獲取第一個匹配的元素。

document.querySelectorAll(selector): 根據(jù)選擇器獲取所有匹配的元素。

2.創(chuàng)建元素：

document.createElement(tagName): 創(chuàng)建一個指定標簽名的元素節(jié)點。

document.createTextNode(text): 創(chuàng)建一個包含指定文本內容的文本節(jié)點。

3.修改元素屬性和內容：

element.setAttribute(name, value): 設置元素的屬性值。

element.getAttribute(name): 獲取元素的屬性值。

element.innerHTML: 設置或獲取元素的HTML內容。

element.innerText: 設置或獲取元素的文本內容。

4.添加和刪除元素：

parentElement.appendChild(newChild): 將一個新的子節(jié)點添加到指定父節(jié)點的子節(jié)點列表的末尾。

parentElement.removeChild(child): 從指定父節(jié)點的子節(jié)點列表中刪除一個子節(jié)點。

5.修改元素樣式：

element.style.property = value: 設置元素的CSS樣式屬性值。

6.添加事件監(jiān)聽器：

element.addEventListener(event, listener): 給元素添加一個事件監(jiān)聽器。

element.removeEventListener(event, listener): 移除元素的一個事件監(jiān)聽器。

7.查詢和修改元素的位置和尺寸：

element.getBoundingClientRect(): 獲取元素相對于視口的位置和尺寸信息。

element.offsetTop: 獲取元素相對于其父元素的垂直偏移量。

element.offsetLeft: 獲取元素相對于其父元素的水平偏移量。

element.offsetWidth: 獲取元素的寬度（包括邊框和內邊距）。

element.offsetHeight: 獲取元素的高度（包括邊框和內邊距）。

這只是一些常見的DOM操作，還有很多其他操作可以根據(jù)具體需求進行學習和使用。

常見的DOM操作的詳細代碼示例

1.獲取元素：

// 根據(jù)id獲取元素
const elementById = document.getElementById('myElement');
console.log(elementById);
// 根據(jù)class獲取元素
const elementsByClass = document.getElementsByClassName('myClass');
console.log(elementsByClass);
// 根據(jù)標簽名獲取元素
const elementsByTagName = document.getElementsByTagName('div');
console.log(elementsByTagName);
// 根據(jù)選擇器獲取元素
const elementBySelector = document.querySelector('.myClass');
console.log(elementBySelector);
const elementsBySelectorAll = document.querySelectorAll('.myClass');
console.log(elementsBySelectorAll);

結果示例：

<div id="myElement"></div>
HTMLCollection [div.myClass, div.myClass]
HTMLCollection [div, div, div]
<div class="myClass"></div>
NodeList [div.myClass, div.myClass]

2.創(chuàng)建元素：

// 創(chuàng)建元素節(jié)點
const newElement = document.createElement('div');
newElement.textContent = 'New Element';
console.log(newElement);
// 創(chuàng)建文本節(jié)點
const newText = document.createTextNode('New Text');
console.log(newText);

結果示例：

<div>New Element</div>
New Text

3.修改元素屬性和內容：

// 創(chuàng)建元素節(jié)點
const newElement = document.createElement('div');
newElement.textContent = 'New Element';
console.log(newElement);
// 創(chuàng)建文本節(jié)點
const newText = document.createTextNode('New Text');
console.log(newText);

結果示例：

123
<span>Hello</span> World
Hello, Vue!

4.添加和刪除元素：

const parentElement = document.getElementById('parentElement');
// 添加子節(jié)點
const newChild = document.createElement('div');
newChild.textContent = 'New Child';
parentElement.appendChild(newChild);
console.log(parentElement);
// 刪除子節(jié)點
parentElement.removeChild(newChild);
console.log(parentElement);

結果示例：

<div id="parentElement">
<div>New Child</div>
</div>
<div id="parentElement"></div>

5.修改元素樣式：

const element = document.getElementById('myElement');
// 設置樣式屬性值
element.style.backgroundColor = 'red';
element.style.color = 'white';
console.log(element.style);

結果示例：

{
backgroundColor: 'red',
color: 'white'
}

6.添加事件監(jiān)聽器：

const button = document.getElementById('myButton');
// 添加點擊事件監(jiān)聽器
button.addEventListener('click', () => {
  console.log('Button clicked');
});
// 移除點擊事件監(jiān)聽器
const clickListener = () => {
  console.log('Button clicked');
};
button.addEventListener('click', clickListener);
button.removeEventListener('click', clickListener);

結果示例：

Button clicked

7.查詢和修改元素的位置和尺寸：

const element = document.getElementById('myElement');
// 獲取位置和尺寸信息
const rect = element.getBoundingClientRect();
console.log(rect);
// 獲取垂直偏移量
console.log(element.offsetTop);
// 獲取水平偏移量
console.log(element.offsetLeft);
// 獲取寬度和高度
console.log(element.offsetWidth);
console.log(element.offsetHeight);

結果示例：