小結下dom節點操作方法

2022-02-15 22:03:56 字數 2603 閱讀 6886

備註:通過dom,可以訪問html文件中的每個節點。

二、節點引用

節點的絕對引用:

節點的相對引用:(設當前對節點為node)

三、節點操作

節點定位

getelementbyid(elementid)

//尋找乙個有著給定id屬性值的元素,返回乙個元素節點 ,document.getelementbyid(idvalue)

getelementsbytagname(tagname)

//用於尋找有著給定標籤名的所有元素,document.getelementsbytagname(tagname)

getelementsbyname(elementname)

//在html中checkbox和radio都是通過相同的name屬性值,來標識乙個組內的元素。如果我們現在要獲取被選中的元素,首先獲取改組元素,然後迴圈判斷是節點的checked屬性值是否為true即可

建立節點:

document.createelement(element)

//引數為要新添的節點標籤名,egnewnode=document.createelement("div");

document.createtextnode(string)

//建立乙個包含著給定文字的新文字節點,eg:document.createtextnode("hello");

eg: 

新增節點:

//新增子節點:

//插入節點

node.insertbefore(newnode,targetnode)

node.insertafter(newnode,targetnode);

修改ic交易網節點

//刪除節點

node.remove()[2] //當某個節點被remove方法刪除時,這個節點所包含的所有子節點將同時被刪除。

node.removechild(node)

node.removenode()//ie支援,但ff不支援,推薦用removechild代替實現

//替換節點

node.replacechild(newchild,oldchild) //oldchild節點必須是node元素的乙個子節點。

node.replacenode() node.swapnode()//只有ie支援replacenode與swapnode方法,其他瀏覽器則不支援。

複製ic交易網節點

//返回複製節點引用

node.clonenode(bool)//bool為布林值,true / false 是否轉殖該節點所有子節點 ,eg:node.clonenode(true)

獲取節點資訊:

.nodename//唯讀,返回節點名稱,相當於tagname.

.nodevalue//可讀可寫,但對元素節點不能寫。返回乙個字串,指示這個節點的值。元素節點返回null,屬性節點返回屬性值,文字節點返回文字。一般只用於設定文字節點的值。

.nodetype//唯讀,返回節點型別:1,元素節點;2,屬性節點;3,文字節點。

node.contains() //是否包含某節點,返回boolean值,ie支援,ff不支援contains(),但支援w3c標準comparedocumentposition() .

node.haschildnodes()//是否有子節點,返回boolean值

屬性節點

setattribute(key,value)方法只能用在屬性節點上。

getattribute(key)//返回乙個給定元素的乙個給定屬性節點的值

備註:

[1]childnodes相容性問題說明ic交易網:

用ie的除錯工具會發現ie中把空格解析成「#text」,即ie會把2個標籤之間只要有回車或空格的地方解析成空白文字節點,就多了個節點nodename="#text"。而ff中卻不會。

測試**:

測試結果:

ie中是val1=7:val2=3

ff中是val1=3:val2=3

相容性解決辦法:

在for迴圈裡不妨加上:

if(childnode.nodename=="#text") continue;

或者nodetype == 1。

//節點之間留有空格和回車

first

second

third

//除注釋外,節點間無空格回車

first

second

third

var val1=document.getelementbyid("test1").childnodes.length;

var val2=document.getelementbyid("test2").childnodes.length;

alert("val1="+val1+":"+"val2="+val2)

小結下dom節點操作

dom節點樹 圖中可見節點html文件中的每個成分都是乙個節點 備註 通過dom,可以訪問html文件中的每個節點。用ie的除錯工具會發現ie中把空格解析成 text 即ie會把2個標籤之間只要有回車或空格的地方解析成空白文字節點,就多了個節點nodename text 而ff中卻不會。注意的是ad...

DOM屬性節點的操作方法

選擇id為pink的標籤 let pink document.queryselector pink 選擇pink元素的所有屬性節點 let pinkattr pink.attributes 列印每乙個屬性 nodename也可以以寫成name nodevalue也可以寫成value getattri...

dom節點及對節點的常用操作方法

在說dom節點前,先來看看頁面的呈現 dom渲染流程 1 瀏覽器解析html原始碼,然後建立乙個dom樹。在dom樹中,每乙個html標籤都有乙個對應的節點 元素節點 並且每乙個文字也都有乙個對應的節點 文字節點 dom樹的根節點就是documentelement,對應的是html標籤。2 瀏覽器解...