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)文章
原生JavaScript實(shí)現(xiàn)remove()和recover()功能示例
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)remove()和recover()功能,結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)類(lèi)似jQueryremove()和recover()功能的自定義函數(shù),需要的朋友可以參考下2018-07-07
ie8本地圖片上傳預(yù)覽出現(xiàn)問(wèn)題是因?yàn)橄拗茷g覽器造訪本地文件，所以用到濾鏡和div，下面有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助2014-01-01
本篇文章主要介紹了JS幾種變量交換方式以及性能分析對(duì)比，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-11-11
使用JS實(shí)現(xiàn)圖片展示瀑布流效果(簡(jiǎn)單實(shí)例)
下面小編就為大家?guī)?lái)一篇使用JS實(shí)現(xiàn)圖片展示瀑布流效果(簡(jiǎn)單實(shí)例)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片懶加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
js replace正則表達(dá)式應(yīng)用案例講解
js replace與正則表達(dá)式結(jié)合，可以有效發(fā)揮replace的功效，可以幫助用戶(hù)解決替換中的復(fù)制問(wèn)題，接下來(lái)詳細(xì)介紹使用方法，感興趣的朋友可以了解下2013-01-01
基于JavaScript實(shí)現(xiàn)文件共享型網(wǎng)站
Any?Share?是一種簡(jiǎn)單、輕量、快速的文件共享服務(wù)。使用?Javascript?編寫(xiě)，并搭建在?Firebase?平臺(tái)。本文將利用它實(shí)現(xiàn)創(chuàng)建文件共享型網(wǎng)站，感興趣的可以了解一下2022-11-11
promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較
這篇文章主要介紹了promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較，在es6中引入的原生Promise為js的異步回調(diào)問(wèn)題帶來(lái)了一個(gè)新的解決方式co模塊搭配Generator函數(shù)的同步寫(xiě)法，更是將js的異步回調(diào)帶了更優(yōu)雅的寫(xiě)法。感興趣的小伙伴們可以參考一下2018-05-05
一文吃透JS樹(shù)狀結(jié)構(gòu)的數(shù)據(jù)處理(增刪改查)
在開(kāi)發(fā)后臺(tái)管理系統(tǒng)時(shí)，常常會(huì)涉及到各種樹(shù)狀結(jié)構(gòu)的數(shù)據(jù)處理邏輯，例如：增，刪，改，查等。而樹(shù)狀結(jié)構(gòu)的處理就沒(méi)有數(shù)組那么的直觀。本文為大家總結(jié)了JS樹(shù)狀結(jié)構(gòu)的數(shù)據(jù)處理的方法，需要的可以參考下2022-07-07
JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析
這篇文章主要介紹了JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05