JavaScript Document對象DOM

Document對象 DOM

描述

• 每個載入瀏覽器的HTML文檔都會成爲Document對象
• Document對象使我們可以從腳本中對HTML頁面中的所有元素進行訪問
• Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
• 當瀏覽器打開一個HTML文檔時，瀏覽器解析HTML文檔的標籤，並創建表示這些標籤的對象，這些對象就是HTML文檔對象
• 文檔對象即Document對象，指的是一回事

---

HTML DOM 模型被構造爲對象的樹

---

JavaScript DOM知識腦圖

---

DOM對象屬性

屬性	說明
document.title	設置文檔標題等價於HTML的
document.bgColor	設置頁面背景色
document.linkColor	未點擊過的鏈接顏色
document.alinkColor	激活鏈接(焦點在此鏈接上)的顏色
document.fgColor	設置前景色(文本顏色)
document.vlinkColor	已點擊過的鏈接顏色
document.URL	設置URL屬性從而在同一窗口打開另一網頁
document.fileCreatedDate	文件建立日期，只讀屬性
document.fileModifiedDate	文件修改日期，只讀屬性
document.fileSize	文件大小，只讀屬性
document.cookie	設置和讀出cookie
document.charset	設置字符集 簡體中文:gb2312

---

DOM對象方法

• document.write()：向文檔寫HTML表達式或JavaScript代碼；注：文檔加載之後使用document.write()會覆蓋原文檔
• document.getElementById()：返回對擁有指定 id 對象的引用
• document.getElementsByName()：返回帶有指定名稱的對象集合
• document.getElementByTagName()：返回帶有指定標籤名的對象集合
• document.createElement()：創建元素節點；要與appendChild() 或 insertBefore()方法聯合使用
  a、element.appendChild()：向元素添加新的子節點，作爲最後一個子節點
  b、element.removeChild(id)：從元素中移除子節點

---

獲取或設置元素屬性

• 元素對象.屬性名 = “屬性值”;：獲取或設置元素屬性
• element.innerHTML：設置或返回元素的內容，可以包含HTML標籤
• element.innerText：設置或返回元素的內容
• element.tagName：返回元素的標籤名
• element.id：設置或返回元素的id
• element.className：設置或返回元素的class屬性
• element.title：設置或返回元素的title屬性
• element.value：設置或返回元素的value屬性
• 。。。

---

通用方法獲取或設置元素屬性

• 元素對象.getAttribute(“屬性名”)：獲取元素指定的屬性
• 元素對象.setAttribute(“屬性名”, “屬性值”)：設置元素指定屬性的值
• 元素對象.removeAttribute()：移除元素指定的屬性

    <input type="text" id="zxw" class="ZZ" value="設置元素屬性" abc="111">
    <script>
        var z = document.getElementById("zxw");
        // 獲取任意屬性
        alert(z.getAttribute("abc"));
        alert(z.getAttribute("class"));
        alert(z.getAttribute("value"));

        // 設置元素屬性
        z.setAttribute("type", "button");
        z.setAttribute("value", "按鈕");

        // 添加元素屬性
        z.setAttribute("title", "新添加的屬性");

		// 移除元素屬性
        z.onclick = function(){
            z.removeAttribute("value");
        }
    </script>

---

獲取或設置元素行內樣式

元素對象.style.屬性名 = “屬性值”：獲取或設置元素行內樣式

    <div id="z" style="color: red; font-size: 24px;">獲取和設置元素行內樣式</div>
    <script>
        var z = document.getElementById("z");
        //方式一：獲取元素行內樣式
        // alert(z.style.cssText);
        // 方式一：設置元素行內樣式,會對行內樣式重置
        // z.style.cssText = "color:blue; font-size:50px;"

        // 方式二：獲取元素行內某個樣式
        alert(z.style.color);
        // 方式二：設置元素行內某個樣式
        // 當行內樣式中的屬性名有"-"的，應使用駝峯命名法
        z.style.color = "blue";
        z.style.fontSize = "50px";
    </script>

---

DOM 節點

將文檔結構想象成一棵樹，每一部分（元素，屬性，內容）都可以看做一個節點
根據一個節點可以通過關係找到其他節點

---

節點的屬性：名稱、類型、值

• element.nodeName：返回元素的名稱。與element.tagName作用相同。
  1、#text：文本節點的名稱
  2、#document：文檔節點的名稱

• element.nodeType：返回元素的節點類型
  1、如果節點是元素節點，則nodeType屬性將返回1
  2、如果節點是屬性節點，則nodeType屬性將返回2
  3、如果節點是文本節點，則nodeType屬性將返回3

• element.nodeValue：設置或返回元素值
  1、文本節點的nodeValue爲文本內容
  2、屬性節點的nodeValue爲屬性值
  3、元素節點無nodeValue

---

子元素相關（可以類別CSS中的虛擬類別選擇器）

• element.parentNode：返回元素的父節點（僅節點，不是名稱）
• element.childNodes：返回元素子節點（文本和空格也算節點）的NodeList。類似CSS中的子選擇器
• element.children：返回元素的子元素，該屬性只返回元素的節點(不包含空格)
• element.firstChld和element.firstElementChild(不包含空格)：返回元素的首個子元素。類似CSS中的e：first-child
• element.lastChild和element.lastElementChild(不包含空格)：返回元素的最後一個子元素。類似CSS中的e：last-child

---

同級兄弟元素相關（可以類別CSS中的兄弟選擇器）

• element.previousSibling、element.previousElementSibling：返回位於相同節點樹層級的前一個元素
• element.nextSibling、element.nextElementSibling：返回位於相同節點樹層級的下一個節點。類似CSS中的直接相鄰選擇器：h1+h2

---

屬性節點

• element.attributes：返回元素屬性的NameNodeMap
• element.insertBefore(要插入的子節點，插入位置)：在指定的已有的子節點之前插入新節點
• element.replaceChild(要替換的子節點，替換位置)：替換元素中的子節點