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