Javascript操作DOM常用API
文章目錄
Javascript操作DOM常用API
DOM 是 JavaScript 操作網頁的介面,全稱為“文件物件模型”(Document Object Model)。它的作用是將網頁轉為一個 JavaScript 物件,從而可以用指令碼進行各種操作(比如增刪內容)。
DOM 的最小組成單位叫做節點(node)。文件的樹形結構(DOM 樹)
一.Node 介面
1.屬性
屬性 | 返回值 |
---|---|
Node.prototype.nodeType | 返回一個整數值,表示節點的型別 |
Node.prototype.nodeName | 返回節點的名稱 |
Node.prototype.nodeValue | 返回一個字串,表示當前節點本身的文字值,可讀寫 |
Node.prototype.textContent | 返回當前節點和它的所有後代節點的文字內容 |
Node.prototype.baseURI | 返回相對路徑的 URL。只讀 |
Node.prototype.parentNode | 返回當前節點的父節點 |
Node.prototype.parentElement | 返回當前節點的父元素節點 |
Node.prototype.childNodes | 返回一個類似陣列的物件,當前節點的所有子節點 |
Node.prototype.isConnected | 返回一個布林值,表示當前節點是否在文件之中 |
2.方法
方法 | 作用 |
---|---|
Node.prototype.appendChild() | 接受一個節點物件作為引數,將其作為最後一個子節點,插入當前節點 |
Node.prototype.hasChildNodes() | 返回一個布林值,表示當前節點是否有子節點 |
Node.prototype.cloneNode() | 克隆一個節點。它接受一個布林值作為引數,表示是否同時克隆子節點 |
Node.prototype.insertBefore() | 插入父節點內部的指定位置 |
Node.prototype.removeChild() | 從當前節點移除該子節點 |
Node.prototype.replaceChild() | 替換當前節點的某一個子節點 |
二.NodeList 介面,HTMLCollection 介面
- NodeList 介面
屬性 | 返回值 |
---|---|
NodeList.prototype.length | 返回 NodeList 例項包含的節點數量 |
NodeList.prototype.forEach() | 遍歷 NodeList 的所有成員。可以有回撥函式(每次呼叫)作為引數 |
NodeList.prototype.item() | 返回該引數指定位置的成員 |
- HTMLCollection 介面
屬性 | 返回值 |
---|---|
HTMLCollection.prototype.length | 返回HTMLCollection 例項包含的成員數量 |
HTMLCollection.prototype.item() | 返回該指定位置上的成員 |
三.ParentNode 介面,ChildNode 介面
- ParentNode 介面
屬性 | 返回值 |
---|---|
ParentNode.children | 返回一個例項,成員是當前節點的所有元素子節點 |
ParentNode.firstElementChild | 返回當前節點的第一個元素子節點 |
ParentNode.lastElementChild | 返回當前節點的最後一個元素子節點 |
ParentNode.childElementCount | 返回一個整數,表示當前節點的所有元素子節點的數目 |
ParentNode.append() | 追加一個或多個子節點到最後一個元素子節點的後面 |
- ChildNode 介面
屬性 | 返回值 |
---|---|
ChildNode.remove() | 移除當前節點 |
ChildNode.before() | 當前節點的前面,插入一個或多個同級節點;after同理 |
ChildNode.replaceWith() | 替換當前節點 |
四.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');
六.事件
給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>