JavaScript基于querySelector?/?querySelectorAll對(duì)元素的操作(DOM?API掃盲)
一、通過(guò)querySelector / querySelectorAll獲取元素
瀏覽器提供的一個(gè)全局對(duì)象，類(lèi)似于CSS中的選擇器，可以精準(zhǔn)的獲取元素對(duì)象，這組API都來(lái)自于document下，document是瀏覽器提供的一個(gè)全局對(duì)象，表示當(dāng)前頁(yè)面DOM API基本都是documet對(duì)象的方法；
1.1 單個(gè)標(biāo)簽選中
對(duì)于單個(gè)標(biāo)簽元素的獲取，使用querySelector，即可；
如下代碼：
<div class="hello" id="hi">你好</div>
<script>
let div = document.querySelector('div');
console.log(div);
</script>這時(shí)候就打開(kāi)瀏覽器按下F12，選中控制臺(tái)，就可以發(fā)現(xiàn)，剛剛獲取的div元素結(jié)果都獲取到了；（如下圖）
1.2 多個(gè)標(biāo)簽選中
querySelector只是獲取單個(gè)元素標(biāo)簽，當(dāng)出現(xiàn)多個(gè)相同的元素標(biāo)簽時(shí)，只會(huì)選中第一個(gè)；如果想把多個(gè)元素都獲取到，可以使用querySelectorAll來(lái)完成操作，這個(gè)時(shí)候返回值就是一個(gè)數(shù)組，每個(gè)元素是一個(gè)對(duì)象；
如下代碼：
<div class="hello" id="hi">你好</div>
<div class="word">世界</div>
<div class="China">中國(guó)</div>
<script>
let divs = document.querySelectorAll('div');
console.log(divs);
</script>打開(kāi)瀏覽器按下F12，選中控制臺(tái)就可以發(fā)現(xiàn)：（如下圖）
二、基于這組DOM API，對(duì)元素進(jìn)行操作
2.1 innerHTML獲取/修改元素內(nèi)容
通過(guò)innerHTML獲取的是標(biāo)簽內(nèi)部的子元素內(nèi)容，所以只適用于雙標(biāo)簽，單標(biāo)簽不可以的
獲取元素并修改div內(nèi)容（如下代碼）
<div>
<span>hello</span>
<span>world</span>
</div>
<script>
let div = document.querySelector('div');
//讀取元素
console.log(div.innerHTML);
//修改元素
div.innerHTML = '<p>這里修改了div元素里的內(nèi)容</p>'
console.log(div.innerHTML);
</script>執(zhí)行效果如下圖：
2.2獲取/修改元素屬性
通過(guò)querySelector / querySelectorAll對(duì)元素對(duì)象的獲取，可以通過(guò)此對(duì)象對(duì)標(biāo)簽屬性的修改，修改的就是標(biāo)簽中寫(xiě)的鍵值對(duì)；
如下代碼：點(diǎn)擊空的a標(biāo)簽，修改href；（不光是這個(gè)栗子，其他所有標(biāo)簽的屬性也是通過(guò)類(lèi)似的方法進(jìn)行操作）
<a href="#" rel="external nofollow" >點(diǎn)我跳轉(zhuǎn)百度</a>
<script>
let a = document.querySelector('a');
a.onclick = function() {
a.;
}
</script>三、單標(biāo)簽元素屬性的獲取和修改
3.1 value
通過(guò)value獲取單標(biāo)簽元素的內(nèi)容，例如input的標(biāo)簽中，value表示了輸入框的內(nèi)容，修改他，瀏覽器上的樣式也會(huì)跟著修改；
如下代碼：點(diǎn)擊計(jì)數(shù)（按下+，數(shù)字加一，按下-，數(shù)字減一）
<input type="text" value="0">
<button class="add">+</button>
<button class="sub">-</button>
<script>
let input = document.querySelector('input');
let add = document.querySelector('.add');
let sub = document.querySelector('.sub');
add.onclick = function() {
//這里注意需要轉(zhuǎn)化為int類(lèi)型，否則就是字符串
let oldValue = parseInt(input.value);
oldValue = parseInt(oldValue + 1);
input.value = oldValue;
}
sub.onclick = function() {
//這里注意需要轉(zhuǎn)化為int類(lèi)型，否則就是字符串
let oldValue = parseInt(input.value);
oldValue = parseInt(oldValue - 1);
input.value = oldValue;
}
</script>3.2checked
checked表示了當(dāng)前復(fù)選框的狀態(tài)——被選中或者未被選中；
如下代碼：（單選和全選）
<span>你有什么愛(ài)好？</span><br>
<input type="checkbox" class="one">彈琴<br>
<input type="checkbox" class="one">唱歌<br>
<input type="checkbox" class="one">健身<br>
<input type="checkbox" class="all">全選<br>
<script>
let solo = document.querySelectorAll('.one');//返回一個(gè)數(shù)組
let all = document.querySelector('.all');
all.onclick = function() {
for(let i = 0; i < solo.length; i++) {
solo[i].checked = all.checked;
}
}
</script>3.3 type
表示了當(dāng)前單標(biāo)簽的type屬性是什么，同時(shí)也可以對(duì)其進(jìn)行修改；
如下代碼：（顯示密碼和隱藏密碼）
<span>輸入密碼：</span>
<input type="password">
<button>顯示密碼</button>
<script>
let input = document.querySelector('input');
let button = document.querySelector('button');
button.onclick = function() {
if(input.type == 'password') {
input.type = 'text';
button.innerHTML = '隱藏密碼';
}else if(input.type == 'text') {
input.type = 'password';
button.innerHTML = '顯示密碼';
}else {
alert('類(lèi)型錯(cuò)誤!')
}
}
</script>四、樣式屬性的修改和獲取
4.1 fontSize行內(nèi)樣式操作
CSS中的元素屬性，都可以通過(guò)JS進(jìn)行修改，通過(guò) 元素.style.屬性 即可得到style的屬性，例如fontSize，這個(gè)屬性名和CSS中的樣式名是對(duì)應(yīng)的，但是CSS里使用脊柱命名，js中是使用小駝峰命名，于是CSS中的font-size就可以認(rèn)為等價(jià)于fontSize；
如下代碼：點(diǎn)擊字體，開(kāi)始變大
<h2 style="font-size: 30px;">點(diǎn)擊我可以變大</h2>
<script>
let h2 = document.querySelector('h2');
h2.onclick = function() {
let oldSize = h2.style.fontSize;
oldSize = parseInt(oldSize);
oldSize += 10;
//設(shè)置樣式的值的時(shí)候一定要帶上單位!
h2.style.fontSize = oldSize + 'px';
}
</script>4.2 類(lèi)名樣式操作
CSS開(kāi)發(fā)中最常用的是通過(guò)類(lèi)選擇器進(jìn)行選擇，通過(guò)修改class屬性，實(shí)現(xiàn)修改樣式的效果，而在JS中通過(guò) 元素.className 的方式獲得屬性，因?yàn)樵?JS中class是一個(gè)關(guān)鍵字，于是就用className來(lái)表示這個(gè)類(lèi)屬性了~
如下代碼：（白天模式and夜間模式）
<style>
/*白天模式*/
.light {
color: black;
background-color: white;
}
/*夜間模式*/
.night {
color: aliceblue;
background-color: black;
}
/*將div鋪滿整個(gè)網(wǎng)頁(yè)*/
/*html鋪滿其父類(lèi)——整個(gè)瀏覽器*/
html {
height: 100%;
}
/*body鋪滿其父類(lèi)html*/
body {
height: 100%;
}
/*div鋪滿其父類(lèi)body*/
div {
height: 100%;
}
</style>
<div class="light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae maiores maxime corrupti quaerat blanditiis laudantium odio. Quo totam temporibus quia earum enim. Doloremque ipsam sed debitis quod soluta, ea necessitatibus?
</div>
<script>
let div = document.querySelector('div');
div.onclick = function() {
if(div.className == 'light') {
div.className = 'night';
}else {
div.className = 'light';
}
}
</script>五、操作節(jié)點(diǎn)
5.1、新增節(jié)點(diǎn)
分為兩個(gè)步驟：
第一步：創(chuàng)建元素結(jié)點(diǎn)（如下代碼）
<body>
<script>
let div = document.createElement('div');
div.id = 'mydiv';//設(shè)置id屬性
div.className = 'divName';//設(shè)置class屬性
div.innerHTML = '好久不見(jiàn)你還好嗎？';
console.log(div);
</script>
</body>解釋?zhuān)?/p>
此時(shí)瀏覽器上并不會(huì)有顯示，只是創(chuàng)建出了一個(gè)新的div結(jié)點(diǎn)并填充了屬性；通過(guò)寫(xiě)下console.log(div)，可以在瀏覽器的控制臺(tái)里觀察到此標(biāo)簽；（下如圖）
第二步：把元素結(jié)點(diǎn)插入到dom樹(shù)中；（有兩種方法）
方法一：通過(guò)appendChild 或者 append將結(jié)點(diǎn)插入到指定結(jié)點(diǎn)的最后一個(gè)孩子結(jié)點(diǎn)的后面（如下代碼）
<body>
<div class="target">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<script>
let div = document.createElement('div');
div.id = 'mydiv';//設(shè)置id屬性
div.className = 'divName';//設(shè)置class屬性
div.innerHTML = '好久不見(jiàn)你還好嗎？';
console.log(div);
let target = document.querySelector('.target');
target.appendChild(div);//這里也可以使用append達(dá)到同樣的效果
</script>
</body>效果如下：（瀏覽器頁(yè)面）
效果如下：（瀏覽器控制臺(tái)）
方法二：使用 insertBefore(要插入的結(jié)點(diǎn)，要插入的位置) 將節(jié)點(diǎn)插入到指定的節(jié)點(diǎn)位置（如下代碼，插入到下標(biāo)為1的位置；“注意：下標(biāo)從0開(kāi)始”）
<body>
<div class="target">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<script>
let div = document.createElement('div');
div.id = 'mydiv';//設(shè)置id屬性
div.className = 'divName';//設(shè)置class屬性
div.innerHTML = '好久不見(jiàn)你還好嗎？';
console.log(div);
let target = document.querySelector('.target');
target.insertBefore(div, target.children[1]);//表示插入到第1個(gè)孩子結(jié)點(diǎn)的位置（下標(biāo)從0開(kāi)始）
</script>
</body>效果如下：（瀏覽器頁(yè)面）
效果如下：（瀏覽器控制臺(tái)）
5.2、刪除結(jié)點(diǎn)
使用 removeChild 刪除子節(jié)點(diǎn)
如下代碼：
<div id="top">
<div>1</div>
<div id="nested">我是要被刪除的結(jié)點(diǎn)</div>
<div>2</div>
</div>
<script>
let d = document.getElementById("top");
let nested = document.getElementById("nested");
let throwawayNode = d.removeChild(nested);
</script>注意：
- 返回值為該被刪除節(jié)點(diǎn)；
- 被刪除節(jié)點(diǎn)只是從 dom 樹(shù)被刪除了, 但是仍然在內(nèi)存中, 可以隨時(shí)加入到 dom 樹(shù)的其他位置；
補(bǔ)充：
document.querySelector函數(shù)用法
document.querySelector 是一個(gè) JavaScript 函數(shù)，它允許你通過(guò)提供一個(gè) CSS 選擇器來(lái)選擇文檔中的第一個(gè)匹配的元素。這個(gè)函數(shù)返回匹配的元素（如果找到了匹配項(xiàng)），否則返回 null。document.querySelector 是一個(gè)非常有用的方法，因?yàn)樗屇憧梢酝ㄟ^(guò)多種選擇器輕松地選擇和操作 DOM 元素。
函數(shù)的用法如下：
const element = document.querySelector(selector);
其中，selector 是一個(gè)包含 CSS 選擇器的字符串，用于查找和選擇元素。
以下是一些使用 document.querySelector 的示例：
1.通過(guò)標(biāo)簽名選擇元素：
const firstParagraph = document.querySelector('p');這將選擇文檔中的第一個(gè) <p> 元素。
2.通過(guò)類(lèi)名選擇元素：
const firstElementWithClass = document.querySelector('.my-class');這將選擇文檔中具有 my-class 類(lèi)名的第一個(gè)元素。
3.通過(guò) ID 選擇元素：
const elementWithId = document.querySelector('#my-id');這將選擇具有 my-id ID 的元素。
4.通過(guò)屬性選擇器選擇元素：
const firstInputElement = document.querySelector('input[type="text"]');這將選擇文檔中第一個(gè)類(lèi)型為 text 的 <input> 元素。
5.通過(guò)復(fù)合選擇器選擇元素：
const firstElement = document.querySelector('.my-class.another-class');這將選擇文檔中具有 my-class 和 another-class 類(lèi)名的第一個(gè)元素。
請(qǐng)注意，document.querySelector 只返回第一個(gè)匹配的元素。如果你想選擇文檔中的所有匹配的元素，可以使用 document.querySelectorAll 函數(shù)。這個(gè)函數(shù)返回一個(gè)包含所有匹配元素的 NodeList。
const allElementsWithClass = document.querySelectorAll('.my-class');到此這篇關(guān)于JavaScript基于querySelector / querySelectorAll對(duì)元素的操作，為你的DOM API基礎(chǔ)掃盲~的文章就介紹到這了,更多相關(guān)js querySelector / querySelectorAll元素操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript圖片懶加載的優(yōu)化方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
Bootstrap提供了四種用于<img>類(lèi)的樣式，在本文給大家詳細(xì)介紹，需要的朋友可以參考下2016-12-12
微信小程序pinker組件使用實(shí)現(xiàn)自動(dòng)相減日期
這篇文章主要介紹了微信小程序pinker組件使用實(shí)現(xiàn)自動(dòng)相減日期,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
js實(shí)現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作
這篇文章主要介紹了js實(shí)現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了微信小程序 button 的樣式設(shè)置為圖片的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
checkbox全選所涉及到的知識(shí)點(diǎn)介紹
checkbox全選涉及到的知識(shí)點(diǎn)比如IE里起作用，火狐不起作用，getElementById()與getElementsByName()的區(qū)別等等2013-12-12
JavaScript中if、else?if、else和switch的語(yǔ)法、用法及注意事項(xiàng)
這篇文章主要介紹了JavaScript中的條件判斷語(yǔ)句,包括if、elseif、else和switch的基本語(yǔ)法、用法及注意事項(xiàng),通過(guò)這些語(yǔ)句,可以根據(jù)不同的條件執(zhí)行相應(yīng)的代碼塊,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
JavaScript偏函數(shù)與柯里化實(shí)例詳解
這篇文章主要介紹了JavaScript偏函數(shù)與柯里化,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript偏函數(shù)與柯里化的概念、原理、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
這篇文章主要介紹了ES6中Math對(duì)象新增的方法,結(jié)合實(shí)例形式詳細(xì)分析了ES6中Math對(duì)象的各種常用數(shù)學(xué)函數(shù)與新增方法相關(guān)使用技巧,需要的朋友可以參考下2017-04-04
OkHttp踩坑隨筆為何 response.body().string() 只能調(diào)用一次
想必大家都用過(guò)或接觸過(guò) OkHttp，我最近在使用 Okhttp 時(shí)，就踩到一個(gè)坑，在這兒分享出來(lái)，以后大家遇到類(lèi)似問(wèn)題時(shí)就可以繞過(guò)去2018-01-01