dom(document object model) 即文件物件模型,意思是html文件中每乙個元素都是乙個物件節點。
節點型別以及對應值如下:
需要注意的是 getelementbyid獲得到的是單個節點,而其他方法獲得到的是乙個集合(哪怕最終取到的只有乙個元素),從語義上也能看出來。
簡單演示
//獲取id為first的元素節點
var fisrt = document.
getelementbyid
("first");
//元素型別
console.
log(first.nodetype)
;//元素名
console.
log(fisrt.nodename)
;//元素值
console.
log(fisrt.nodevalue)
;
顯示結果:"first"
>
文字內容
name
="second"
>
p>
div>
說明標籤元素沒有節點值
var second = document.
getelementsbytagname
("p");
console.
log(second)
;
顯示效果:var fisrt = document.
getelementbyid
("first");
var third = fisrt.childnodes;
console.
log(third)
for(
var i=
0;i<=third.length;i++
)
注意:在dom中,乙個回車也會被算作是乙個文字元素。
var one = document.
getelementbyid
("div");
var two = one.firstchild;
console.
log(
"two:"
+two.nodename)
;var three = one.lastchild;
console.
log(
"three:"
+three.nodename)
;var four = two.parentnode;
console.
log(
"four:"
+four.nodename)
;var five = two.nextsibling;
console.
log(
"five:"
+five.nodename)
;var six = three.previoussibling;
if(six===five)
"div"
>
>
p>
href="
">
a>
>
span
>
div>
JS中的DOM事件
1.html事件處理程式 html事件缺點 html和js 緊密的耦合在一起,js 個html都需要進行修改。2.dom0級事件處理程式 較傳統的方式 把乙個函式賦值給乙個事件的處理程式屬性用的比較多的方法,簡單,跨瀏覽器的優勢 沒有html事件處理程式的缺點。3.dom2級事件處理程式 dom2級...
JS中的DOM物件
主要是操作html 內容 dom document object model w3c api標準 是w3c組織推薦的處理可擴充套件置標語言的標準程式設計介面。它是一種與平台和語言無關的應用程式介面 api 它可以動態地訪問程式和指令碼,更新其內容 結構和www文件的風格 目前,html和xml文件是...
JS學習筆記 DOM
什麼是dom?文件物件模型 dom 是html和xml文件的程式設計介面。它提供了對文件的結構化的表述,並定義了一種方式可以使從程式中對該結構進行訪問,從而改變文件的結構,樣式和內容。dom 將文件解析為乙個由節點和物件 包含屬性和方法的物件 組成的結構集合。簡言之,它會將web頁面和指令碼或程式語...