文章目錄

• 一.Node 介面
• 1.屬性
• 2.方法
• 二.NodeList 介面，HTMLCollection 介面
• 三.ParentNode 介面，ChildNode 介面
• 四.Document 節點
• 五.CSS 操作
• 1.CSSStyleDeclaration 介面
• (1)CSSStyleDeclaration 例項屬性
• (2)CSSStyleDeclaration 例項方法
• 六.事件
• 1.事件流
• 2.事件處理程式

DOM 是 JavaScript 操作網頁的介面，全稱為“文件物件模型”（Document Object Model）。它的作用是將網頁轉為一個 JavaScript 物件，從而可以用指令碼進行各種操作（比如增刪內容）。

DOM 的最小組成單位叫做節點（node）。文件的樹形結構（DOM 樹）

一.Node 介面

1.屬性

2.方法

二.NodeList 介面，HTMLCollection 介面

• NodeList 介面

• HTMLCollection 介面

三.ParentNode 介面，ChildNode 介面

• ParentNode 介面

• ChildNode 介面

四.Document 節點

屬性

快捷方式屬性

節點集合屬性

文件靜態資訊屬性

文件狀態屬性

document.cookie

document.designMode

document.implementation

方法

document.open()，document.close()

document.write()，document.writeln()

document.querySelector()，document.querySelectorAll()

document.getElementsByTagName() //搜尋 HTML 標籤名

document.getElementsByClassName() //搜尋 CLASS類名

document.getElementsByName() //搜尋 屬性名

document.getElementById() //搜尋 ID名

document.elementFromPoint()，document.elementsFromPoint()

document.caretPositionFromPoint()

document.createElement() //生成元素節點

document.createTextNode() //生成文字節點

document.createAttribute() //生成一個新的屬性節點

document.createEvent() //生成一個事件物件

document.addEventListener()，document.removeEventListener()，document.dispatchEvent()

document.hasFocus()

document.adoptNode()，document.importNode()

document.createNodeIterator()

document.createTreeWalker()

document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()

document.getSelection()

五.CSS 操作

操作 CSS 樣式最簡單的方法，就是使用網頁元素節點的getAttribute方法、setAttribute方法和removeAttribute方法，直接讀寫或刪除網頁元素的style屬性

div.setAttribute(
  'style',
  'background-color:red;' + 'border:1px solid black;'
);

1.CSSStyleDeclaration 介面

CSSStyleDeclaration 介面可以直接讀寫 CSS 的樣式屬性，不過，連詞號需要變成駱駝拼寫法

var divStyle = document.querySelector('div').style;

divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';

divStyle.backgroundColor // red
divStyle.border // 1px solid black
divStyle.height // 100px
divStyle.width // 100px

(1)CSSStyleDeclaration 例項屬性

• CSSStyleDeclaration.cssText 讀寫當前規則的所有樣式宣告文字

var divStyle = document.querySelector('div').style;

divStyle.cssText = 'background-color: red;'
  + 'border: 1px solid black;'
  + 'height: 100px;'
  + 'width: 100px;';
divStyle.cssText = '';         //刪除一個元素的所有行內樣式

• CSSStyleDeclaration.length 返回一個整數值，表示當前規則包含多少條樣式宣告

// HTML 程式碼如下
// <div id="myDiv"
//   style="margin: 0 10px; background-color: #CA1; border: 1px solid red;"
// ></div>
var myDiv = document.getElementById('myDiv');
var divStyle = myDiv.style;
divStyles.length // 3

(2)CSSStyleDeclaration 例項方法

• CSSStyleDeclaration.getPropertyValue() 返回一個字串，表示該屬性的屬性值

// HTML 程式碼為
// <div id="myDiv" style="margin: 10px!important; color: red;"/>
var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyValue("margin") // "10px"

• CSSStyleDeclaration.item() 返回該位置的 CSS 屬性名

// HTML 程式碼為
// <div id="myDiv" style="color: red; background-color: white;"/>
var style = document.getElementById('myDiv').style;
style.item(0) // "color"
style.item(1) // "background-color"

• CSSStyleDeclaration.removeProperty() 移除這個屬性

// HTML 程式碼為
// <div id="myDiv" style="color: red; background-color: white;">
//   111
// </div>
var style = document.getElementById('myDiv').style;
style.removeProperty('color') // 'red'
// HTML 程式碼變為
// <div id="myDiv" style="background-color: white;">

• CSSStyleDeclaration.setProperty() 設定新的 CSS 屬性

// HTML 程式碼為
// <div id="myDiv" style="color: red; background-color: white;">
//   111
// </div>
var style = document.getElementById('myDiv').style;
style.setProperty('border', '1px solid blue');

六.事件

javascripts-事件流

javascripts-事件處理程式

javascripts-事件物件

javascripts-事件型別之滑鼠事件

給Element物件附加一些事件屬性.屬性的型別是Function型別.這些Function屬性在什麼時候被執行呢?
只看屬性的名稱

常用事件的屬性名稱：

onclick ==> 單擊時觸發
ondblclick ==> 雙擊時觸發
onblur ==> 失去焦點時觸發
onfocus ==> 得到焦點時觸發
onchange ==> 用於表單元素, 當元素被修改時觸發
onkeydown ==> 當鍵盤按鍵被按下時
onmousemove ==> 當滑鼠移動時觸發
onmousedown ==> 當滑鼠按鍵按下時觸發
onmouseover ==> 當滑鼠指向時觸發
onmouseout ==> 當滑鼠移出時觸發
onsubmit ==> 當表單提交時觸發
onload ==> 只給body標籤使用.當頁面載入完成後 執行

1.事件流

冒泡型事件流：事件的傳播是從最特定的事件目標到最不特定的事件目標。即從DOM樹的葉子到根。【推薦】

捕獲型事件流：事件的傳播是從最不特定的事件目標到最特定的事件目標。即從DOM樹的根到葉子

var outerCircle= document.getElementById("outer");
outerCircle.addEventListener("click", function () {
    alert("outerCircle的click事件在捕獲階段被觸發");
},true);                //true為捕獲
outerCircle.addEventListener("click", function () {
    alert("outerCircle的click事件在冒泡階段被觸發");
},false);               //true為冒泡

2.事件處理程式

(1)html事件處理程式 ------事件直接加在html元素上

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
    alert("clicked!");
}
</script>

(2)DOM0級事件處理程式 ----------把一個函式賦值給一個事件處理程式屬性

<input id="myBtn" type="button" value="click me!"/>
<script>
	//第一步：myBtn=document.getElementById("myBtn");取得btn物件
    var myBtn=document.getElementById("myBtn");
	//第二步：myBtn.onclick其實相當於給myBtn添加了一個onclick的屬性。
	//第三步：把函式賦值給onclick事件處理程式屬性
    myBtn.onclick=function(){
        alert("clicked!");
    }
	//刪除事件
	myBtn.onclick=null;
</script>

(3)DOM2級事件處理程式

DOM2級事件處理程式可以為一個元素新增多個事件處理程式。其定義了兩個方法用於新增和刪除事件處理程式：addEventListener()和removeEventListener()

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.addEventListener("click",function(){
        alert("hello");
    },false);
	//刪除事件
    myBtn.removeEventListener("click",handler,false);
</script>