JS中DOM操作總結

zkkang發表於2019-02-16
JS

最近在找春季實習生工作，為了準備實習面試筆試，開通屬於自己的專欄來記錄自己的學習過程，同時也是為了檢驗自己是否真正的理解了學習的知識點。

一、DOM概念

今天學習的是JavaScript中的DOM操作。說起DOM操作，首先我們需要知道什麼是DOM，DOM也叫文件物件模型，其中D代表的是Document,即文件；O代表的是Object,即物件；M代表的是model，即模型。
所謂模型，其實就是某種事物的表現形式，就像是一個火車模型代表的是真是的火車一樣，DOM代表的是載入到瀏覽器並呈現在使用者眼前的網頁。DOM把一份文件表示成一棵樹，叫做DOM樹。既然有了樹的概念，那就還有根，父節點，子節點，兄弟節點的概念了。在下面的網頁中我們看一個例子：

    <!Doctype html>
    <html>
        <head>
            <title>這是測試例子</title>
        </head>
        <body>
            <div>
                <ul>
                    <li>例子</li>
                    <li>例子</li>
                </ul>
                <p>段落測試</p>
            <div>
        </body>
    </html>

以上例子我們可以看到，<html>標籤為根標籤，接下來<head>和<body>標籤屬於<html>的子元素或者是子節點，在<head>標籤中，<title>又是<head>的子標籤，<body>中<div>是其子標籤，<div>標籤中<ul>與上面的p標籤都是其子元素，而這兩者是兄弟元素關係。
以上就是一個典型的文件樹關係。
二、節點
在DOM中節點包括以下幾種：
元素節點；文字節點；屬性節點。
元素節點：
文件樹中諸如<head><body><ul>等叫做元素節點，標籤的名字就是元素的節點名字；
文字節點：
上面說的元素節點是一種結構節點，如果一個文件中全部是元素節點則不會顯示任何內容，網頁中的大部分的內容都是通過文字節點展現出來的。文字節點總是包含在元素節點內部。
屬性節點：
屬性節點用來對元素做出更加詳細的描述。幾乎每個元素節點都會有一個title屬性，用來描述該元素節點是用來幹什麼的。
三、DOM的相關操作
1、獲取元素
獲取元素有三種方法可以獲得：
(1)getElementById()該方法接收一個引數，這個引數是元素的id屬性值，該方法返回一個id屬性值為相應值的元素物件
(2)getElementByTagName()改方法也接收一個引數，引數為元素名稱，該方法返回的是一個物件陣列。即使匹配的元素只有一個同樣也會是陣列型別，只是陣列長度為1。
(3)getElementByClass()該方法接收一個引數，即元素屬性為class的值，該方法也返回一個陣列。
未完待續

相關文章