DOM初步瞭解
什麼是DOM?
DOM(文件物件模型)是針對HTML和XML文件的一個API(應用程式程式設計介面)。
節點層次
<html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html>
操縱節點
- 新增一個節點:appendChild() 和 insertBefore()
- 替換節點:replaceChild()
- 移除節點:removeChild()
查詢元素
- document.getElementById() 返回對擁有指定ID的第一個物件的引用
- document.getElementsByTayName() 返回一個對所有tag標籤引用的集合
- document.getElementsByName() 返回 name 特性的所有元素,返回一個NodeList
- document.getElementsByClassName() 獲取類名,如果有多個相同類名,最終得到 NodeList
- document.querySelector() 方法接收一個CSS選擇符,返回與該模式匹配的第一個元素,如果沒有找到匹配的元素,返回null
- document.querySelectorAll() 可以對多個元素進行匹配和操作,並把它們儲存在NodeList
設定元素樣式
- 語法:ele.style.styleName = styleValue
- 功能:設定ele元素的css樣式
- 例子:box.style.color = "#fff";
- 注:屬性是減號連線的複合形式時,必需要轉換為駝峰形式
DOM的操作特性
- 獲取元素的屬性:ele.getAttribute("attribute")
- 設定元素的屬性:ele.setAttribute("attribute",value)
- 刪除元素的屬性:ele.removeAttribute("attribute")
建立元素
- document.createElement()
- document.body.appendChild() 將新建立的元素新增到文件body元素中
<ul> <li>1</li> <li>2</li> </ul> <script> var list = document.querySelector("ul"); var item = document.createElement("li"); item.innerHTML= "3"; list.appendChild(item); </script>
innerHTML
- 語法:ele.innerHTML = "html";
- 功能:獲取和設定標籤之間的文字和HTML內容
- innerHTML 是 Element 物件的屬性;
textContent 與 innerText
- 設定和獲得標籤的文字內容
- textContent 是 Node 物件的屬性;
- innerText 是 HTMLElement 物件的屬性;
注:innerHTML、textContent 與 innerText之間的區別,有興趣的可以 Google 一下
className
- 為元素指定的CSS類,ele.className = "header";
-
小缺陷:設定元素class屬性時,會替換元素原有的class的屬性。當追加元素class屬性時,可以這樣操作:
<style> .box1{ color: red; } </style> <div class="box">Hello World</div> <script> var box = document.querySelector(".box"); function addClass(element,value) { if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName += " "; //這句程式碼追加的類名分開 newClassName += value; element.className = newClassName; } } addClass(box,"box1"); </script>
自定義資料屬性
- HTML5規定可以為元素新增非標準的屬性,但要新增字首 data-,目的是為元素提供與渲染無關的資訊,或者提供語義資訊。
不好的地方,請多多指教