DOM初步瞭解

時間 2019-12-05

標籤 dom 初步瞭解欄目 HTML 简体版

原文原文鏈接

什麼是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屬性時，能夠這樣操做：css

<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-，目的是爲元素提供與渲染無關的信息，或者提供語義信息。

很差的地方，請多多指教

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。