DOM概覽
文檔對(duì)象模型（DOM）是表示和操作HTML和XML文檔內(nèi)容的基礎(chǔ)API匹厘。
選取文檔元素
- 用指定的id屬性蹭睡；
- 用指定的name屬性；
- 用指定的標(biāo)簽屬性捐韩；
- 用指定的css類库继；
- 匹配指定的css選擇器箩艺。
通過ID選取元素
var section1 = document.getElementById("section1");
通過名字選取元素
var radiobuttons = document.getElementsByName("favorite_color");
getElementsByName()定義在HTMLDocument類中，而不在Document類中宪萄，所以它只針對(duì)HTML文檔可用艺谆，在XML文檔中不可用。它返回一個(gè)NodeList對(duì)象拜英，后者的行為類似一個(gè)包含若干Element對(duì)象的只讀數(shù)組静汤。
//有些元素可以作為Document屬性僅通過名字來選取
//針對(duì)***<form name="shipping_address">***
var form = document.shipping_address;
通過標(biāo)簽名選取元素
var spans = document.getElementsyTagName("span");
該方法返回一個(gè)NodeList對(duì)象。并且不區(qū)分大小寫。
給getElementsyTagName（）傳遞通配符參數(shù)將獲得一個(gè)代表文檔中所有元素的NodeList對(duì)象虫给。*
通過CSS類選取元素
var test = document.getElementByClassName("class_1");
通過CSS選擇器選取元素
#nav //id="nav"的元素
div //所有<div>元素
.warning //所有在class屬性值中包含了“warning”的元素
p[lang="fr"] //所有使用法語的段落藤抡，如：<p lang="fr">
*[name="x"] //所有包含name="x"屬性的元素
#log>span //id="log"元素的子元素中的所有<span>元素
body>h1:first-child //<body>的子元素中的第一個(gè)<h1>元素
div，#log //所有<div>元素抹估，以及id="log"的元素
document.all[]
document.all[0] //文檔中第一個(gè)元素
document.all["navbar"] //id或name為"navbar"的元素（或多個(gè)元素）
document.all.navbar //同上
document.all.tags("div") //文檔中所有的<div>元素
document.all.tags("p")[0] //文檔中第一個(gè)<p>元素
文檔結(jié)構(gòu)和遍歷
作為節(jié)點(diǎn)樹的文檔
Document對(duì)象缠黍、它的Element對(duì)象和文檔中表示文本的Text對(duì)象都是Node對(duì)象。有以下屬性：
- parentNode：該節(jié)點(diǎn)的父節(jié)點(diǎn)药蜻，如果沒有父節(jié)點(diǎn)就是null瓷式；
- childNodes: 只讀的類數(shù)組對(duì)象（NodeList對(duì)象），它是該節(jié)點(diǎn)的子節(jié)點(diǎn)的實(shí)時(shí)表示谷暮；
- firstChild蒿往、lastChild： 該節(jié)點(diǎn)的子節(jié)點(diǎn)中的第一個(gè)和最后一個(gè)，沒有則為null湿弦；
- nextSibling瓤漏、previousSibling： 該節(jié)點(diǎn)的兄弟節(jié)點(diǎn)中的前一個(gè)和后一個(gè)。
- nodeType: 該節(jié)點(diǎn)的類型颊埃。
- 9：Document節(jié)點(diǎn)
- 1： Element節(jié)點(diǎn)
- 3： Text節(jié)點(diǎn)
- 8： Comment節(jié)點(diǎn)
- 11： DocumentFragment節(jié)點(diǎn)
- nodeValue: Text節(jié)點(diǎn)或Comment節(jié)點(diǎn)的文本內(nèi)容蔬充。
- nodeName: 元素的標(biāo)簽名，以大寫形式表示班利。
屬性
HTML屬性作為Element屬性
數(shù)據(jù)集屬性
在HTML5文檔中饥漫，任意以“data-”為前綴的小寫的屬性名字都是合法的。
HTML5還在Element對(duì)象上定義了dataset屬性罗标。該屬性指代一個(gè)對(duì)象庸队，它的各個(gè)屬性對(duì)應(yīng)于去掉前綴的data-屬性。因此dataset.x應(yīng)保存data-x屬性的值闯割。
作為Attr節(jié)點(diǎn)的屬性
Node類型定義了attributes屬性彻消。
元素的內(nèi)容
作為HTML的元素內(nèi)容
作為純文本的元素內(nèi)容
var para = document.getElementByTagName("p")[0]; //文檔中第一個(gè)<p>
var text = para.textContent; //文本是“This is a simple document.”
para.textContent = "Hello"; //修改段落內(nèi)容
創(chuàng)建、插入和刪除節(jié)點(diǎn)
創(chuàng)建節(jié)點(diǎn)
var newNode = document.createTextNode("text node content");
每個(gè)節(jié)點(diǎn)有一個(gè)cloneNode（）方法來返回該節(jié)點(diǎn)的一個(gè)全新副本宙拉。
插入節(jié)點(diǎn)
一旦有一個(gè)新節(jié)點(diǎn)宾尚，就可以用Node的方法appendChild()或insertBefore()將它插入到文檔中。
刪除和替換節(jié)點(diǎn)
- removeChild()方法是從文檔樹中刪除一個(gè)節(jié)點(diǎn)谢澈。在父節(jié)點(diǎn)上調(diào)用該方法煌贴，并將需要?jiǎng)h除的子節(jié)點(diǎn)作為方法參數(shù)傳遞給它。
//刪除n節(jié)點(diǎn)
n.parentNode.removeChild(n);
- replaceChild()方法刪除一個(gè)子節(jié)點(diǎn)并用一個(gè)新的節(jié)點(diǎn)取而代之锥忿。父節(jié)點(diǎn)上調(diào)用牛郑，第一個(gè)參數(shù)是新節(jié)點(diǎn)，第二個(gè)參數(shù)是需要代替的節(jié)點(diǎn)
//用一個(gè)文本字符串來替換節(jié)點(diǎn)n
n.parentNode.replaceChild(document.createTextNode("[REDACTED]",n);
使用DocumentFragment
DocumentFragment是一種特殊的Node敬鬓，它作為其他節(jié)點(diǎn)的一個(gè)臨時(shí)的容器淹朋。
//創(chuàng)建一個(gè)DocumentFragment
var frag = document.createDocumentFragment();
DocumentFragment是獨(dú)立的灶似。它的parentNode總是為null，但是他可以有任意多的子節(jié)點(diǎn)瑞你，可以用appendChild()和insertBefore()等方法來操作它們。
文檔和元素的幾何形狀和滾動(dòng)
文檔坐標(biāo)和視口坐標(biāo)
為了在坐標(biāo)系之間互相轉(zhuǎn)換希痴，我們需要判定瀏覽器窗口的滾動(dòng)條的位置者甲。window對(duì)象的pageXOffset和pageYOffset屬性在所有的瀏覽器中提供這些值。
查詢?cè)氐膸缀纬叽?/h3>
var box = e.getBoundingClientRect(); //獲得在視口坐標(biāo)中的位置
var offsets = getScrollOffsets(); //上面定義的工具函數(shù)
var x = box.left + offsets.x; //轉(zhuǎn)化為文檔坐標(biāo)
var y = box.top + offsets.y;
HTML表單
![]()
表單元素1
![]()
表單元素2
選取表單和表單元素
//name = "address"屬性的<form>可以用以下任何方法來獲取
document.address //僅當(dāng)表單有name屬性時(shí)可用
document.forms.address //顯式訪問有name或id的表單
//如果名為“address”的表單的第一個(gè)元素的name是“street”砌创，可以使用以下任何一種方式來引用該元素
document.forms.address[0]
document.forms.address.street
document.address.street //當(dāng)有name=“address”虏缸，而不是只有id="address"
document.forms.address.elements.street
//如果要明確的選取一個(gè)表單元素，可以索引表單對(duì)象的elements屬性
document.forms.address.elements[0]
document.forms.address.elements.street
表單和元素的屬性
- type:標(biāo)識(shí)表單元素類型的只讀的字符串嫩实。
- form：對(duì)包含元素的Form對(duì)象的只讀引用刽辙。
- name：只讀的字符串，由HTML屬性name指定甲献。
- value：可讀/寫的字符串宰缤，指定了表單元素包含或代表的“值”。
var box = e.getBoundingClientRect(); //獲得在視口坐標(biāo)中的位置
var offsets = getScrollOffsets(); //上面定義的工具函數(shù)
var x = box.left + offsets.x; //轉(zhuǎn)化為文檔坐標(biāo)
var y = box.top + offsets.y;
//name = "address"屬性的<form>可以用以下任何方法來獲取
document.address //僅當(dāng)表單有name屬性時(shí)可用
document.forms.address //顯式訪問有name或id的表單
//如果名為“address”的表單的第一個(gè)元素的name是“street”砌创，可以使用以下任何一種方式來引用該元素
document.forms.address[0]
document.forms.address.street
document.address.street //當(dāng)有name=“address”虏缸，而不是只有id="address"
document.forms.address.elements.street
//如果要明確的選取一個(gè)表單元素，可以索引表單對(duì)象的elements屬性
document.forms.address.elements[0]
document.forms.address.elements.street
