HTML DOM 學習_ZenDei技術網路在線

HTML DOM 學習 By: Mirror王宇陽 E mail:[email protected] 博客主頁：https://www.cnblogs.com/wangyuyang1016/ DOM 文檔對象模型 DOM簡單來說就是文檔對象模型，當一個HTML頁面被載入就會創建HTML頁面的DOM ...

HTML DOM 學習

By: Mirror王宇陽

E-mail:[email protected]

博客主頁：https://www.cnblogs.com/wangyuyang1016/

DOM 文檔對象模型

DOM簡單來說就是文檔對象模型，當一個HTML頁面被載入就會創建HTML頁面的DOM

DOM對象結構樹

JavaScript的“權利”：

改變頁面中DOM的所用的HTML元素
改變頁面中DOM的所用的HTML屬性
改變頁面中DOM的所用的CSS樣式
添加/刪除DOM中所用的HTML元素、屬性和CSS樣式屬性
對頁面中所有已存在的HTML事件作出反應
可以在DOM中創建新的HTML事件

DOM的特性：

整個HTML頁面文檔就是一個文檔節點（只存在一個 <html>根元素）
每一個HTML內的標簽是一個元素節點
每一個HTML元素中的文本是文本節點
每一個HTML屬性中的內容是屬性節點
註釋內容屬於註釋節點

DOM的節點：

doucument 文檔節點；HTML文檔的父節點，DOM文檔的根節點
element 元素節點；元素節點擁有自己的屬性節點
attr 屬性節點；以element作為父節點
text 文本節點；可作為獨立節點存在，是終節點
conmment 註釋節點；解釋HTML的註釋類信息

document 對象

獲取元素對象的方法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h3>I love HCIT</h3>
        <div id="info" class="bd">
            <h2>Hello,World!</h2>
            <h3>I'am Mirror王宇陽 is student</h3>
        </div>
        <script>
            var id = document.getElementById("info");
            var tag= document.getElementsByTagName("h3");// 全局
            var idtag = id.getElementsByTagName("h3"); // div_info標簽中的h3
            var classt = document.getElementsByClassName("bd");
            
            console.log(id);
            console.log(tag[0]);
            console.log(idtag[0].innerHTML);
            console.log(classt);
            console.log(classt[0].innerHTML);
        </script>
    </body>
</html>

document.getElementsById()

返回指定標簽ID名的元素

document.getElementsByName()

返回指定標簽Name名的元素

document.getElementsByTagName()

返回指定標簽類型名的元素

document.getElementsByClassNam()

返回指定標簽Class名的元素

上述四種常見的獲取元素對象標簽的方法，都不具有絕對的唯一性

當我們獲取元素對象標簽元素的時候，方法返回的是自己查找的所有內容以數組返回

我們需要使用數組下標的方式獲取讀取唯一的元素

另外，我們可以利用節點的關係來對元素標簽獲取進行規範和控制，例如：
我們獲取的內容在div中的table中的th標簽中的元素，那麼我們使用
getElementsByTagName()方法獲取所有th標簽，那麼HTML頁面中無數的th標簽都會被獲取
我們可以使用getElenemtsById()先定位目標div標簽，再通過getElementsByTagName()方法獲取th標簽元素

對象元素讀寫特性:

1573632737286

innerHTML

表示對象元素所包含的文本和HTML代碼內容

innerText

表示起始標簽和結束標簽之間的純文本內容

outerHTML

整個DOM節點的HTML和文本內容，包含標簽自身

outerText

表示起始標簽和結束標簽之間的純文本內容

DOM對象節點操作:

創建節點

createElement():創建元素節點

返回新節點的對象引用，參數是創建的元素節點的標簽名

var newElement = document.createElement("a"); // 創建一個<a>標簽元素節點

createTextNode():創建文本節點

返回新節點的對象引用，參數是string並添加為節點的文本

var newText = document.createTextNode("百度一下");//創建一個baidu文本節點

createAttribute():創建屬性節點

返回新節點的對象引用，參數是新節點的屬性名。

屬性節點必須要求以element元素節點為父類節點

var newAttr = document.createAttribute("href"); //創建一個color屬性節點
newAttr.value = "http://www.baidu.com";

添加節點

appendChild()

添加新節點到方法所屬節點的尾部，參數為新添加的子節點對象；

適合元素節點、文本節點的添加

newElement.appendChild(newText);// newElement節點添加文本節點newText
document.body.appendChild(newElement);// body標簽中添加newElement節點

setAttributeNode()

添加新屬性節點到方法所屬節點的屬性集合中，參數為新添加的子節點對象；

newElement.setAttributeNode(newAttr);//newElement添加newAttr屬性節點

insertBefore()

insertBefore(node1,node2);

將node1新節點插入到相對節點node2的前面作為方法所屬節點的子節點

刪除節點

removeChild()

刪除節點，參數是需要刪除的節點node；該方法的所屬節點對象是node的父節點

element.removeChild(node);

替換節點

replaceChild()

element.replaceChild(node1,node2);

node1節點替換原節點node2；該方法的所屬節點對象是node的父節點

複製節點

cloneNode()

賦值一個節點，返回覆制後的節點引用；參數為布爾值，true/false表示是否克隆該節點所喲子節點。

element.cloneNode(bool);

返回值是一個克隆的節點

var node = newElement.cloneNode(true); //複製一個節點

導航節點

firstChild : 返回第一個子節點對象內容

console.log(d1.firstChild.innerHTML);

lastChild : 返回最後的子節點對象內容

console.log(d1.lastChild.innerHTML);

parentNode : 返回子節點的父節點對象

console.log(d1.parentNode);

childNodes : 返回指定子節點對象的全部集合

console.log(d1.childNodes)
console.log(d1.childNodes.length)

children : 返回對象元素子節點的對象集合

console.log(d1.children)
console.log(d1.children.length);

nodeType : 返回節點類型（3-文本節點 1-元素節點）

for (var i = 0 ; i < demo.childNodes.length ; i++) {
    if (demo.childNodes[i].nodeType == 3) {
        textNode ++;
    } else if(demo.childNodes[i].nodeType == 1){
        elementNode ++;　
    }
}

DOM事件

事件觸發條件

事件屬性	事件說明	觸發
onblur	失去焦點時	鍵盤、滑鼠、blur方法
onfocus	獲得焦點時	鍵盤、滑鼠、focus方法
onchange	修改內容時	鍵盤、滑鼠、賦值語句
onclick	滑鼠單擊時	鍵盤、滑鼠、click方法
ondblclick	滑鼠雙擊時	滑鼠
onkeydown	鍵盤按下	鍵盤
onkeypress	鍵盤按鍵（按/松）	鍵盤
onkeyup	鍵盤抬起	鍵盤
onmousedown	滑鼠按下時	滑鼠
onmousemove	滑鼠移動時	滑鼠
onmouseup	滑鼠抬起時	滑鼠
onmouseout	滑鼠移出時	滑鼠
onmouseover	滑鼠移入時	滑鼠
onload	載入時	系統
onsubmit	表單提交時	鍵盤、滑鼠、submit方法
onreset	表單重置時	鍵盤、滑鼠、reset方法

event對象屬性

當事件發生時會產生事件對象，事件對象得作用時用來記錄事件發生得關鍵信息

屬性	說明	條件
altKey、ctrlKey、shiftKey	是否按下Alt、Ctrl、Shift鍵	鍵盤滑鼠
button	滑鼠按鈕是否按下	滑鼠
keyCode	鍵盤按鍵時unicode值	鍵盤
clientX、clientY	滑鼠在視窗區得坐標	滑鼠
offsetX、offsetY	滑鼠相對事件觸發的坐標	滑鼠
srcElement	事件觸發者	事件