目錄
一.dom元素獲取的意義與使用場(chǎng)景?
使用場(chǎng)景（絕大多數(shù)js操作都需要dom操作）
總結(jié)/疑問(wèn)解答！?
二.DOM元素獲取的常用方法（重點(diǎn)）
獲取dom元素（動(dòng)態(tài)）
document.gerElementbyId()
document.gerElementsBytagName()
document.gerElementsByclassName()
document.gerElementsByname()通過(guò)name屬性查找元素
獲取dom元素（靜態(tài)）
1.querySelector(css選擇器) 新方法，ie低版本不支持，返回的是符合選擇器的第一個(gè)元素對(duì)象
2.querySelectorAll(css選擇器) 返回的是符合選擇器的所有元素對(duì)象
3.特點(diǎn)（重點(diǎn)）
4.注意
靜態(tài)和動(dòng)態(tài)的區(qū)別
相關(guān)代碼
一.dom元素獲取的意義與使用場(chǎng)景?
DOM 元素獲取在 JavaScript 中具有重要的意義和作用。它使我們能夠動(dòng)態(tài)地與網(wǎng)頁(yè)中的元素進(jìn)行交互，并根據(jù)用戶的操作或特定的邏輯來(lái)修改頁(yè)面的外觀和行為。
作用/意義（了解即可）
- 操作和修改元素內(nèi)容：通過(guò)獲取 DOM 元素，我們可以修改元素的文本內(nèi)容、HTML 結(jié)構(gòu)或其他屬性。這使得我們可以根據(jù)需要?jiǎng)討B(tài)地修改頁(yè)面，例如更新文本、插入新的元素或更新圖片等。
- 添加和刪除元素：通過(guò)獲取 DOM 元素及其父元素，我們可以動(dòng)態(tài)地添加新的元素到頁(yè)面中，或刪除現(xiàn)有的元素。這對(duì)于創(chuàng)建動(dòng)態(tài)內(nèi)容、響應(yīng)用戶操作或?qū)崿F(xiàn)交互性的網(wǎng)頁(yè)非常有用。
- 修改元素樣式：通過(guò)獲取 DOM 元素的引用，我們可以修改元素的 CSS 樣式，包括顏色、尺寸、位置等。這使得我們可以根據(jù)特定條件或用戶操作來(lái)改變?cè)氐耐庥^，從而實(shí)現(xiàn)更好的用戶體驗(yàn)或動(dòng)態(tài)效果。
- 添加事件監(jiān)聽(tīng)器：通過(guò)獲取 DOM 元素，我們可以為元素添加事件監(jiān)聽(tīng)器，以便在用戶執(zhí)行特定操作時(shí)觸發(fā)相應(yīng)的 JavaScript 代碼。這使我們能夠?qū)崿F(xiàn)響應(yīng)式的交互，并處理用戶的點(diǎn)擊、鼠標(biāo)移動(dòng)、鍵盤(pán)輸入等事件
使用場(chǎng)景（絕大多數(shù)js操作都需要dom操作）
- 動(dòng)態(tài)網(wǎng)頁(yè)：當(dāng)需要根據(jù)用戶的操作或特定的邏輯來(lái)動(dòng)態(tài)更新網(wǎng)頁(yè)內(nèi)容或行為時(shí)，DOM 元素獲取非常有用。例如，表單驗(yàn)證、菜單導(dǎo)航、動(dòng)畫(huà)效果等。
- 單頁(yè)應(yīng)用程序（SPA）：在使用 JavaScript 框架（如React、Angular、Vue.js）開(kāi)發(fā)單頁(yè)應(yīng)用程序時(shí)，通過(guò)獲取 DOM 元素來(lái)操作和更新頁(yè)面是必要的。例如，根據(jù)路由切換組件、更新數(shù)據(jù)、渲染視圖等。
- 動(dòng)態(tài)表單驗(yàn)證：當(dāng)需要驗(yàn)證表單輸入的有效性，并基于驗(yàn)證結(jié)果提示用戶時(shí)，通過(guò)獲取 DOM 元素來(lái)檢索表單字段，并應(yīng)用相應(yīng)的驗(yàn)證邏輯非常有用。
- 注意DOM 元素獲取是一項(xiàng)強(qiáng)大的功能，但在處理大量元素時(shí)可能會(huì)影響性能。因此，在使用過(guò)程中要注意使用正確的選擇器，并避免不必要的DOM操作，以提高網(wǎng)頁(yè)的性能和響應(yīng)速度。
總結(jié)/疑問(wèn)解答！?
? ?dom操作其實(shí)在前面的文章中已經(jīng)用到很多次了，但是一直沒(méi)有系統(tǒng)性的總結(jié)，接下來(lái)的幾篇文章，主要來(lái)總結(jié)dom操作以及dom操作相關(guān)的案例（小游戲），比如說(shuō)：選字游戲，連連看，打地鼠，多球碰撞，隨機(jī)抽簽，無(wú)縫輪播，原生js繪制時(shí)鐘等等。
二.DOM元素獲取的常用方法（重點(diǎn)）
獲取dom元素（動(dòng)態(tài)）
獲取dom元素
document.gerElementbyId()
document.gerElementsBytagName()
document.gerElementsByclassName()
document.gerElementsByname()通過(guò)name屬性查找元素
ie下只針對(duì)于input元素起作用
在標(biāo)準(zhǔn)瀏覽器下，可以適用于任何標(biāo)簽
注意：gerElementsByname()的調(diào)用對(duì)象只能是 document
以上幾種方法在前面的文章中都有講到，所有在這里面不做過(guò)多的講述，詳情可以翻閱往期的筆記。下面是文章鏈接javaScript：如何獲取html中的元素對(duì)象_js 獲取html對(duì)象_小姚學(xué)前端的博客-CSDN博客
獲取dom元素（靜態(tài)）
1.querySelector(css選擇器) 新方法，ie低版本不支持，返回的是符合選擇器的第一個(gè)元素對(duì)象
let age = document.querySelector('input[name="age"]') //里面是屬性選擇器 console.log(age); //通過(guò)id名獲取 let cao = document.querySelector('#cao') console.log(cao);2.querySelectorAll(css選擇器) 返回的是符合選擇器的所有元素對(duì)象
//獲取所有的div let divs = document.querySelectorAll('div') console.log(divs); //通過(guò)類名獲取 let qiao = document.querySelectorAll('.qiao') console.log(qiao); //同時(shí)使用多個(gè)選擇器 let ele = document.querySelectorAll('input,div') console.log(ele); //選擇所有的li元素 let lis = document.querySelectorAll('li') console.log(lis); //獲取list1下面所有的li元素 let lis1 = document.querySelectorAll('#list1>li') console.log(lis1);
3.特點(diǎn)（重點(diǎn)）
特點(diǎn)：
? ? 1.傳入的參數(shù)是選擇器，通過(guò)選擇器檢索出具體元素
? ? 2.他的調(diào)用對(duì)象只能是 document
? ? 3.querySelector(css選擇器) === querySelectorAll(css選擇器)[0]
? ? 4.都支持多個(gè)選擇器，如果使用多個(gè)選擇器, 用逗號(hào)分開(kāi)
4.注意
以上兩個(gè)方法是靜態(tài)方法，所有選擇器都支持? ?
靜態(tài)和動(dòng)態(tài)的區(qū)別
? ? ? ?動(dòng)態(tài)獲取的元素集合在以后的操作中隨著操作的增刪和修改而改變，靜態(tài)獲取的元素
集合，不會(huì)隨著以后的操作而改變文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-708735.html
//靜態(tài)和動(dòng)態(tài)的區(qū)別 let list1 =document.getElementById('list1') //創(chuàng)建一個(gè)li標(biāo)簽 let cli = document.createElement('li') //使用標(biāo)簽名獲取li標(biāo)簽，動(dòng)態(tài)方法 let myLi = document.getElementsByTagName('li') //使用靜態(tài)方法獲取li標(biāo)簽 let ulSon = document.querySelectorAll('li') //給創(chuàng)建的標(biāo)簽添加字符串 cli.innerHTML = '桃樹(shù)'; //把創(chuàng)建的標(biāo)簽添加到html list1.appendChild(cli); console.log(myLi,ulSon); //輸出后的結(jié)果，動(dòng)態(tài)的包含新創(chuàng)建的標(biāo)簽，靜態(tài)的不包含
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-708735.html
相關(guān)代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>獲取dom元素</title>
</head>
<body>
<input type="text" name="user" placeholder="輸入用戶名" ><br>
<input type="text" name="age" placeholder="輸入用戶年齡" ><br>
<div name="user">不許玩原神</div>
<div class="qiao" id="cao">銅雀春深鎖二喬</div>
<div class="qiao">小荷才露尖尖角</div>
<ul id="list1">
<li>松樹(shù)</li>
<li>楊樹(shù)</li>
<li>梧桐樹(shù)</li>
<li>石榴樹(shù)</li>
<li>梨樹(shù)</li>
</ul>
<ul id="list2">
<li>松樹(shù)2</li>
<li>楊樹(shù)2</li>
<li>梧桐樹(shù)2</li>
<li>石榴樹(shù)2</li>
<li>梨樹(shù)2</li>
</ul>
</body>
</html>
<script>
/*
獲取dom元素
document.gerElementbyId()
document.gerElementsBytagName()
document.gerElementsByclassName()
document.gerElementsByname()通過(guò)name屬性查找元素
ie下只針對(duì)于input元素起作用
在標(biāo)準(zhǔn)瀏覽器下，可以適用于任何標(biāo)簽
注意：gerElementsByname()的調(diào)用對(duì)象只能是 document
以上4個(gè)方法都是 動(dòng)態(tài)方法
querySelector(css選擇器) 新方法，ie低版本不支持，返回的是符合選擇器的
第一個(gè)元素對(duì)象
querySelectorAll(css選擇器) 返回的是符合選擇器的所有元素對(duì)象
以上兩個(gè)方法是靜態(tài)方法，所有選擇器都支持
特點(diǎn)：
1.傳入的參數(shù)是選擇器，通過(guò)選擇器檢索出具體元素
2.他的調(diào)用對(duì)象只能是 document
3.querySelector(css選擇器) === querySelectorAll(css選擇器)[0]
4.都支持多個(gè)選擇器，如果使用多個(gè)選擇器, 用逗號(hào)分開(kāi)
靜態(tài)和動(dòng)態(tài)的區(qū)別
動(dòng)態(tài)獲取的元素集合在以后的操作中隨著操作的增刪和修改而改變，靜態(tài)獲取的元素
集合，不會(huì)隨著以后的操作而改變
*/
let user = document.getElementsByName('user')
console.log(user);
let age = document.querySelector('input[name="age"]') //里面是屬性選擇器
console.log(age);
let inputs = document.querySelector('input')
console.log(inputs);
//獲取所有的div
let divs = document.querySelectorAll('div')
console.log(divs);
//通過(guò)類名獲取
let qiao = document.querySelectorAll('.qiao')
console.log(qiao);
//通過(guò)id名獲取
let cao = document.querySelector('#cao')
console.log(cao);
//同時(shí)使用多個(gè)選擇器
let ele = document.querySelectorAll('input,div')
console.log(ele);
//選擇所有的li元素
let lis = document.querySelectorAll('li')
console.log(lis);
//獲取list1下面所有的li元素
let lis1 = document.querySelectorAll('#list1>li')
console.log(lis1);
let myLi = document.getElementsByTagName('li')
console.log(myLi);
let ulSon = document.querySelectorAll('li')
// ulSon[0].className='abc'
myLi[0].className='abc'
//靜態(tài)和動(dòng)態(tài)的區(qū)別
let list1 =document.getElementById('list1')
let cli = document.createElement('li')
cli.innerHTML = '桃樹(shù)';
list1.appendChild(cli);
console.log(myLi,ulSon);
</script>到了這里，關(guān)于javaScript:DOM元素的獲?。o態(tài)/動(dòng)態(tài)獲取）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
