文件物件模型（document object model）,又被稱為文件模型，
分為：核心dom : 操作html和xml文件的api
htmldom : 專門操作html內容的api
dom就是把html視為乙個層次結構（樹形）的文件(如下圖)
文件（document）：指的是html xml檔案
節點（node）：html中所有的內容都可以稱為節點
元素（element）：html中所有的標籤都可以稱為元素
文件元素（根元素）：文件中的第乙個元素，html文件元素即
三大屬性：
1.nodetype 節點型別 （返回 number ）
document 文件 —> 9
element 元素節點—>1
attrbute 屬性節點—>2
text 文字節點—>3
comments 注釋—>8
2.nodename 節點名
document —>#document
標籤元素 —>全大寫的標籤名
attitude —>屬性名
文字節點 —> #text
3.nodevalue 節點值
document —>null
標籤元素 —>null
attribute —>屬性值
text —>文字的內容
1.從乙個中心元素訪問其所有的直系親屬元素
訪問父節點parentnode
訪問上乙個兄弟節點previoussibling
訪問下乙個兄弟節點nextsibling
訪問第1個屬性節點attributes[1]
訪問最後乙個節點 lastchild 或 childnodes[childnode.length-1]
2.增加
（1）document.creattextnode建立文字節點
var text = document.
createtextnode
("陰天也要快樂哦！"
);
var comment = document.
createcomment
("this is comment"
);
var a = document.
createelement
("a"
);
下面就是如何在html中顯示 三種方式
例1: createelement(）在父標籤上追加
：
var div = document.
getelementsbytagname
('div');
//獲取父元素
var span = docment.
createelement
('span');
//建立新增的元素
div.
(span)
;
var div = document.
getelementsbytagname
("div")[
0];//獲取父元素
var i = document.
getelementsbytagname
("i")[
0];//獲取要子元素 新增在那個子元素前面
var span = document.
createelement
("span");
//要新增的子元素
span.innerhtml =
"span"
;//新增內容
div.
insertbefore
(span, i)
;//通過div把span新增在i前面
var div = document.
getelementsbytagname
("div")[
0];//獲取父元素
var i = document.
getelementsbytagname
("i")[
0];//獲取要子元素 新增在那個子元素前面
var new_div = document.
createelement
("div");
//新建要替換的元素
new_div.innerhtml =
"divvv"
;//新增內容
div.
replacechild
(new_div, i)
;//替換
var link = document.
getelementbyid
("link1");
link.
setattribute
("href"
,"www.jd.com"
)
(1) document.getelementbyid()
通過id名查詢,只能找到乙個
(2) document.getelementbytagname
通過標籤名查詢 找多個
(3) document.getelementbyname
找單標籤的name值 多個
(4) document.getelementbyclassname
通過class名查詢 多個
(5) document.queryselctorall
獲取所有的元素
(1) removechild() 通過父元素刪除
(2) remove() 自己刪除
var div = document.
getelementsbytagname
("div")[
0];var span = document.
getelementsbytagname
("span")[
0];var i= document.
getelementsbytagname
("i")[
0];// 通過父元素刪除
div.
removechid
(span)
;// 自殺
i.remove()
;
兩者不同的是 ： innertext() 將文字內設定為制定位元組及其所有子節點的純文字
innerhtml() 獲取元素中的純文字和html內容
var p = document.
getelementsbytagname
("p")[
0];p.innerhtml =
"哈哈 "
; = "嘻嘻";
var link = document.getelementbyid(『link1』);
link.setattribute(「href」, 「www.jd.com」)
dom增刪改查
一 建立節點 document.createelement tag tag必須是合法的 html 元素二 dom新增 刪除節點的方法 將newnode新增成當前節點的最後乙個子節點 insertbefore newnode,refnode 將refnode 節點之前插入 newnode 節點repl...
DOM的增刪改查
1 建立li元素 var li document.createelement li 2 建立文字節點 var guangzhou document.createtextnode 廣州 3 將li元素與文字繫結在一起 li.guangzhou 4 獲取id為city的節點 var city docum...
JS的DOM操作（增刪改查）
1.通過id屬性獲取乙個元素節點物件 document.getelementbyid id1 2.通過name屬性獲取一組元素節點物件 document.getelementsbyname name1 3.通過標籤名獲取一組元素節點物件 document.getelementsbytagname l...