DOM---文檔對象模型(Document Object Model)的基本使用

一、DOM簡介　

　　文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展置標語言的標准編程接口。它是一種與平台和語言無關的應用程序接口(API),它可以動態地訪問程序和腳本,更新其內容、結構和www文檔的風格(目前,HTML和XML文檔是通過說明部分定義的)。

　　DOM 可被 JavaScript 用來讀取、改變 HTML、XHTML 以及 XML 文檔，它本身屬於瀏覽器。

二、使用DOM查找HTML元素

　　HTML 文檔中的所有節點組成了一個文檔樹（或節點樹）。HTML 文檔中的每個元素、屬性、文本等都代表着樹中的一個節點。樹起始於文檔節點，並由此繼續伸出枝條，直到處於這棵樹最低級別的所有文本節點為止。所以查找HTML中的某個標簽即是查抄樹上的某個節點。

1. 直接查找（通過屬性、標簽名等）

document.getElementById("i1");               //根據id獲取單個元素
document.getElementsByName("i1");             //根據name屬性獲取多個元素
document.getElementsTagName('a');          //根據標簽名稱獲取多個元素
document.getElementsByClassName('c1');     //根據class屬性獲取多個元素

2. 間接查找（通過已找到的其他標簽）

tag = document.getElementById("i1");
tag.parentElement           // 父節點標簽元素
tag.children                // 所有子標簽
tag.firstElementChild       // 第一個子標簽元素
tag.lastElementChild        // 最后一個子標簽元素
tag.nextElementSibling     // 下一個兄弟標簽元素
tag.previousElementSibling  // 上一個兄弟標簽元素

三、使用DOM操作標簽

1. 操作標簽內容

tag = document.getElementById("i1"); 
content = tag.innerText;      //獲取標簽中的文本內容 
tag.innerText = "new_content";    //將標簽內部文本賦值為new_content

//使用innerText只能操作標簽內部的文本內容，即使標簽內部包裹了其他標簽也會被其忽略
// 常用的操作標簽內容的方法，使用方法同innerText
innerText    --- 僅文本
innerHTML    --- 所有內容（包括標簽）
value:       ---- 標簽的值（下面分別是對有value屬性的標簽，使用value獲取/操作值的詳細介紹）
        input      ---  value獲取當前輸入的值
        select     ---  獲取選中value的值（selectedIndex）
        textarea   ---  獲取當前輸入的    

2. 操作標簽一般屬性 

obj = document.getElementById("i1"); 
obj.attributes          //---- 獲取標簽的所有屬性
obj.getAttributes(key)       //---- 獲取標簽某個屬性的值
obj.setAttributes(key, value)       //---- 為標簽設置屬性
obj.removeAttributes(key)    //---- 為標簽移除屬性

3. 操作標簽class屬性

tag = document.getElementById('i1')
tag.className      // 獲取tag的使用的class選擇器名稱
tag.className = 'c1'    //  tag使用名為c1的class選擇器
tag.classList.add('c2')    //  給tag增添c2中的樣式    
tag.classList.remove('c3')    // 移除tag使用的c3中的樣式

4. 操作標簽樣式

// 在上面的操作class屬性中，是對一個標簽添加或刪除一個css代碼樣式塊， 對一個標簽具體樣式的操作如下

//比如，設置一個標簽字體的大小
tag = document.getElementById("i1");
tag.style.fontSize = '16px';

// 其他的各種樣式也是采用這種方式設置，設置時樣式字段去掉'-'，將每個單詞的首字母大寫(整體首字母小寫，tag.style.backgroundColor)

5. 創建標簽和操作標簽

// 創建標簽方式一：
var tag = "<a class='c1' href='http//:www.cnblogs.com'>博客園</a>"

// 創建標簽方式二：
var tag = document.createElement('a')
tag.innerText = "博客園"
tag.className = "c1"
tag.href = "http://www.cnblogs.com"

// 操作標簽，即將創建的插入整個HTML文檔的某個位置

// 方式一
var mytag = document.getElementById('i1')
var obj = "<input type='text' />";
mytag.insertAdjacentHTML("beforeEnd",obj);   //將標簽插入到mytab所代表的標簽結束之前的位置，即最后一個子標簽
mytag.insertAdjacentElement('afterBegin',document.createElement('p'));  //將標簽插入到mytab所代表的標簽開始之后的位置，即第一個子標簽
//注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)   // 將新標簽作為xxx的最后一個標簽
xxx.insertBefore(tag,xxx[1])   // 將新標簽插入xxx的第一個子標簽之前