DOM
DHTML：動態(tài)的HTML,不是新的語言，標準烁设、規(guī)范和橙，就是將現有的技術整合删窒，讓我們的網頁能夠實時變換-----DHTML=HTML+CSS+JS（DOM）
W3C DOM 標準分為3部分
- 1砸彬、核心DOM：針對任何結構化文檔的標準模型颠毙，為任何符合W3C標準的文檔提供了同一個操作方法
- 2、XML
- 3砂碉、HTML DOM
針對HTML文檔提供的標準模型
提供的方式只能操作HTML文檔
一蛀蜜、DOM樹
HTML DOM將HTML文檔看做一個倒掛的樹狀結構，在HTML文檔中增蹭，所有的元素涵防、屬性、文本沪铭、注釋都會被看做樹狀結構的一個節(jié)點。
document
由JS解釋器負責創(chuàng)建偏瓤，每個頁面有且僅有一個document對象杀怠，document能對頁面中所有的元素進行訪問。
選取元素
主要是獲取頁面元素的相關方法
1厅克、通過HTML選取元素
*（1）赔退、通過ID選取元素
語法：document.getElementId('元素ID值')
在當前DOM樹中，根據元素ID证舟，獲取具體子元素
返回：對應的元素對象硕旗，可以稱之為DOM元素或者DOM對象
*（2）、通過標簽名 選取元素
語法：node.getElementByTagName（‘標簽名’）女责；
node：是一個元素對象
在node元素范圍內漆枚，查找滿足指定標簽名的子元素
document.getElementsByTagName("a"); //所有的a標簽
<div id="d1">
<span>span1</span>
<span>span2</span>
</div>
<span>span3</span>
var d1=document.getElementById("d1");
d1.getElementsByTagName("span");
返回：數組（動態(tài)集合）
*(3)、通過class選取元素
語法：element.className='important';
節(jié)點間關系
- [ ] 父節(jié)點（parent node）
- [ ] 子節(jié)點（child node）
- [ ] 兄弟節(jié)點（sibling） DOM中所有的節(jié)點對象抵知，都具備一下屬性
- [ ] 父子級關系
parentNode：獲取當前節(jié)點的父節(jié)點
childNodes：獲取當前節(jié)點下的所有子節(jié)點墙基，返回數組
irstChild：獲取第一個子節(jié)點
lastChild：獲取最后一個子節(jié)點- [ ] 平行關系
previousSibling：獲取上一個兄弟節(jié)點 nextSibling：獲取下一個兄弟節(jié) previousElementSibling：獲取上一個 元素 兄弟節(jié)點 nextElementSibling：獲取下一個 元素
兄弟節(jié)點
讀取和修改節(jié)點對象
- 1软族、 元素內容
- [ ] html內容
屬性：innerHTML
使用方法：元素對象。innerHTML
var msg=xx.innerHTML; //獲取残制，并且包含里面的子標簽 xx.innerHTML=""; //賦值- [ ] 文本內容
屬性：textContent
作用：讀取或設置HTML標記的文本內容立砸，與HTML無關
注意：IE8顯示有問題；
解決方案：屬性：innerText- 2初茶、元素的屬性
屬性集合：包含當前元素的所有屬性
如何獲取屬性集合
屬性：attributes
使用方法：DOM對象.attributes
返回：類數組對象
- [ ] 1颗祝、讀取屬性值：
1、element.attributes[下標].value
2恼布、element.attributes["屬性名"].value
3螺戳、element.getAttributeNode["屬性名"].value
4、element.getAttribute("屬性名")- [ ] 2桥氏、設置/修改屬性值
1温峭、element.setAttribute("屬性名稱","值");- [ ] 3、設置/修改屬性值
1字支、元素.屬性名="值";
- 3凤藏、元素樣式
- [ ] 1、css定義方式
1堕伪、內聯 2揖庄、內部 3、外部 2欠雌、元素樣式 1蹄梢、操作元素的行內樣式
JS中最常用的操作是訪問元素的內聯樣式
屬性：style
返回：CSSStyleDeclaration類型的對象
該對象中，包含當前元素定義好的所有內聯樣式
通過樣式屬性名稱獲取或者修改當前元素的內聯樣式
CSS JS
width width
background-color backgroundColod
border-bottom-color borderBottomColor
獲取樣式：element.style.屬性名 --> 返回的所有數據是string類型富俄，如果有單位的話禁炒，也會將單位一起返回
設置樣式：element.style.屬性名="value",設置的值也是字符串，如果帶單位霍比，需要將單位一同設置 2幕袱、獲取計算的樣式
計算的樣式：內部樣式表，外部樣式表中的屬性悠瞬，是經過計算的
計算的樣式
DOM: document.defaultView.getComputedStyle(domyuansu).屬性名;
IE:
元素對象.currentStyle.屬性; 3们豌、修改樣式表中的樣式
1、先獲取樣式表對象
var sheets = document.styleSheets;
var sheet=document.styleSheets[i]; 2浅妆、獲取樣式表中所有的樣式規(guī)則
var rules=sheet.cssRules || sheet.rules;
3望迎、獲取規(guī)則集合中，包含要修改屬性的規(guī)則
var rule = rules[i];
4凌外、獲取或設置規(guī)則中的屬性值
rule.style.屬性名="值";
