JavaScript中HTML元素操作的實(shí)現(xiàn)
一、獲取操作的元素
??document對(duì)象的方法和屬性
document對(duì)象提供了一些用于查找元素的方法，利用這些方法可以根據(jù)元素的id、name和class屬性以及標(biāo)簽名稱的方式獲取操作的元素。
??總結(jié)
除了document.getElementById()方法返回的是擁有指定id的元素外，其他方法返回的都是符合要求的一個(gè)集合。若要獲取其中一個(gè)對(duì)象，可以通過下標(biāo)的方式獲取，默認(rèn)從0開始。
document對(duì)象提供一些屬性，可用于獲取文檔中的元素。例如，獲取所有表單標(biāo)簽、圖片標(biāo)簽等。
- document對(duì)象的body屬性用于返回body元素。
- document對(duì)象的documentElement屬性用于返回HTML文檔的根節(jié)點(diǎn)html元素。
??注意
通過document對(duì)象的方法與document對(duì)象的屬性獲取的操作元素表示的都是同一對(duì)象。如document.getElementsByTagName(‘body’)[0]與document.body全等。
?HTML5新增的document對(duì)象方法
HTML5中為更方便獲取操作的元素，為document對(duì)象新增了兩個(gè)方法，分別為querySelector()和querySelectorAll()。
- querySelector()方法用于返回文檔中匹配到指定的元素或CSS選擇器的第1個(gè)對(duì)象的引用。
- querySelectorAll()方法用于返回文檔中匹配到指定的元素或CSS選擇器的對(duì)象集合。
由于這兩個(gè)方法的使用方式相同，下面以document.querySelector()方法為例演示。
?? Element對(duì)象的方法和屬性
在DOM操作中，元素對(duì)象也提供了獲取某個(gè)元素內(nèi)指定元素的方法，常用的兩個(gè)方法分別為getElementsByClassName()和getElementsByTagName()。它們的使用方式與document對(duì)象中同名方法相同。
除此之外，元素對(duì)象還提供了children屬性用來獲取指定元素的子元素。例如，獲取上述示例中ul的子元素。
- 元素對(duì)象的children屬性返回的也是對(duì)象集合，若要獲取其中一個(gè)對(duì)象，也需通過下標(biāo)的方式獲取，默認(rèn)從0開始。
- 另外，document對(duì)象中也有children屬性，它的第一個(gè)子元素通常是html元素。
?HTMLCollection對(duì)象
- HTMLCollection對(duì)象：通過document對(duì)象或Element對(duì)象調(diào)用getElementsByClassName()方法、getElementsByTagName()方法、children屬性等返回的對(duì)象集。
- NodeList對(duì)象：document對(duì)象調(diào)用getElementsByName()方法在Chrome和FireFox瀏覽器中返回的是NodeList對(duì)象，IE11返回的是HTMLCollection對(duì)象。
?HTMLCollection與NodeList對(duì)象的區(qū)別：
- HTMLCollection對(duì)象用于元素操作。
- NodeList對(duì)象用于節(jié)點(diǎn)操作。
提示：對(duì)于getElementsByClassName()方法、getElementsByTagName()方法和children屬性返回的集合中可以將id和name自動(dòng)轉(zhuǎn)換為一個(gè)屬性。
二、元素內(nèi)容
JavaScript中，若要對(duì)獲取的元素內(nèi)容進(jìn)行操作，則可以利用DOM提供的屬性和方法實(shí)現(xiàn)。
- 屬性屬于Element對(duì)象，方法屬于document對(duì)象。
- innerHTML在使用時(shí)會(huì)保持編寫的格式以及標(biāo)簽樣式。
- innerText則是去掉所有格式以及標(biāo)簽的純文本內(nèi)容。
- textContent屬性在去掉標(biāo)簽后會(huì)保留文本格式。
舉個(gè)例子
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素內(nèi)容操作</title>
</head>
<body>
<div id="box">
The first paragraph...
<p>
The second paragraph...
<a rel="external nofollow" >third</a>
</p>
</div>
<script>
var box = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</script>
</body>
</html>??注意
innerText屬性在使用時(shí)可能會(huì)出現(xiàn)瀏覽器兼容的問題。因此，推薦在
開發(fā)時(shí)盡可能的使用innerHTML獲取或設(shè)置元素的文本內(nèi)容。同時(shí)，innerHTML屬性和document.write()方法在設(shè)置內(nèi)容時(shí)有一定的區(qū)別，前者作用于指定的元素，后者則是重構(gòu)整個(gè)HTML文檔頁面。因此，讀者在開發(fā)中要根據(jù)實(shí)際的需要選擇合適的實(shí)現(xiàn)方式
【案例】改變盒子大小
代碼實(shí)現(xiàn)思路：
① 編寫HTML，設(shè)置div的大小。
② 根據(jù)用戶的點(diǎn)擊次數(shù)完成盒子大小的改變。
③ 單擊的次數(shù)為奇數(shù)時(shí)，盒子都變大，單擊次數(shù)為偶數(shù)時(shí)，盒子都變小。
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.box {
width:50px;
height:50px;
background:#eee;
margin:0 auto;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
var box = document.getElementById('box');
var i = 0;
// 保存用戶單擊盒子的次數(shù)
box.onclick = function() {
// 處理盒子的單擊事件
++i;
if (i % 2) {
// 單擊次數(shù)為奇數(shù)，變大
this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = '大';
}
else {
// 單擊次數(shù)為偶數(shù)，變小
this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = '小';
}
};
</script>
</body>
</html>三、元素屬性
在DOM中，為了方便JavaScript獲取、修改和遍歷指定HTML元素的相關(guān)屬性，提供了操作的屬性和方法。
利用attributes屬性可以獲取一個(gè)HTML元素的所有屬性，以及所有屬性的個(gè)數(shù)length。
舉個(gè)例子
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素屬性操作</title>
<style>
.gray {
background: #CCC;
}
#thick {
font-weight: bolder;
}
</style>
</head>
<body>
<div>test word.</div>
<script>
// 獲取div元素
var ele = document.getElementsByTagName('div')[0];
// ① 輸出當(dāng)前ele的屬性個(gè)數(shù)
console.log('未操作前屬性個(gè)數(shù)：' + ele.attributes.length);
// ② 為ele添加屬性，并查看屬性個(gè)數(shù)
ele.setAttribute('align', 'center');
ele.setAttribute('title', '測(cè)試文字');
ele.setAttribute('class', 'gray');
ele.setAttribute('id', 'thick');
ele.setAttribute('style', 'font-size:24px;
border:1px solid green;
');
console.log('添加屬性后的屬性個(gè)數(shù)：' + ele.attributes.length);
// ③ 獲取ele的style屬性值
console.log('獲取style屬性值：' + ele.getAttribute('style'));
// ④ 刪除ele的style屬性，并查看剩余屬性情況
ele.removeAttribute('style');
console.log('查看所有屬性：');
for (var i = 0;
i < ele.attributes.length;
++i) {
console.log(ele.attributes[i]);
}
</script>
</body>
</html>四、元素樣式
回顧：通過元素屬性的操作修改樣式。
元素樣式語法：style.屬性名稱。
要求：需要去掉CSS樣式名里的中橫線“-”，并將第二個(gè)英文首字母大寫。
舉例：設(shè)置背景顏色的background-color，在style屬性操作中，需要修改為backgroundColor。
??注意
CSS中的float樣式與JavaScript的保留字沖突，在解決方案上不同的瀏覽器
存在分歧。例如IE9——11、Chrome、FireFox可以使用“float”和“cssFloat”，Safari瀏覽器使用“float”，IE6~8則使用“styleFloat”。
??問題：一個(gè)元素的類選擇器可以有多個(gè)，在開發(fā)中如何對(duì)選擇器列表進(jìn)行操作？
原來的解決方案：利用元素對(duì)象的className屬性獲取，獲取的結(jié)果是字符型，然后再根據(jù)實(shí)際情況對(duì)字符串進(jìn)行處理。
HTML5提供的辦法：新增的classList（只讀）元素的類選擇器列表。
舉例：若一個(gè)div元素的class值為“box header navlist title”，如何刪除header？
HTML5解決方案：div元素對(duì)象.classList.toggle(“header”);
舉個(gè)例子
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>classList的使用</title>
<style>
.bg {
background:#ccc;
}
.strong {
font-size:24px;
color:red;
}
.smooth {
height:30px;
width:120px;
border-radius:10px;
}
</style>
</head>
<body>
<ul>
<li>PHP</li>
<li class="bg">JavaScript</li>
<li>C++</li>
<li>Java</li>
</ul>
<script> // 獲取第2個(gè)li元素 var ele = document.getElementsByTagName('li')[1];
// 若li元素中沒有strong類，則添加 if (!ele.classList.contains('strong')) {
ele.classList.add('strong');
}
// 若li元素中沒有smooth類，則添加；若有刪除 ele.classList.toggle('smooth');
console.log('添加與切換樣式后：');
console.log(ele);
</script>
<script>
ele.classList.remove('bg');
console.log('刪除后：');
console.log(ele);
</script>
</body>
</html>除此之外，classList屬性還提供了許多其他相關(guān)操作的方法和屬性。
五、【案例】標(biāo)簽欄切換效果
代碼實(shí)現(xiàn)思路：
① 編寫HTML，實(shí)現(xiàn)標(biāo)簽欄的結(jié)構(gòu)與樣式的設(shè)計(jì)，其中class等于current表示當(dāng)前顯示的標(biāo)簽，默認(rèn)是第一個(gè)標(biāo)簽。
② 獲取所有的標(biāo)簽與標(biāo)簽對(duì)應(yīng)的顯示內(nèi)容。
③ 遍歷并為每個(gè)標(biāo)簽添加鼠標(biāo)滑過事件，在事件的處理函數(shù)中，遍歷標(biāo)簽對(duì)應(yīng)的所有顯示內(nèi)容，當(dāng)鼠標(biāo)滑過標(biāo)簽時(shí)，通過classList的add()方法添加current，否則通過remove()方法移出current。
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標(biāo)簽欄切換效果</title>
<style>
.tab-box {
width:383px;
margin:10px;
border:1px solid #ccc;
border-top:2px solid #206F96;
}
.tab-head {
height:31px;
}
.tab-head-div {
width:95px;
height:30px;
float:left;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
background:#206F96;
line-height:30px;
text-align:center;
cursor:pointer;
color:#fff;
}
.tab-head .current {
background:#fff;
border-bottom:1px solid #fff;
color:#000;
}
.tab-head-r {
border-right:0;
}
.tab-body-div {
display:none;
margin:20px 10px;
}
.tab-body .current {
display:block;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="tab-head">
<div class="tab-head-div current">標(biāo)簽一</div>
<div class="tab-head-div">標(biāo)簽二</div>
<div class="tab-head-div">標(biāo)簽三</div>
<div class="tab-head-div tab-head-r">標(biāo)簽四</div>
</div>
<!--jkdjfk?-->
<div class="tab-body">
<div class="tab-body-div current"> 1 </div>
<div class="tab-body-div"> 2 </div>
<div class="tab-body-div"> 3 </div>
<div class="tab-body-div"> 4 </div>
</div>
</div>
<script>
// 獲取標(biāo)簽欄的所有標(biāo)簽元素對(duì)象
var tabs = document.getElementsByClassName('tab-head-div');
// 獲取標(biāo)簽欄的所有內(nèi)容對(duì)象
var divs = document.getElementsByClassName('tab-body-div');
for (var i = 0;
i < tabs.length;
++i) {
// 遍歷標(biāo)簽部分的元素對(duì)象
tabs[i].onmouseover = function() {
// 為標(biāo)簽元素對(duì)象添加鼠標(biāo)滑過事件
for (var i = 0;
i < divs.length;
++i) {
// 遍歷標(biāo)簽欄的內(nèi)容元素對(duì)象
if (tabs[i] == this) {
// 顯示當(dāng)前鼠標(biāo)滑過的li元素
divs[i].classList.add('current');
tabs[i].classList.add('current');
}
else {
// 隱藏其他li元素
divs[i].classList.remove('current');
tabs[i].classList.remove('current');
}
}
}
;
}
</script>
</body>
</html>到此這篇關(guān)于JavaScript中HTML元素操作的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JavaScript HTML元素操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹HashMap 和 HashSet的區(qū)別，這里整理了詳細(xì)的資料來說名兩者的區(qū)別，并說明如何使用該方法，有需要的小伙伴可以參考下2016-09-09
SpringBoot整合Druid實(shí)現(xiàn)SQL監(jiān)控和數(shù)據(jù)庫密碼加密
Druid連接池是阿里巴巴開源的數(shù)據(jù)庫連接池項(xiàng)目,Druid連接池為監(jiān)控而生,內(nèi)置強(qiáng)大的監(jiān)控功能,監(jiān)控特性不影響性能,本文給大家介紹了SpringBoot整合Druid實(shí)現(xiàn)SQL監(jiān)控和數(shù)據(jù)庫密碼加密,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06
通過實(shí)例了解java checked和unchecked異常
這篇文章主要介紹了通過實(shí)例了解checked和unchecked異常，Java異常分為兩種類型，checked異常和unchecked異常，另一種叫法是異常和錯(cuò)誤。下面小編就帶大家來一起學(xué)習(xí)一下吧2019-06-06
Java Process與Runtime()的使用及調(diào)用cmd命令阻塞的解決方案
這篇文章主要介紹了Java Process與Runtime()的使用及調(diào)用cmd命令阻塞的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
Spring Boot之AOP配自定義注解的最佳實(shí)踐過程
這篇文章主要給大家介紹了關(guān)于Spring Boot之AOP配自定義注解的最佳實(shí)踐過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
java中struts2實(shí)現(xiàn)文件上傳下載功能實(shí)例解析
這篇文章主要介紹了java中struts2實(shí)現(xiàn)文件上傳下載功能的方法,以實(shí)例形式較為詳細(xì)的分析了struts2實(shí)現(xiàn)文件上傳下載功能的具體實(shí)現(xiàn)技巧與相關(guān)問題的解決方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
一篇文章帶你入門java算術(shù)運(yùn)算符(加減乘除余,字符連接)
這篇文章主要介紹了Java基本數(shù)據(jù)類型和運(yùn)算符,結(jié)合實(shí)例形式詳細(xì)分析了java基本數(shù)據(jù)類型、數(shù)據(jù)類型轉(zhuǎn)換、算術(shù)運(yùn)算符、邏輯運(yùn)算符等相關(guān)原理與操作技巧,需要的朋友可以參考下2021-08-08
基于Java網(wǎng)絡(luò)編程和多線程的多對(duì)多聊天系統(tǒng)
這篇文章主要介紹了基于Java網(wǎng)絡(luò)編程和多線程的多對(duì)多聊天系統(tǒng),文中有非常詳細(xì)的代碼示例,對(duì)正在學(xué)習(xí)java網(wǎng)絡(luò)編程的小伙伴們有非常好的幫助,需要的朋友可以參考下2021-04-04
這篇文章介紹了二進(jìn)制中1的個(gè)數(shù)，有需要的朋友可以參考一下2013-09-09
這篇文章主要介紹了java對(duì)double數(shù)組排序示例，代碼簡(jiǎn)單，下面我們直接上代碼,需要的朋友可以參考下2014-03-03