摘要：標(biāo)識，就是將頁面解析為一個文檔。標(biāo)識，就是中表示各個對象之間的關(guān)系。的標(biāo)準(zhǔn)由于的標(biāo)準(zhǔn)規(guī)范是由組織起草并定義的，所以對的定義是目前最權(quán)威的解釋。兄弟關(guān)系具有相同父級元素的兩個或幾個元素之間的兄弟關(guān)系。是返回值，表示定位元素的集合，是一個集合。

如何使用JavaScript script元素

外聯(lián)JavaScript文件所有外聯(lián)JavaScript文件，類似于外聯(lián)樣式表的用法，將JavaScript代碼編寫在獨立的JavaScript文件中，再通過HTML頁面的
##引入位置

在元素內(nèi)部

在元素內(nèi)部

DOM是什么 DOM是什么

dom是什么

DOM是個縮寫，全稱是Document Object Model，被譯為文檔對象模型。
D標(biāo)識Document，就是DOM將HTML頁面解析為一個文檔。同時提供了document對象。
O標(biāo)識Objcet，就是DOM將HTML頁面中每一個元素解析為一個對象。
M 標(biāo)識Model，就是Dom中表示各個對象之間的關(guān)系。

DOM的標(biāo)準(zhǔn)

由于DOM的標(biāo)準(zhǔn)規(guī)范是由W3C組織起草并定義的，所以W3C對DOM的定義是目前最權(quán)威的解釋。
DIN是一個獨立于任何語言和平臺的接口，允許任何語言或腳本動態(tài)地訪問和更新HTML文檔的內(nèi)容，結(jié)構(gòu)和樣式。該HTML頁面可以僅一部處理，并且該處理的結(jié)果可以被合并到所呈現(xiàn)的html頁面中。

DOM的作用

DOM被設(shè)計用于解析HTML頁面文檔，方便JavaScript語言通過DOM訪問和操作HTML頁面中的內(nèi)容。
DOM是由W3C組織定義標(biāo)準(zhǔn)規(guī)范，并且由各大瀏覽器廠商支持。嚴(yán)格意義上來將，DOM并非術(shù)語JavaScript語言。
我們之所以可以在JavaScript語言中使用DOM，是因為各大瀏覽器將DOM的標(biāo)準(zhǔn)規(guī)范內(nèi)容封裝成了JavaScript語言所支持的形式。
對DOM中的對象，我們只有調(diào)用的權(quán)限，沒有修改的權(quán)限，也說明了這個問題。

DOM的作用

瀏覽器加載并運行HTML頁面后，會創(chuàng)建DOM結(jié)構(gòu)。由于DOM中的內(nèi)容被封裝成了JavaScript語言中的對象，所以我們可以使用
JavaScript語言通過DOM結(jié)構(gòu)來訪問和操作HTML頁面中的內(nèi)容。

DOM樹結(jié)構(gòu)

DOM樹結(jié)構(gòu)

DOM可以訪問和更新HTML頁面中的內(nèi)容，結(jié)構(gòu)和樣式，是因為DON將HTML頁面解析為一個樹結(jié)構(gòu)。

這是一個示例頁面

這是一個段落內(nèi)容.

節(jié)點是什么

節(jié)點(Node)原本是網(wǎng)絡(luò)術(shù)語，表示網(wǎng)絡(luò)中的連接點。一個網(wǎng)絡(luò)是由一些節(jié)點構(gòu)成的集合。
在DOM樹狀結(jié)構(gòu)中，節(jié)點也是很中煙的一個概念。簡單的說，節(jié)點作為DOM樹結(jié)構(gòu)中的連接點，最終構(gòu)成了完整的DOM樹結(jié)構(gòu)。

節(jié)點之間的關(guān)系

DOM中的M表示Model（模型），也可以用來表示DOM節(jié)點樹結(jié)構(gòu)中節(jié)點之間的關(guān)系；在DOM節(jié)點樹結(jié)構(gòu)，主要由以下三層關(guān)系：
父級于子級：如果將HTML頁面中摸一個元素作為父級的話，那包含在該元素內(nèi)的第一層所有元素都可以稱之為該元素的子級。
祖先與后代：如果將HTML頁面中的摸一個元素作為父級的話，那包含在該元素內(nèi)的所有元素(除了子級元素之外)都可以稱之為該元素的后代。
兄弟關(guān)系：具有相同父級元素的兩個或幾個元素之間的兄弟關(guān)系。
DOM訪問和更新HTML頁面中的內(nèi)容，主要依靠DOM節(jié)點樹結(jié)構(gòu)中的以上三種節(jié)點關(guān)系完成。

Document對象 Document對象是什么

Document對象是什么

Document對象是DOM 的標(biāo)準(zhǔn)規(guī)范中比較中還要的對象之一。該對象提供了訪問和更新HTML頁面內(nèi)容的屬性和方法。
Document對象作為DOM訪問和更新HTML頁面內(nèi)容的入口。簡單來說，可以把Documtnt對象理解為在DOM的變成規(guī)范中代表HTML頁面。
Document對象提供了屬性和方法，可以實現(xiàn)定位HTML頁面中的元素，或者創(chuàng)建新的元素等功能。

繼承鏈關(guān)系

Document對象是繼承于Node對象的。Node對象也是DOM的便準(zhǔn)規(guī)范中非常重要的對象之一，而Node對象又是繼承于EventTarget對象。
console.log(Document.prototype.instanceof Node);
console.log(Node.prototype instanceof EventTarget);
console.log(Document.prototype instanceof EventTarget);
Documen對象的屬性和方法多是繼承于Ndoe對象和EventTarget對象的。當(dāng)然，也有一部分屬性和方法是實現(xiàn)了HTMLDocument接口的。

定位頁面元素

定位元素方法方法

Document對象提供了屬性和方法實現(xiàn)了定位頁面元素功能，這也是
DOM的便準(zhǔn)規(guī)范中的DOcument對象的主要應(yīng)用之一。
Document對象提供實現(xiàn)定位頁面元素的方法具有如下幾種：
getElementByld()方法：通過頁面元素的id屬性值定位元素。
getElementsByName()方法：通過頁面元素的name屬性值定位元素
getElmentsByTarName()方法：通過頁面元素的元素定位元素。
getElementsByClassName（）方法：通過頁面元素的class屬性值定位元素。
querySelector（）方法：通過CSS選擇器定位第一個匹配的元素。
querySelectorAll（）方法：通過CSS選擇器定位所有匹配的元素

ID屬性值定位元素

HTML頁面元素的id屬性是特點是唯一，不可重復(fù)的，所有通過這種方式定位的HTML頁面元素是也是唯一的。
var elemnt= document.getElementById（id）；
注意：如果HTML頁面中不存在具有該id屬性值的元素，則返回null。
var btn = document.getElementById("btn");
//獲取定位元素的class屬性值
var vlassname=btn.className;
//添加animate動畫樣式
classNmane+="antmate"；
//將新的class屬性值設(shè)置
btn.className =className；

name屬性值定位元素

其語法格式如下：
var elements =document.getElementsByName(name)；
name是參數(shù)，表示索要定位元素的name屬性值，是一個大小寫敏感的字符串。
elements是返回值，表示定位元素的集合，是一個NodeList集合。
var elems = document.getElementsByName("btn");
//循環(huán)遍歷所有元素
for (var i=0;ivar elem =elems[i];
var className =elem.className;
classNmae+="animate";
elem.className=className;}

元素名定位元素

其語法格式如下:
var elements =document.getElementsByTagName(name);
name是參數(shù)，表示所要定位元素的元素名，符號"*"所表示所有元素。
elements是返回值，表示定位元素的集合，是一個NodeList集合。
var elems =document.getEkementsByTarName（"button）;
//循環(huán)遍歷所有元素
for (var i=0; ivar elem =elems[i];
car className+="animate"；
elem.className=className；}

class屬性值定位元素

其語法格式如下：
var elements =document.getElementsByClassName(name)；
name是參數(shù)，表示索要定位元素的name屬性值，是一個大小寫敏感的字符串。
elements是返回值，表示定位元素的集合，是一個NodeList集合。
var elems = document.getElementsByClassName("btn");
//循環(huán)遍歷所有元素
for (var i=0;ivar elem =elems[i];
var className =elem.className;
classNmae+="animate";
elem.className=className;}

CSS選擇器定位元素

CSS中的選擇器可以很便利地定位HTML頁面元素，DOM地標(biāo)準(zhǔn)規(guī)范中也提供類似地方法。
querySelector（）方法：通過CSS選擇器定位第一個匹配地元素。
var elements =document.querySelector(selectors
);
selectors是參數(shù)，表示選擇器，可以包含一個或多個CSS選擇器，多個則以逗號分隔。
element是返回值，表示定位元素地集合，匹配地第一個元素。、
var btn = document.querySelector(#btn);
//獲取定位元素地class屬性值
var className=btn.className；
//添加animate動畫樣式
className+="animate"；
//將新的class屬性值設(shè)置
btn.className=calssName；

querySelectorAll()方法：
通過CSS選擇器定位所有匹配地元素
var elements =document.querySelector(selectors
);
selectors是參數(shù)，表示選擇器，可以包含一個或多個CSS選擇器，多個則以逗號分隔。
element是返回值，表示定位元素地集合，是一個NodeList集合。
var btn = document.querySelectorALL("button");
//獲取定位元素地class屬性值
var className=btn.className；
//添加animate動畫樣式
className+="animate"；
//將新的class屬性值設(shè)置
btn.className=calssName；

節(jié)點集合NodeList

NodeList是一組元素節(jié)點地集合，每一個節(jié)點具有相應(yīng)地索引值(從開始地數(shù)字，類似于數(shù)組)。
NodeList集合分為兩種：
動態(tài)NodeList
所謂動態(tài)地NodeList集合，就是如果文檔中地節(jié)點樹發(fā)生變化，則已經(jīng)存在地NodeList對象也可以能會變化。
getElementsByName()方法：通過頁面元素地name屬性值定位元素。
getElementsByTagName（）方法：通過頁面元素地元素名定位元素。
getElemengtsByClassName()方法：通過頁面元素地class屬性值定位元素。
靜態(tài)NodeList
所謂靜態(tài)NdeList集合，就是對文檔對象模型地任何改動都不會影響集合地內(nèi)容。
定位頁面元素屬性
Document對象也提供了一些屬性，來定位HTML頁面中地一些比較特殊地元素
documentElemengt：獲取HTML頁面中地元素。
head：獲取HTML頁面中地
title:或者HTML頁面中地