JS學習筆記 DOM

什麼是dom?

文件物件模型 (dom) 是html和xml文件的程式設計介面。它提供了對文件的結構化的表述，並定義了一種方式可以使從程式中對該結構進行訪問，從而改變文件的結構，樣式和內容。dom 將文件解析為乙個由節點和物件（包含屬性和方法的物件）組成的結構集合。簡言之，它會將web頁面和指令碼或程式語言連線起來。

–mdn

獲取dom元素的方法

@param: string 傳入乙個元素的id名 例:『name』

@return: 返回的是查詢到的元素物件 || null

document.getelementbyid(『name』)

@param: string 傳入乙個元素的類名(class) 例:『name』

@return: 返回的是乙個元素集合 放著所有包含此類名的元素 || 空集合

document.getelementsbyclassname(『name』)

@param:string 傳入乙個name 例:『root』

@retrun:返回乙個節點集合 存放著所有此name的元素 || 空集合

document.getelementsbyname(『root』)

@param:string 傳入乙個標籤名 例:『li』

@return:返回乙個元素集合 存放著所有此標籤元素物件 || 空集合

document.getelementsbytagname(『li』)

@param:string 傳入乙個選擇器 例:』.root』 『#name』

@return:返回通過選擇器查詢到的第乙個元素 || null

document.queryselector(』.root』)

@param:string 傳入乙個選擇器 例:』.root』 『#name』

@return:返回通過選擇器查詢到的所有元素的集合 || 空集合

document.queryselectorall(』.root』)

element.innerhtml: 獲取dom的元素中的html內容

例:

"root"

>
我的名字是啊哈哈哈
>
***xxspan
>
div>

root.innerhtml的值為我的名字是啊哈哈哈***xx

如果我們要修改直接通過 element.innerhtml=「***x」 即可

document.createelement(tagname):建立乙個標籤物件(僅僅建立的是乙個js物件，並沒有在dom樹上，我們需要呼叫插入dom的方法將元素插入到dom樹中)

tagname: 建立的標籤的標籤名

例：

let div = document.

createelement
('div'
)

element.insertbefore(newnode, referencenode):將newnode插入到element中的referencenode前面

例:

>

***x
"box"
>
div>
body
>

我們想插入乙個新的div到

let div = document.

createelement
("div"
)// 建立乙個div物件
document.body.
insertbefore
(div, box)

插入過後的dom結構為

>

***>
div>
"box"
>
div>
body
>

還有一些比較新的api，例如：

element.insertadjacentelement()

element.insertadjacenttext()

element.insertadjacenthtml()

大家可以自行檢視文件

node.removechild(childnode)：移除某個元素/節點的子節點中childnode

大家自行練習

element是node的子類所有，node物件有的element物件也有，如果你是初學者暫時沒必要在意node、element

element.classname：獲取乙個元素的class屬性

element.classlist :獲取乙個元素的類名集合 詳情檢視

element.tagname：獲取元素的標籤名

element.attributes：獲取元素的所有屬性，返回乙個包含所有屬性的偽陣列

element.id：獲取元素的id屬性

element.children：所有子元素的集合

element.firstelementchild：獲取第乙個子元素

element.lastelementchild：獲取最後乙個子元素

element.nextelementsibling：獲取當前元素的下乙個元素

element.previouselementsibling：獲取當前元素的上乙個元素

node.nodetype：元素的型別 節點型別描述詳細文件

node.firstchild：獲取第乙個子節點( 不一定是元素)

node.lastchild：獲取最後乙個子節點

node.parentnode：獲取父節點

node.nodename：獲取節點名字，如果是元素節點就是標籤名

node.nextsibling：獲取當前節點緊跟著的下乙個節點

node.previoussibling：獲取當前節點緊跟著的上乙個節點

node.childnodes：獲取所有子節點集合

JS加強學習 DOM學習02

innertext innerhtml textcontent 區別 innertext只獲取標籤間的文字資訊，不包括其中的標籤，而innerhtml是獲得標籤之間的所有內容包括標籤，而且有些瀏覽器會將獲取的內容原樣輸出，innerhtml是所有瀏覽器都支援，沒有相容性的問題，而innertext是...

JS基礎學習二 DOM

b 獲取節點 b document.getelementbyid nodeid document.getelementsbytagname nodetagname b 樹形操作 b firstchild lastchild childnodes parentnode nextsibling 同級的下...

js中Dom的學習

dom document object model 即文件物件模型，意思是html文件中每乙個元素都是乙個物件節點。節點型別以及對應值如下 需要注意的是 getelementbyid獲得到的是單個節點，而其他方法獲得到的是乙個集合 哪怕最終取到的只有乙個元素 從語義上也能看出來。簡單演示 獲取id為...