js DOM模型操作

2021-06-20 16:21:48 字數 2407 閱讀 2997

dom模型中的節點:元素節點、文字節點、屬性節點 

例:私のdotnet小屋

(1)a是元素節點 

(2)「私のdotnet小屋」是文字節點 

(3)href=」」是屬性節點 

dom節點的屬性

nodename

string

節點名稱,根據節點的型別而定義

nodevalue

string

節點的值,根據節點的型別而定義

nodetype

number

節點型別,1為元素節點,2為屬性節點,3為文字節點

firstchild

node

指向childnodes列表的第乙個節點

lastchild

node

指向childnodes列表的最後乙個節點

childnodes

nodelist

所有子節點列表,childnodes[i]可以訪問第i+1個節點

parentnode

node

指向節點的父節點,如果已是根節點,則返回null

previoussibling

node

指向前乙個兄弟節點,如果已是第乙個節點,則返回null

nextsibling

node

指向後乙個兄弟節點,如果已是最後乙個節點,返回null

attributes

namenodemap

包含乙個元素特性的attr物件,僅用於元素節點

classname

string

節點的css類

innerhtml

string

某個標記之間的所有內容,包括**本身

dom節點的方法

(1)訪問節點: 

【通過標籤名】 

document.getelementsbytagname(stagname)方法:返回乙個包含某個相同標籤名的元素節點列表 

【通過標籤id】 

document.getelementbyid(selementid)方法:返回id為指定值的元素節點 

【訪問前乙個節點】相容ie和firefox 

(自定義) 

複製** **如下:

function prevsib(onode) 

【訪問後乙個節點】相容ie和firefox 

(自定義) 

複製** **如下:

function nextsib(onode) 

(2)判斷乙個節點是否有子節點: 

nodeobject.haschildnodes()方法:當childnodes包含乙個或多個節點時,返回true 

(3)設定節點屬性: 

elenode.getattribute(attrnode)方法:返回elenode元素的attrnode屬性 

elenode.setattribute(attrnode,snewvalue)方法:設定elenode元素的attrnode屬性的值為snewvalue 

(4)建立節點: 

document.createelement(elenode)方法:建立乙個元素節點elenode 

document.createtextnode(textnode)方法:建立乙個文字節點textnode 

document.createdocumentfragment()方法:建立文件碎片節點 

(5)新增節點: 

(6)刪除節點: 

onode.parentnode.removechild(onode)方法:從childnodes中刪除onode節點 

(7)替換節點: 

onode.parentnode.replacechild(onewnode,ooldnode)方法:將childnodes中的ooldnode節點替換成onewnode節點 

(8)在特定節點前插入節點: 

otargetnode.parentnode.insertbefore(onewnode,otargetnode)方法:在childnodes中的otargetnode節點之前插入onewnode節點 

(9)在特定節點後插入節點: 

(自定義)otargetnode.parentnode.insertafter(onewnode,otargetnode)方法:在childnodes中的otargetnode節點之後插入onewnode節點 

複製** **如下:

原生js dom操作

這裡說說一些原生js操作dom的方法 1,元素的獲取 getelementbyid getelementsbytagname getelementsbyclassname 這裡要注意這個getelementsbyclassname 在ie8以下是不相容的。相容寫法 function getbycla...

js dom基本操作

class wraper class one 老大 ppppp div class box 內容span href 鏈結a 段落p llp div class last 老弟div div 查 所有節點屬性都是元素物件下的屬性 使用節點 第一步獲取元素物件,再獲取節點 var box documen...

JS DOM基本操作

如下表 方法描述 getelementbyid 返回帶有指定 id 的元素。getelementsbytagname 返回包含帶有指定標籤名稱的所有元素的節點列表 集合 節點陣列 getelementsbyclassname 返回包含帶有指定類名的所有元素的節點列表。把新的子節點新增到指定節點。re...