JavaScript實例詳解之HTML元素操作

本篇文章為大家帶來了關於javascript的相關知識，其中主要介紹了關於html元素操作的相關問題，包括了怎麼獲取操作的元素、操作元素的內容、元素的屬性以及樣式等等，希望對大家有幫助。

相關推薦：javascript教學

#一、取得操作的元素

document物件的方法和屬性

document物件提供了一些用於尋找元素的方法，利用這些方法可以根據元素的id、name和class屬性以及標籤名稱的方式取得操作的元素。

總結

除了document.getElementById()方法傳回的是擁有指定id的元素外，其他方法傳回的都是符合要求的一個集合。若要取得其中一個對象，可以透過下標的方式獲取，預設從0開始。

document物件提供一些屬性，可用來取得文件中的元素。例如，取得所有表單標籤、圖片標籤等。

• document物件的body屬性用於傳回body元素。
• document物件的documentElement屬性用於傳回HTML文件的根節點html元素。

注意

透過document物件的方法與document物件的屬性所取得的操作元素表示的都是同一物件。如document.getElementsByTagName(‘body’)[0]與document.body全等。

HTML5新增的document物件方法

HTML5中為更方便取得操作的元素，為document對象新增了兩個方法，分別為querySelector()和querySelectorAll()。

• querySelector()方法用於傳回文件中對符合指定的元素或CSS選擇器的第1個物件的參考。
• querySelectorAll()方法用於傳回文件中符合指定的元素或CSS選擇器的物件集合。

由於這兩個方法的使用方式相同，以下以document.querySelector()方法為例示範。

 Element物件的方法和屬性

在DOM操作中，元素物件也提供了取得某個元素內指定元素的方法，常用的兩個方法分別為getElementsByClassName( )和getElementsByTagName()。它們的使用方式與document物件中同名方法相同。

除此之外，元素物件也提供了children屬性用來取得指定元素的子元素。例如，取得上述範例中ul的子元素。

• 元素物件的children屬性返回的也是對象集合，若要取得其中一個對象，也需透過下標的方式獲取，預設從0開始。
• 另外，document物件中也有children屬性，它的第一個子元素通常是html元素。

HTMLCollection物件

• HTMLCollection物件：透過document物件或Element物件呼叫getElementsByClassName()方法、getElementsByTagName()方法、children屬性等返回的對象集。
• NodeList物件：document物件呼叫getElementsByName()方法在Chrome和FireFox瀏覽器中傳回的是NodeList對象，IE11回傳的是HTMLCollection物件。

HTMLCollection與NodeList物件的區別：

• #HTMLCollection物件用於元素操作。
• NodeList物件用於節點操作。

提示：對於getElementsByClassName()方法、getElementsByTagName()方法和children屬性傳回的集合中可以將id和name自動轉換為一個屬性。

二、元素內容

JavaScript中，若要對取得的元素內容進行操作，則可以利用DOM提供的屬性和方法實作。

• 屬性屬於Element對象，方法屬於document物件。
• innerHTML在使用時會保持編寫的格式以及標籤樣式。
• innerText則是去掉所有格式以及標籤的純文字內容。
• textContent屬性在去掉標籤後會保留文字格式。

舉個範例

#程式碼實作##

	nbsp;html>
	
	
	<meta>
	<title>元素内容操作</title>
	
	
	<p>
	The first paragraph...
	</p><p>
	The second paragraph...
	<a>third</a>
	</p>
	
	<script>
	var box = document.getElementById(&#39;box&#39;);
	console.log(box.innerHTML);
	console.log(box.innerText);
	console.log(box.textContent);
	</script>
	
	

注意

innerText屬性在使用時可能會出現瀏覽器相容的問題。因此，建議在

開發時盡可能的使用innerHTML取得或設定元素的文字內容。同時，innerHTML屬性和document.write()方法在設定內容時有一定的區別，前者作用於指定的元素，後者則是重構整個HTML文件頁面。因此，讀者在開發中要根據實際的需要選擇合適的實作方式

【案例】改變盒子大小

程式碼實作想法：

① 寫HTML，設定p的大小。

② 依照使用者的點擊次數完成盒子大小的改變。

③ 點選的次數為奇數時，盒子都變大，點擊次數為偶數時，盒子都變小。

程式碼實作

	nbsp;html>
	
	
	<meta>
	<style>
	.box{width:50px;height:50px;background:#eee;margin:0 auto;}
	</style>
	
	
	<p></p>
	<script>
	var box = document.getElementById(&#39;box&#39;);
	var i = 0; // 保存用户单击盒子的次数
	box.onclick = function() { // 处理盒子的单击事件
	++i;
	if (i % 2) { // 单击次数为奇数，变大
	this.style.width = &#39;200px&#39;;
	this.style.height = &#39;200px&#39;;
	this.innerHTML = &#39;大&#39;;
	} else { // 单击次数为偶数，变小
	this.style.width = &#39;50px&#39;;
	this.style.height = &#39;50px&#39;;
	this.innerHTML = &#39;小&#39;;
	}
	};
	</script>
	
	

三、元素屬性

在DOM中，為了方便JavaScript取得、修改、遍歷指定HTML元素的相關屬性，提供了操作的屬性與方法。

利用attributes屬性可以取得一個HTML元素的所有屬性，以及所有屬性的個數length。

舉個範例

#程式碼實作##

	nbsp;html>
	
	
	<meta>
	<title>元素属性操作</title>
	<style>
	.gray{background: #CCC;}
	#thick{font-weight: bolder;}
	</style>
	
	
	<p>test word.</p>
	<script>
	// 获取p元素
	var ele = document.getElementsByTagName(&#39;p&#39;)[0];
	// ① 输出当前ele的属性个数
	console.log(&#39;未操作前属性个数：&#39; + ele.attributes.length);
	// ② 为ele添加属性，并查看属性个数
	ele.setAttribute(&#39;align&#39;, &#39;center&#39;);
	ele.setAttribute(&#39;title&#39;, &#39;测试文字&#39;);
	ele.setAttribute(&#39;class&#39;, &#39;gray&#39;);
	ele.setAttribute(&#39;id&#39;, &#39;thick&#39;);
	ele.setAttribute(&#39;style&#39;, &#39;font-size:24px;border:1px solid green;&#39;);
	console.log(&#39;添加属性后的属性个数：&#39; + ele.attributes.length);
	// ③ 获取ele的style属性值
	console.log(&#39;获取style属性值：&#39; + ele.getAttribute(&#39;style&#39;));
	// ④ 删除ele的style属性，并查看剩余属性情况
	ele.removeAttribute(&#39;style&#39;);
	console.log(&#39;查看所有属性：&#39;);
	for (var i = 0; i < ele.attributes.length; ++i) {
	console.log(ele.attributes[i]);
	}
	</script>
	
	

四、元素樣式

回顧：透過元素屬性的動作修改樣式。

元素樣式語法：style.屬性名稱。

要求：需要去掉CSS樣式名稱裡的中橫線“-”，並將第二個英文首字母大寫。

範例：設定背景顏色的background-color，在style屬性運算中，需要修改為backgroundColor。

注意

#CSS中的float樣式與JavaScript的保留字衝突，在解決方案上不同的瀏覽器

有分歧。例如IE9——11、Chrome、FireFox可以使用“float”和“cssFloat”，Safari瀏覽器使用“float”，IE6~8則使用“styleFloat”。

問題：一個元素的類別選擇器可以有多個，在開發中如何對選擇器清單進行操作？

原來的解決方案：利用元素物件的className屬性取得，取得的結果是字元型，然後再根據實際情況處理字串。

HTML5提供的方法：新增的classList（唯讀）元素的類別選擇器清單。

範例：若一個p元素的class值為“box header navlist title”，如何刪除header？

HTML5解決方案：p元素物件.classList.toggle(“header”);

舉例

程式碼實作

	nbsp;html>
	
	
	<meta>
	<title>classList的使用</title>
	<style>
	.bg{background:#ccc;}
	.strong{font-size:24px;color:red;}
	.smooth{height:30px;width:120px;border-radius:10px;}
	</style>
	
	
	

• PHP
• JavaScript
• C++
• Java

<script> // 获取第2个li元素 var ele = document.getElementsByTagName(&#39;li&#39;)[1]; // 若li元素中没有strong类，则添加 if (!ele.classList.contains(&#39;strong&#39;)) { ele.classList.add(&#39;strong&#39;); } // 若li元素中没有smooth类，则添加；若有删除 ele.classList.toggle(&#39;smooth&#39;); console.log(&#39;添加与切换样式后：&#39;); console.log(ele); </script> <script> ele.classList.remove(&#39;bg&#39;); console.log(&#39;删除后：&#39;); console.log(ele); </script> 除此之外，classList屬性也提供了許多其他相關操作的方法和屬性。

五、【案例】標籤列切換效果

程式碼實作想法

：

① 寫HTML，實作標籤列的結構與樣式的設計，其中class等於current表示目前顯示的標籤，預設為第一個標籤。
② 取得所有的標籤與標籤對應的顯示內容。
③ 遍歷並為每個標籤添加滑鼠滑過事件，在事件的處理函數中，遍歷標籤對應的所有顯示內容，當滑鼠滑過標籤時，透過classList的add()方法加入current，否則透過remove()方法移出current。

• 
  

程式碼實作

	nbsp;html>
	
	
	<meta>
	<title>标签栏切换效果</title>
	<style>
	.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
	.tab-head{height:31px;}
	.tab-head-p{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-p{display:none;margin:20px 10px;}
	.tab-body .current{display:block;}
	</style>
	
	
	<p>
	</p><p>
	</p><p>标签一</p>
	<p>标签二</p>
	<p>标签三</p>
	<p>标签四</p>
	

 1 

 2 

 3 

 4 

<script> // 获取标签栏的所有标签元素对象 var tabs = document.getElementsByClassName(&#39;tab-head-p&#39;); // 获取标签栏的所有内容对象 var ps = document.getElementsByClassName(&#39;tab-body-p&#39;); for (var i = 0; i < tabs.length; ++i) { // 遍历标签部分的元素对象 tabs[i].onmouseover = function() { // 为标签元素对象添加鼠标滑过事件 for (var i = 0; i < ps.length; ++i) { // 遍历标签栏的内容元素对象 if (tabs[i] == this) { // 显示当前鼠标滑过的li元素 ps[i].classList.add(&#39;current&#39;); tabs[i].classList.add(&#39;current&#39;); } else { // 隐藏其他li元素 ps[i].classList.remove(&#39;current&#39;); tabs[i].classList.remove(&#39;current&#39;); } } }; } </script>

相关推荐：javascript教程

以上是JavaScript實例詳解之HTML元素操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！