JavaScript DOM 經常使用操做

時間 2019-12-11

標籤 javascript dom 經常使用欄目 JavaScript 简体版

原文原文鏈接

1.理解DOM：

　　DOM（Document Object Model ，文檔對象模型）一種獨立於語言，用於操做xml，html文檔的應用編程接口。html

　　怎麼說，我從兩個角度理解：

對於JavaScript，爲了可以使JavaScript操做Html，JavaScript就有了一套本身的dom編程接口。
對於Html，dom使得html造成一棵dom樹，相似於一顆家族樹同樣，一層接一層，子子孫孫。

　　因此說，有了DOM，在我看來就是至關於JavaScript拿到了鑰匙同樣能夠去操做Html的每個節點，觸摸Html每寸肌膚。（咳。。。）

2.介紹Html的DOM樹：

說明：html標籤經過瀏覽器的解析後纔會造成dom樹，此後HTML中的每一個標籤元素，屬性，文本都能看作是一個DOM的節點，JavaScript都能經過dom的提供的編程接口操做到每一個節點，去了解瀏覽器的渲染機制可以幫助咱們瞭解dom。

Html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
</head>
<body>
    <div>
        <a href="www.baidu.com">百度</a>
    </div>
</body>
</html>

對應的DOM樹結構圖：node

3.認識JavaScript中的DOM編程接口：

上面說了html造成的dom樹，接着說下經過js的dom編程接口去操做這棵dom樹。

JavaScriptDOM操做的經常使用方法和屬性：:

經常使用方法:

獲取節點：

document.getElementById(idName) //經過id號來獲取元素，返回一個元素對象
document.getElementsByName(name) //經過name屬性獲取id號，返回元素對象數組
document.getElementsByClassName(className) //經過class來獲取元素，返回元素對象數組（ie8以上纔有）
document.getElementsByTagName(tagName) //經過標籤名獲取元素，返回元素對象數組

獲取/設置元素的屬性值：

element.getAttribute(attributeName) //括號傳入屬性名，返回對應屬性的屬性值
element.setAttribute(attributeName,attributeValue) //傳入屬性名及設置的值

建立節點Node：

document.createElement("h3") //建立一個html元素，這裏以建立h3元素爲例
document.createTextNode(String); //建立一個文本節點；
document.createAttribute("class"); //建立一個屬性節點，這裏以建立class屬性爲例

增添節點：

element.appendChild(Node); //往element內部最後面添加一個節點，參數是節點類型
elelment.insertBefore(newNode,existingNode); //在element內部的中在existingNode前面插入newNode

刪除節點：

element.removeChild(Node) //刪除當前節點下指定的子節點，刪除成功返回該被刪除的節點，不然返回null

經常使用屬性:

獲取當前元素的父節點：

element.parentNode //返回當前元素的父節點對象

獲取當前元素的子節點：

element.chlidren //返回當前元素全部子元素節點對象，只返回HTML節點
element.chilidNodes //返回當前元素多有子節點，包括文本，HTML，屬性節點。（回車也會當作一個節點）
element.firstChild //返回當前元素的第一個子節點對象
element.lastChild //返回當前元素的最後一個子節點對象

獲取當前元素的同級元素：

element.nextSibling //返回當前元素的下一個同級元素沒有就返回null
element.previousSibling //返回當前元素上一個同級元素沒有就返回null

獲取當前元素的文本：

element.innerHTML //返回元素的全部文本，包括html代碼
element.innerText //返回當前元素的自身及子代全部文本值，只是文本內容，不包括html代碼

獲取當前節點的節點類型：node.nodeType //返回節點的類型,數字形式（1-12）常見幾個1：元素節點，2：屬性節點，3：文本節點。
設置樣式：element.style.color=「#eea」; //設置元素的樣式時使用style，這裏以設置文字顏色爲例。

4.總結：

你們都會以爲用jQuery來操做dom會更加的方便且好用，由於jq對js的dom進行了封裝，使得咱們Write Less, Do More。可是我以爲仍是要總結一下原生js的dom，從根本上了解js對dom的操做，只會有利而無害。

相關標籤/搜索

每日一句

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