JavaScript的DOM物件及操作DOM樹

2021-08-25 02:35:45 字數 1883 閱讀 7999

dom即(document object model)文件物件模型,文件是超文字文件(超文字標記文件),物件提供了屬性和方法,模型即使用屬性和方法操作超文字標記文件。

1,對將標記型文件的所有內容封裝城物件(需要將html裡的標籤,屬性,文字內容都放裝成物件)

2,解析標記型文件

解析過程:根據html的層級結構,在記憶體中分配乙個樹形結構,把html中的每部分封裝成物件

-document物件:整個文件

-element物件:標籤物件

-屬性物件

-文字物件

-node節點物件:該物件是這些物件的父物件

解析如下圖

1,向網頁輸出變數或html**

document.write( )
2,獲取元素(標籤)

#通過id獲取元素

getelementbyid( )

#通過標籤的name屬性值獲取標籤 (返回的是乙個陣列,傳遞的引數是標籤裡的name值)

getelementsbyname( )

#通過標籤的名稱獲取元素 (返回的是乙個陣列,傳遞的引數是標籤名)

getelementsbytagname( )

要操作element物件,應先獲取到element,使用document裡相應的方法獲取。

1,常用方法

#獲取屬性裡的值

getattribute("屬性名稱")

#設定屬性值

setattribute("屬性","屬性值")

#刪除屬性 (不可以刪除value屬性)

removeattribute("屬性值")

eg;

var input1=document.getelementbyid("inputid");

input1.getattribute("value"); //得到value屬性的值

input1.setattribute("class","haha"); //設定class屬性值為haha

input1.removeattribute("name"); //刪去name屬性

2,獲取標籤下的子標籤(1):使用屬性:childnodes ,但是這個屬性相容性差

(2):獲取標籤下的子標籤唯一有效方法,使用getelementsbytagname( )方法

1,插入節點

#新增子節點到末尾,類似剪下貼上效果

#在乙個節點之前插入乙個新節點(通過父節點新增)

insertbefore(newnode,oldnode)

2,刪除節點

removechild( )         //通過父節點刪除
3,替換、複製節點

replacechild(newnode,oldnode)  //替換節點,通過父節點替換

clonenode(boolean) //複製節點

JavaScript中對DOM操作

1 element,元素 2 attribute,屬性 3 text,文字 var node1 document.createelement div var node2 document.createtextnode hello world 返回當前文件中第乙個類名為 myclass 的元素 var...

JavaScript中的DOM操作

更新dom 1.直接修改標籤的innerhtml屬性 修改該屬性不僅可以修改文字內容,還可以修改標籤內部的子節點 2.修改innertext或者textcontent屬性 只能修改節點的文字內容,不能新增子節點 3.使用style屬性獲取或者設定對應屬性 插入dom 1.如果在乙個空的dom節點中進...

Javascript的dom獲取設定

使用dom獲取元素 1.根據id獲取元素 document.getelementbyid id的值 2.根據標籤獲取元素 document.getelementsbytagname 標籤名 3.根據name屬性值獲取元素 document.getelementsbyname name屬性值 4.根據...