JavaScirpt(JS)——DOM文檔對象模型

時間 2019-11-16

標籤 javascirpt dom 文檔對象模型欄目 Java 简体版

原文原文鏈接

1、HTML DOM介紹

HTML DOM 是 W3C 標準（是 HTML 文檔對象模型的英文縮寫，Document Object Model for HTML）。
HTML DOM 定義了用於 HTML 的一系列標準的對象，以及訪問和處理 HTML 文檔的標準方法。
HTML DOM 把 HTML 文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹)。

　　經過 DOM，能夠訪問全部的 HTML 元素，連同它們所包含的文本和屬性。能夠對其中的內容進行修改和刪除，同時也能夠建立新的元素。javascript

　　HTML DOM 獨立於平臺和編程語言。它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。css

2、DOM樹

　　經過畫dom樹能夠展現文檔中各個對象間的關係，用於對象的導航。html

3、DOM節點——節點類型

　　HTML 文檔中的每一個成分都是一個節點。
java

DOM 是這樣規定的：
　　一、整個文檔是一個文檔節點
　　二、每一個 HTML 標籤是一個元素節點
　　三、包含在 HTML 元素中的文本是文本節點
　　四、每個 HTML 屬性是一個屬性節點node

　　其中，document與element節點是重點。編程

4、DOM節點——節點關係

　　節點樹中的節點彼此擁有層級關係。
　　父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。數組

注意：瀏覽器

在節點樹中，頂端節點被稱爲根（root）
每一個節點都有父節點（除了根）
一個節點可擁有任意數量的孩子
同胞是擁有相同父節點的節點

　　下面的圖片展現了節點樹的一部分，以及節點之間的關係：app

5、DOM 節點——節點查找

　　方式一：直接查找節點框架

//經過id查找，拿到的是一個標籤對象
var oDiv = document.getElementById('box');
//經過類名查找，獲得的是一個數組裏存放的標籤
var oDiv = document.getElementsByClassName('.box')[0];
//經過標籤名查找，獲得的也是一個數組
var oDiv = document.getElementsByTagName('div')[0];
//經過name屬性去查找，獲得的也是一個數組
var oDiv = document.getElementsByName('yuan');

　　方式二：導航查找節點：經過某一個標籤的位置去查找另外一個標籤

parentElement           // 父節點標籤元素
children                // 全部子標籤
firstElementChild       // 第一個子標籤元素
lastElementChild        // 最後一個子標籤元素
nextElementtSibling     // 下一個兄弟標籤元素
previousElementSibling  // 上一個兄弟標籤元素

6、DOM節點——節點操做

一、建立節點

　　document.createElement(標籤名) ：在js中動態建立一個html標籤

// createElement() 建立節點
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');

二、添加節點

　　容器.appendChild(新元素)：把當前建立的新元素添加到容器的末尾

　　容器.insertBefore(新元素, 老元素)：在當前容器中，把新元素添加到老元素以前

// DOM元素用appendChild()追加子節點
oDiv.appendChild(oP);   // 添加子節點
oP.appendChild(oSpan);

// 把增長的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點);

三、刪除節點

　　容器.removeChild(元素)：得到要刪除的元素，經過父元素調用刪除。

oSpan.onclick = function () {
    // removeChild 刪除建立的對象
    oDiv.parentNode.removeChild(oDiv);
}

四、替換節點

　　容器.replaceChild(新元素, 老元素)：在當前容器中，拿新元素替換老元素。

somenode.replaceChild(newnode, 某個節點);

五、複製節點

　　元素.cloneNode(false/true)：把原有元素克隆一份如出一轍的。

　　false：只克隆當前元素自己。

　　true：深度克隆，把當前元素及其後代都進行克隆

<style>
    .box{
        width: 100px;
        height: 100px;
        background: #f50;
        margin-top: 10px;
    }
</style>
<div class="box" id="box1">1</div>
<div class="box" id="box2"><span>1</span>2</div>
<script>
    var box1 = document.getElementById('box1'),
        box2 = document.getElementById('box2');
    document.body.removeChild(box1);    // -> 刪除元素,移除盒子
    document.body.appendChild(box2.cloneNode()) // -> 克隆盒子並添加到body末尾,但不克隆子元素及內容
    document.body.appendChild(box2.cloneNode(true)) // -> 克隆元素並添加到body末尾,克隆子元素及內容(即便是深度克隆也只是克隆內容和結構,並不會克隆盒子上發生的事件)
</script>

六、節點屬性操做

（1）獲取文本節點的值：

innerText：無論你是賦值仍是取值，只能識別純文本
innerHtml：既能夠識別純文本，也能夠識別標籤

// 設置oH2的內容，p標籤會被解析成p元素顯示到HTML頁面中
oH2.innerHTML = '<p>嘿 sariy</p>';

// 只設置元素內的文本內容，div標籤將被當作文本元素
oH2.innerText = '<div>嘿嘿</div>'

// 將建立好的元素節點添加到指定元素全部內容的後面
oDiv.appendChild(oH2);
// 獲取元素節點裏的全部內容 包括標籤和文本
console.log(oDiv.innerHTML);
// 只獲取元素內的文本內容，html標籤將被忽略
console.log(oDiv.innerText);

（2）屬性（Attribute）操做：

　　給當前元素設置/獲取/移除屬性的(通常操做的都是他的自定義屬性)。

//獲取標籤屬性
console.log(oH2.getAttribute('class'));//wusir2

//設置標籤屬性
oA.setAttribute('href','https://www.luffycity.com');

//刪除元素上的屬性
oA.removeAttribute('href');

　　getAttribute 能夠操做其餘的，可是不能夠操做class

<body><div class="c1" id="d1">DIV</div>
<script>
    var ele = document.getElementsByClassName('c1')[0];
    ele.id='d2';//修改id
    console.log(ele);

//取屬性值 :
//    方式一
    console.log(ele.getAttribute('id'));
//    方式二
    console.log(ele.id);
/ 屬性賦值
//    方式一
    ele.setAttribute('id','d3');
    console.log(ele);
//    方式二
    ele.id = 'd3';
    console.log(ele);

（3）value屬性可設置或返回單選按鈕的value屬性的值

// 語法
radioObject.value=sometext

function check(browser) {
    document.getElementById("answer").value=browser
}

（4）關於class的操做

var ele = document.getElementsByClassName('c1')[0];
console.log(ele.className); //打印類的名字
     
ele.classList.add('hide');
console.log(ele); //<div class="c1 hide" id="d1">

ele.classList.remove('hide');//吧添加的remove移除了
console.log(ele)

（5）改變css樣式

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

7、DOM Event對象

　　Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

　　事件一般與函數結合使用，函數不會在事件發生前被執行！

事件句柄（Event Handlers）

　　HTML 4.0 的新特性之一是可以使 HTML 事件觸發瀏覽器中的行爲，好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，可將之插入 HTML 標籤以定義事件的行爲。

屬性	此事件發生在什麼時候...	IE	F	O	W3C
onabort	圖像的加載被中斷。	4	1	9	Yes
onblur	元素失去焦點。	3	1	9	Yes
onchange	域的內容被改變。	3	1	9	Yes
onclick	當用戶點擊某個對象時調用的事件句柄。	3	1	9	Yes
ondblclick	當用戶雙擊某個對象時調用的事件句柄。	4	1	9	Yes
onerror	在加載文檔或圖像時發生錯誤。	4	1	9	Yes
onfocus	元素得到焦點。	3	1	9	Yes
onkeydown	某個鍵盤按鍵被按下。	3	1	No	Yes
onkeypress	某個鍵盤按鍵被按下並鬆開。	3	1	9	Yes
onkeyup	某個鍵盤按鍵被鬆開。	3	1	9	Yes
onload	一張頁面或一幅圖像完成加載。	3	1	9	Yes
onmousedown	鼠標按鈕被按下。	4	1	9	Yes
onmousemove	鼠標被移動。	3	1	9	Yes
onmouseout	鼠標從某元素移開。	4	1	9	Yes
onmouseover	鼠標移到某元素之上。	3	1	9	Yes
onmouseup	鼠標按鍵被鬆開。	4	1	9	Yes
onreset	重置按鈕被點擊。	4	1	9	Yes
onresize	窗口或框架被從新調整大小。	4	1	9	Yes
onselect	文本被選中。	3	1	9	Yes
onsubmit	確認按鈕被點擊。	3	1	9	Yes
onunload	用戶退出頁面。	3	1	9	Yes