DOM物件的常用方法 自己總結覺得有用的

2021-08-31 20:09:03 字數 2239 閱讀 5358

[b]dom結構[/b]——兩個節點之間可能存在哪些關係以及如何在節點之間任意移動?

document.documentelement 返回文件的根節點

document.body

document.activeelement 返回當前文件中被擊活的標籤節點(ie)

event.fromelement 返回滑鼠移出的源節點(ie)

event.toelement 返回滑鼠移入的源節點(ie)

event.srcelement 返回啟用事件的源節點(ie)

event.target 返回啟用事件的源節點(firefox)

[b]當前物件為node:[/b]

返回父節點:node.parentnode, node.parendelement(ie)

返回所有子節點:node.childnodes(包含文字節點及標籤節點),node.children

返回第乙個子節點:node.firstchild

返回最後乙個子節點: node.lastchild

parentnode和parentelement功能一樣,childnodes和children功能一樣。但是parentnode和 childnodes是符合w3c標準的,可以說比較通用。而另外兩個只是ie支援,不是標準,firefox 就不支援,所以大家只要記得有parentelement和children就行了

[b]節點的操作:[/b]

建立節點: document.createelement("div");//好像大都只能用document,不知道還能換成什麼

建立節點: document.createtextnode("fdsafdas");

[b]常用的新增節點:[/b]

pnode.insertbefore(newchild, oldchild);//在現有的子節點前插入乙個新的子節點

[b]刪除節點:[/b] pnode.removechild(node)

[b]複製節點:[/b] pnode.clonenode(include_all); //include_all為true時,則同時複製所有子節點,為false時,則只複製該節點(注意id也會被複製)

[b]替換節點:[/b] pnode.replacechild(newnode,oldchild)

[b]訪問節點:[/b]

訪問html元素:var ohtml=document.documentelement;

獲取head元素:var ohead=ohtml.firstchild;

獲取body元素:var obody=ohtml.lastchild; 或者 var obody=document.body;

也可以通過childnodes來做同樣的工作:

var ohead=ohtml.childnodes[0] 或者 ohtml.childnodes.item(0);

var obody=ohtml.childnodes[1] 或者 ohtml.childnodes.item(1);

[b]判斷節點間關係:[/b]

alert(ohead.parentnode==ohtml);

alert(obody.previoussibling==ohead);

alert(ohead.nextsibling==obody);

alert(ohead.ownerdocument==document);

[b]訪問指定節點:[/b]

熟知的getelementsbytagname(name),getelementsbyname(name),getelementbyid(id)三個方法,不再展開。

[b]屬性操作:[/b]

getattribute(name) ——返回名稱為name的屬性的值

setattribute(name,value) ——顧名思義

removeattribute(name) ——顧名思義

為了簡化建立**,html dom提供了一系列的**方法,常用幾個:

cells ——返回元素中的所有單元格

rows ——**中所有行的集合

insertrow(position) ——在rows集合中指定位置插入新行

deleterow(position) ——與insertrow相反

insertcell(position) ——在cells集合的指定位置插入乙個新的單元格

deletecell(position) ——與insertcell相反

DOM常用方法總結

getelementsbyname 尋找有著給定name屬性的所有元素,這個方法將返回乙個節點集合,這個集合可以當作乙個陣列來處理。這個集合的length屬性等於當前文件裡有著給定name屬性的所有元素的總個數。getelementsbytagname 尋找有著給定標籤名的所有元素,這個方法將返回乙...

dom中classList物件常用方法

新增新的類名,如已經存在,取消新增 classlist.add newclassname varstr document.getelementbyid str str.classlist.add newclassname 確定元素中是否包含指定的類名,返回值為true false classlist...

js Array物件的常用方法總結

一 檢測陣列 array.isarray 確定某個值是不是陣列 var arr 1,2,3 array.isarray arr true二 轉換方法 1.tostring 返回由陣列中每個值的字串形式拼接而成的乙個以逗號分隔的字串 2.valueof 返回陣列本身 var colors red bl...