DOM基本操作（上）

一.介紹

dom(document object model) : 操作一切結構化文件的通用api，用dom即可操作html，又可操作xml，可實現增，刪，改，查。

二.dom節點型別及屬性

根據w3c 的 html dom 標準，html 文件中的所有內容都是節點：

整個文件是乙個文件節點

document物件：文件型別(document)  9

元素節點：元素型別(element) 1
文字節點：文字型別(text) 3
屬性節點：屬性型別(attr) attribute 2
注釋節點 (comment) 8

nodename 元素的標籤名 大寫 唯讀不能寫

nodevalue 元素的文字內容 text節點和comment節點起作用 可讀寫 nodetype 節點型別

attributes 節點的屬性集合 類陣列

elem.hasattribute(「屬性名」)–>有，true；沒有，false

描述getelementsbyclassname()

找到指定類名的所有元素的節點列表（ie8及ie8以下不相容）

getelementbyid()

找到指定id的元素（ie8以下不區分id的大小寫）

getelementsbytagname()

找到指定標籤的所有元素的節點列表（無相容問題）

getelementsbyname

通過帶有name屬性的元素找到該元素 （舊瀏覽器只支援部分標籤）

將新的子節點新增到指定節點

removechild()

刪除子節點

replacechild()

替換子節點

insertbefore()

在指定的子節點前面插入新的子節點

createelement()

建立屬性節點

createattribute()

建立元素節點

createtextnode()

建立文字節點

getattribute()

找到指定的屬性值

setattribute()

將指定屬性設定或修改為指定的值

*有相容性問題*

節點樹 vs 元素節點樹
父節點 parentnode parentelementnode
所有子節點 childnodes children ie9以下支援
第乙個子節點 firstchild firstelementchild ie9以下不相容
最後乙個子節點 lastchild lastelementchild ie9以下不相容
前乙個兄弟 previoussibling previouselementsibling
後乙個兄弟 nextsibling nextelementsibling
childelementcount 子節點個數
取出當前結構中的所有元素節點,不能使用children

DOM 基本操作

關於dom 1.html 文件可以看成是一棵樹，其中的內容是這棵樹的節點 2.dom 樹上的節點之間有父子關係 兄弟關係 3.節點之間還有順序關係 4.可以通過對 dom 樹的操作來修改 html 文件 文件處理 1.內部插入 培訓 3 prepend content 向每個元素內部的前部新增 di...

DOM基本操作

獲取節點的屬性 1.獲取div的上乙個節點 div.previoussibling 2.獲取div的上乙個標籤節點 div.previouselementsibling 3.獲取div的下乙個節點 div.nextsibling 4.獲取div的下乙個標籤節點 div.nextelementsibl...

dom基本操作

document htmldocument.prototype document.prototype 封裝children方法 element.prototype.mychildren function return arr function retsibling e,n else n else e...