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)文章
解析mybatis-plus中的resultMap簡(jiǎn)單使用
mybatis-plus也只是聽過，可是終究沒有使用過。于是自己花幾天晚上的時(shí)間研究mybatis-plus的使用。這篇文章主要介紹了mybatis-plus的resultMap簡(jiǎn)單使用,需要的朋友可以參考下2021-11-11
自定義注解SpringBoot防重復(fù)提交AOP方法詳解
該文章描述了一個(gè)防止重復(fù)提交的流程,通過HttpServletRequest對(duì)象獲取請(qǐng)求信息,生成唯一標(biāo)識(shí),使用Redis分布式鎖判斷請(qǐng)求是否重復(fù)提交,并通過自定義注解和切面實(shí)現(xiàn)2025-12-12
在本篇文章里小編給大家整理的是關(guān)于JavaWeb中文編碼問題方法的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了Java遺傳算法，本文對(duì)基因的編碼采用二進(jìn)制規(guī)則，分享了對(duì)Java遺傳算法的理解，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了Java中的枚舉類型enum的使用,開始之前先講解了枚舉的用處,然后還舉了枚舉在操作數(shù)據(jù)庫時(shí)的實(shí)例,需要的朋友可以參考下2016-04-04
Java代碼優(yōu)化實(shí)現(xiàn)Zip壓縮大文件從30秒到近乎1秒的優(yōu)化過程
本文詳細(xì)介紹了一種使用Java進(jìn)行文件壓縮的優(yōu)化過程,從最初的無緩沖壓縮到使用緩沖區(qū),再到利用NIO的Channel和內(nèi)存映射文件技術(shù),最終實(shí)現(xiàn)壓縮速度的顯著提升,感興趣的可以了解一下2025-09-09
這篇文章主要介紹了springboot實(shí)現(xiàn)打印彩色日志的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了淺談Spring Boot 屬性配置和自定義屬性配置,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
Java的Netty進(jìn)階之Future和Promise詳解
這篇文章主要介紹了Java的Netty進(jìn)階之Future和Promise詳解,Netty 是基于 Java NIO 的異步事件驅(qū)動(dòng)的網(wǎng)絡(luò)應(yīng)用框架,使用 Netty 可以快速開發(fā)網(wǎng)絡(luò)應(yīng)用,Netty 提供了高層次的抽象來簡(jiǎn)化 TCP 和 UDP 服務(wù)器的編程,但是你仍然可以使用底層的 API,需要的朋友可以參考下2023-11-11
Java中StringBuilder字符串類型的操作方法及API整理
Java中的StringBuffer類繼承于AbstractStringBuilder,用來創(chuàng)建非線程安全的字符串類型對(duì)象,下面即是對(duì)Java中StringBuilder字符串類型的操作方法及API整理2016-05-05