JavaScript基于querySelector?/?querySelectorAll對元素的操作(DOM?API掃盲)
一、通過querySelector / querySelectorAll獲取元素
瀏覽器提供的一個全局對象，類似于CSS中的選擇器，可以精準的獲取元素對象，這組API都來自于document下，document是瀏覽器提供的一個全局對象，表示當前頁面DOM API基本都是documet對象的方法；
1.1 單個標簽選中
對于單個標簽元素的獲取，使用querySelector，即可；
如下代碼：
<div class="hello" id="hi">你好</div>
<script>
let div = document.querySelector('div');
console.log(div);
</script>這時候就打開瀏覽器按下F12，選中控制臺，就可以發(fā)現(xiàn)，剛剛獲取的div元素結(jié)果都獲取到了；（如下圖）
1.2 多個標簽選中
querySelector只是獲取單個元素標簽，當出現(xiàn)多個相同的元素標簽時，只會選中第一個；如果想把多個元素都獲取到，可以使用querySelectorAll來完成操作，這個時候返回值就是一個數(shù)組，每個元素是一個對象；
如下代碼：
<div class="hello" id="hi">你好</div>
<div class="word">世界</div>
<div class="China">中國</div>
<script>
let divs = document.querySelectorAll('div');
console.log(divs);
</script>打開瀏覽器按下F12，選中控制臺就可以發(fā)現(xiàn)：（如下圖）
二、基于這組DOM API，對元素進行操作
2.1 innerHTML獲取/修改元素內(nèi)容
通過innerHTML獲取的是標簽內(nèi)部的子元素內(nèi)容，所以只適用于雙標簽，單標簽不可以的
獲取元素并修改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獲取/修改元素屬性
通過querySelector / querySelectorAll對元素對象的獲取，可以通過此對象對標簽屬性的修改，修改的就是標簽中寫的鍵值對；
如下代碼：點擊空的a標簽，修改href；（不光是這個栗子，其他所有標簽的屬性也是通過類似的方法進行操作）
<a href="#" rel="external nofollow" >點我跳轉(zhuǎn)百度</a>
<script>
let a = document.querySelector('a');
a.onclick = function() {
a.;
}
</script>三、單標簽元素屬性的獲取和修改
3.1 value
通過value獲取單標簽元素的內(nèi)容，例如input的標簽中，value表示了輸入框的內(nèi)容，修改他，瀏覽器上的樣式也會跟著修改；
如下代碼：點擊計數(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類型，否則就是字符串
let oldValue = parseInt(input.value);
oldValue = parseInt(oldValue + 1);
input.value = oldValue;
}
sub.onclick = function() {
//這里注意需要轉(zhuǎn)化為int類型，否則就是字符串
let oldValue = parseInt(input.value);
oldValue = parseInt(oldValue - 1);
input.value = oldValue;
}
</script>3.2checked
checked表示了當前復(fù)選框的狀態(tài)——被選中或者未被選中；
如下代碼：（單選和全選）
<span>你有什么愛好？</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');//返回一個數(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
表示了當前單標簽的type屬性是什么，同時也可以對其進行修改；
如下代碼：（顯示密碼和隱藏密碼）
<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('類型錯誤!')
}
}
</script>四、樣式屬性的修改和獲取
4.1 fontSize行內(nèi)樣式操作
CSS中的元素屬性，都可以通過JS進行修改，通過 元素.style.屬性 即可得到style的屬性，例如fontSize，這個屬性名和CSS中的樣式名是對應(yīng)的，但是CSS里使用脊柱命名，js中是使用小駝峰命名，于是CSS中的font-size就可以認為等價于fontSize；
如下代碼：點擊字體，開始變大
<h2 style="font-size: 30px;">點擊我可以變大</h2>
<script>
let h2 = document.querySelector('h2');
h2.onclick = function() {
let oldSize = h2.style.fontSize;
oldSize = parseInt(oldSize);
oldSize += 10;
//設(shè)置樣式的值的時候一定要帶上單位!
h2.style.fontSize = oldSize + 'px';
}
</script>4.2 類名樣式操作
CSS開發(fā)中最常用的是通過類選擇器進行選擇，通過修改class屬性，實現(xiàn)修改樣式的效果，而在JS中通過 元素.className 的方式獲得屬性，因為在 JS中class是一個關(guān)鍵字，于是就用className來表示這個類屬性了~
如下代碼：（白天模式and夜間模式）
<style>
/*白天模式*/
.light {
color: black;
background-color: white;
}
/*夜間模式*/
.night {
color: aliceblue;
background-color: black;
}
/*將div鋪滿整個網(wǎng)頁*/
/*html鋪滿其父類——整個瀏覽器*/
html {
height: 100%;
}
/*body鋪滿其父類html*/
body {
height: 100%;
}
/*div鋪滿其父類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é)點
5.1、新增節(jié)點
分為兩個步驟：
第一步：創(chuàng)建元素結(jié)點（如下代碼）
<body>
<script>
let div = document.createElement('div');
div.id = 'mydiv';//設(shè)置id屬性
div.className = 'divName';//設(shè)置class屬性
div.innerHTML = '好久不見你還好嗎？';
console.log(div);
</script>
</body>解釋：
此時瀏覽器上并不會有顯示，只是創(chuàng)建出了一個新的div結(jié)點并填充了屬性；通過寫下console.log(div)，可以在瀏覽器的控制臺里觀察到此標簽；（下如圖）
第二步：把元素結(jié)點插入到dom樹中；（有兩種方法）
方法一：通過appendChild 或者 append將結(jié)點插入到指定結(jié)點的最后一個孩子結(jié)點的后面（如下代碼）
<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 = '好久不見你還好嗎？';
console.log(div);
let target = document.querySelector('.target');
target.appendChild(div);//這里也可以使用append達到同樣的效果
</script>
</body>效果如下：（瀏覽器頁面）
效果如下：（瀏覽器控制臺）
方法二：使用 insertBefore(要插入的結(jié)點，要插入的位置) 將節(jié)點插入到指定的節(jié)點位置（如下代碼，插入到下標為1的位置；“注意：下標從0開始”）
<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 = '好久不見你還好嗎？';
console.log(div);
let target = document.querySelector('.target');
target.insertBefore(div, target.children[1]);//表示插入到第1個孩子結(jié)點的位置（下標從0開始）
</script>
</body>效果如下：（瀏覽器頁面）
效果如下：（瀏覽器控制臺）
5.2、刪除結(jié)點
使用 removeChild 刪除子節(jié)點
如下代碼：
<div id="top">
<div>1</div>
<div id="nested">我是要被刪除的結(jié)點</div>
<div>2</div>
</div>
<script>
let d = document.getElementById("top");
let nested = document.getElementById("nested");
let throwawayNode = d.removeChild(nested);
</script>注意：
- 返回值為該被刪除節(jié)點；
- 被刪除節(jié)點只是從 dom 樹被刪除了, 但是仍然在內(nèi)存中, 可以隨時加入到 dom 樹的其他位置；
補充：
document.querySelector函數(shù)用法
document.querySelector 是一個 JavaScript 函數(shù)，它允許你通過提供一個 CSS 選擇器來選擇文檔中的第一個匹配的元素。這個函數(shù)返回匹配的元素（如果找到了匹配項），否則返回 null。document.querySelector 是一個非常有用的方法，因為它讓你可以通過多種選擇器輕松地選擇和操作 DOM 元素。
函數(shù)的用法如下：
const element = document.querySelector(selector);
其中，selector 是一個包含 CSS 選擇器的字符串，用于查找和選擇元素。
以下是一些使用 document.querySelector 的示例：
1.通過標簽名選擇元素：
const firstParagraph = document.querySelector('p');這將選擇文檔中的第一個 <p> 元素。
2.通過類名選擇元素：
const firstElementWithClass = document.querySelector('.my-class');這將選擇文檔中具有 my-class 類名的第一個元素。
3.通過 ID 選擇元素：
const elementWithId = document.querySelector('#my-id');這將選擇具有 my-id ID 的元素。
4.通過屬性選擇器選擇元素：
const firstInputElement = document.querySelector('input[type="text"]');這將選擇文檔中第一個類型為 text 的 <input> 元素。
5.通過復(fù)合選擇器選擇元素：
const firstElement = document.querySelector('.my-class.another-class');這將選擇文檔中具有 my-class 和 another-class 類名的第一個元素。
請注意，document.querySelector 只返回第一個匹配的元素。如果你想選擇文檔中的所有匹配的元素，可以使用 document.querySelectorAll 函數(shù)。這個函數(shù)返回一個包含所有匹配元素的 NodeList。
const allElementsWithClass = document.querySelectorAll('.my-class');到此這篇關(guān)于JavaScript基于querySelector / querySelectorAll對元素的操作，為你的DOM API基礎(chǔ)掃盲~的文章就介紹到這了,更多相關(guān)js querySelector / querySelectorAll元素操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
原生JavaScript實現(xiàn)remove()和recover()功能示例
這篇文章主要介紹了原生JavaScript實現(xiàn)remove()和recover()功能,結(jié)合實例形式分析了javascript實現(xiàn)類似jQueryremove()和recover()功能的自定義函數(shù),需要的朋友可以參考下2018-07-07
ie8本地圖片上傳預(yù)覽出現(xiàn)問題是因為限制瀏覽器造訪本地文件，所以用到濾鏡和div，下面有個不錯的示例，希望對大家有所幫助2014-01-01
本篇文章主要介紹了JS幾種變量交換方式以及性能分析對比，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
下面小編就為大家?guī)硪黄褂肑S實現(xiàn)圖片展示瀑布流效果(簡單實例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片懶加載效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
js replace與正則表達式結(jié)合，可以有效發(fā)揮replace的功效，可以幫助用戶解決替換中的復(fù)制問題，接下來詳細介紹使用方法，感興趣的朋友可以了解下2013-01-01
基于JavaScript實現(xiàn)文件共享型網(wǎng)站
Any?Share?是一種簡單、輕量、快速的文件共享服務(wù)。使用?Javascript?編寫，并搭建在?Firebase?平臺。本文將利用它實現(xiàn)創(chuàng)建文件共享型網(wǎng)站，感興趣的可以了解一下2022-11-11
promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較
這篇文章主要介紹了promise和co搭配生成器函數(shù)方式解決js代碼異步流程的比較，在es6中引入的原生Promise為js的異步回調(diào)問題帶來了一個新的解決方式co模塊搭配Generator函數(shù)的同步寫法，更是將js的異步回調(diào)帶了更優(yōu)雅的寫法。感興趣的小伙伴們可以參考一下2018-05-05
一文吃透JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理(增刪改查)
在開發(fā)后臺管理系統(tǒng)時，常常會涉及到各種樹狀結(jié)構(gòu)的數(shù)據(jù)處理邏輯，例如：增，刪，改，查等。而樹狀結(jié)構(gòu)的處理就沒有數(shù)組那么的直觀。本文為大家總結(jié)了JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理的方法，需要的可以參考下2022-07-07
這篇文章主要介紹了JS圖片預(yù)加載三種實現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05