備註:通過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 瀏覽器解...