DOM初步瞭解

CSS · 發表 2019-05-03 19:33:25

摘要：什麼是DOM? DOM（文件物件模型）是針對HTML和XML文件的一個API（應用程式程式設計介面）。節點層次 <html> <head> <title>Sample Page</title> </h...

什麼是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-，目的是為元素提供與渲染無關的資訊，或者提供語義資訊。

不好的地方，請多多指教