JavaScript中HTML元素操作的實現(xiàn)
一、獲取操作的元素
??document對象的方法和屬性
document對象提供了一些用于查找元素的方法，利用這些方法可以根據(jù)元素的id、name和class屬性以及標簽名稱的方式獲取操作的元素。
??總結(jié)
除了document.getElementById()方法返回的是擁有指定id的元素外，其他方法返回的都是符合要求的一個集合。若要獲取其中一個對象，可以通過下標的方式獲取，默認從0開始。
document對象提供一些屬性，可用于獲取文檔中的元素。例如，獲取所有表單標簽、圖片標簽等。
- 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屬性返回的也是對象集合，若要獲取其中一個對象，也需通過下標的方式獲取，默認從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)容進行操作，則可以利用DOM提供的屬性和方法實現(xiàn)。
- 屬性屬于Element對象，方法屬于document對象。
- innerHTML在使用時會保持編寫的格式以及標簽樣式。
- innerText則是去掉所有格式以及標簽的純文本內(nèi)容。
- textContent屬性在去掉標簽后會保留文本格式。
舉個例子
代碼實現(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];
// ① 輸出當前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ā)中如何對選擇器列表進行操作？
原來的解決方案：利用元素對象的className屬性獲取，獲取的結(jié)果是字符型，然后再根據(jù)實際情況對字符串進行處理。
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)操作的方法和屬性。
五、【案例】標簽欄切換效果
代碼實現(xiàn)思路：
① 編寫HTML，實現(xiàn)標簽欄的結(jié)構(gòu)與樣式的設(shè)計，其中class等于current表示當前顯示的標簽，默認是第一個標簽。
② 獲取所有的標簽與標簽對應(yīng)的顯示內(nèi)容。
③ 遍歷并為每個標簽添加鼠標滑過事件，在事件的處理函數(shù)中，遍歷標簽對應(yīng)的所有顯示內(nèi)容，當鼠標滑過標簽時，通過classList的add()方法添加current，否則通過remove()方法移出current。
代碼實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標簽欄切換效果</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">標簽一</div>
<div class="tab-head-div">標簽二</div>
<div class="tab-head-div">標簽三</div>
<div class="tab-head-div tab-head-r">標簽四</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>
// 獲取標簽欄的所有標簽元素對象
var tabs = document.getElementsByClassName('tab-head-div');
// 獲取標簽欄的所有內(nèi)容對象
var divs = document.getElementsByClassName('tab-body-div');
for (var i = 0;
i < tabs.length;
++i) {
// 遍歷標簽部分的元素對象
tabs[i].onmouseover = function() {
// 為標簽元素對象添加鼠標滑過事件
for (var i = 0;
i < divs.length;
++i) {
// 遍歷標簽欄的內(nèi)容元素對象
if (tabs[i] == this) {
// 顯示當前鼠標滑過的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)文章
mybatis-plus也只是聽過，可是終究沒有使用過。于是自己花幾天晚上的時間研究mybatis-plus的使用。這篇文章主要介紹了mybatis-plus的resultMap簡單使用,需要的朋友可以參考下2021-11-11
該文章描述了一個防止重復提交的流程,通過HttpServletRequest對象獲取請求信息,生成唯一標識,使用Redis分布式鎖判斷請求是否重復提交,并通過自定義注解和切面實現(xiàn)2025-12-12
在本篇文章里小編給大家整理的是關(guān)于JavaWeb中文編碼問題方法的相關(guān)知識點內(nèi)容，需要的朋友們參考下2019-09-09
這篇文章主要為大家詳細介紹了Java遺傳算法，本文對基因的編碼采用二進制規(guī)則，分享了對Java遺傳算法的理解，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了Java中的枚舉類型enum的使用,開始之前先講解了枚舉的用處,然后還舉了枚舉在操作數(shù)據(jù)庫時的實例,需要的朋友可以參考下2016-04-04
Java代碼優(yōu)化實現(xiàn)Zip壓縮大文件從30秒到近乎1秒的優(yōu)化過程
本文詳細介紹了一種使用Java進行文件壓縮的優(yōu)化過程,從最初的無緩沖壓縮到使用緩沖區(qū),再到利用NIO的Channel和內(nèi)存映射文件技術(shù),最終實現(xiàn)壓縮速度的顯著提升,感興趣的可以了解一下2025-09-09
這篇文章主要介紹了springboot實現(xiàn)打印彩色日志的操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了淺談Spring Boot 屬性配置和自定義屬性配置,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Java的Netty進階之Future和Promise詳解,Netty 是基于 Java NIO 的異步事件驅(qū)動的網(wǎng)絡(luò)應(yīng)用框架,使用 Netty 可以快速開發(fā)網(wǎng)絡(luò)應(yīng)用,Netty 提供了高層次的抽象來簡化 TCP 和 UDP 服務(wù)器的編程,但是你仍然可以使用底層的 API,需要的朋友可以參考下2023-11-11
Java中StringBuilder字符串類型的操作方法及API整理
Java中的StringBuffer類繼承于AbstractStringBuilder,用來創(chuàng)建非線程安全的字符串類型對象,下面即是對Java中StringBuilder字符串類型的操作方法及API整理2016-05-05