JS中DOM操做總結

時間 2019-12-12

原文原文鏈接

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

1、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標籤都是其子元素，而這二者是兄弟元素關係。
以上就是一個典型的文檔樹關係。
2、節點
在DOM中節點包括如下幾種：
元素節點；文本節點；屬性節點。
元素節點：
文檔樹中諸如<head><body><ul>等叫作元素節點，標籤的名字就是元素的節點名字；
文本節點：
上面說的元素節點是一種結構節點，若是一個文檔中所有是元素節點則不會顯示任何內容，網頁中的大部分的內容都是經過文本節點展示出來的。文本節點老是包含在元素節點內部。
屬性節點：
屬性節點用來對元素作出更加詳細的描述。幾乎每一個元素節點都會有一個title屬性，用來描述該元素節點是用來幹什麼的。
3、DOM的相關操做
一、獲取元素
獲取元素有三種方法能夠得到：
(1)getElementById()該方法接收一個參數，這個參數是元素的id屬性值，該方法返回一個id屬性值爲相應值的元素對象
(2)getElementByTagName()改方法也接收一個參數，參數爲元素名稱，該方法返回的是一個對象數組。即便匹配的元素只有一個一樣也會是數組類型，只是數組長度爲1。
(3)getElementByClass()該方法接收一個參數，即元素屬性爲class的值，該方法也返回一個數組。
未完待續瀏覽器

相關標籤/搜索

每日一句

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