dom是
document object model的縮寫，也就是文件物件模型的意思，它是一種用於html和xml文件的程式設計介面。它給文件提供了一種結構化的表示方法，可以改變文件的內容和呈現方式。
上面對dom的解釋比較官方不易理解，用我自己的話來解釋的話：網頁是由一系列的html組成，如果把每乙個頁面當成一棵樹的話，那頁面裡面的html就是數的分支。同樣把dom也當成一棵樹的話，那麼dom裡面的html就相當於節點了。因此也可以說dom就是由一系列的節點組成的乙個html頁面，頁面的最小單位就是乙個節點。
看張圖加深依稀理解：
每個節點都是有3個常用屬性，分別為nodename表示節點名稱，nodevalue表示節點的值，nodetype表示節點的型別。各節點型別對應的節點屬性如下，不用死記硬背，在做專案的過程中逐漸加深印象和理解。
既然整個dom樹結構是由乙個個節點組成的，那麼節點與節點之間必定存在某些關係，如父子關係，兄弟關係。看**
<divid=如果把這段**劃分成乙個dom樹的話，可以把id為box的div元素看成是根節點，下面分別有left,mid,right的元素節點div,p,div子節點。這三個節點又可以看成是兄弟節點。left裡面包含了乙個文字節點，mid裡面包含了乙個a元素節點，a元素節點裡面又有屬性節點。right裡面包含兩個span元素節點，每個span元素節點裡面有包含乙個文字節點。講的有點囉嗦，反正明白了是這個意思就行了。"box">
<divid=
"left">我是左邊
div>
<pid=
"mid"><ahref=
"#">我是中間
a>p>
<divid=
"right">
<span>右邊1
span>
<span>右邊2
span>
div>
div>
之所以把dom劃分成一棵由節點組成的樹是為了方便我們查詢dom並對dom執行相應的操作，接下來看看常用的dom操作方法和節點操作方法。
查詢dom:
新增元素：
this is a paragraph.刪除元素：this is another paragraph.
this is a paragraph.替換元素：this is another paragraph.
this is a paragraph.獲取節點的nodename,nodevalue,nodetype示例：this is another paragraph.
html><htmllang=
"en">
<head>
<metacharset=
"utf-8">
<metaname=
"viewport"content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>
<title>title
title>
head>
<body>
<divid=
"box">
<divid=
"left">我是左邊
div>
<pid=
"mid"><ahref=
"#">我是中間
a>p>
<divid=
"right">
<span>右邊1
span>
<span>右邊2
span>
div>
div>
body>
<script>
//元素節點的名稱，值，型別
var
box
= document.getelementbyid("box");
console.log(box.nodename); //div
console.log(box.nodevalue); //null
console.log(box.nodetype); //1
//文字節點的名稱，值，型別
var
text
=document.getelementbyid("left").childnodes[0];
console.log(text.nodename);//#text
console.log(text.nodevalue); //我是左邊
console.log(text.nodetype); //3
script>
html>
原生DOM 操作
dom.nodetype 檢視元素節點型別 dom.childnodes 檢視所有元素下面的所有子節點 空白節點也會獲取到 dom.children 檢視所有元素下面的所有子節點 只獲取元素節點 dom.firstchild 獲取第乙個子節點 dom.lastchild 獲取最後乙個子節點 dom....
js原生dom操作
1.建立元素 var a document.createelement a var node1 document.createelement div var node2 document.createtextnode hello world 2.新增子元素 刪除子元素 document.body.r...
原生DOM操作彙總
節點型別attr document element text 其他 節點之間的關係父節點 parentnode 子節點 childnodes 前乙個兄弟節點 nextsibling 後乙個兄弟節點 previoussibling 第乙個子節點 firstchild 最後乙個子節點 lastchild...