DOM文件物件模型 -
DOM文件物件模型 -
-
DOM 節點操作
HTML文件中的每一個成員都是一個節點物件，節點物件具有自己的屬性和方法。
1.1. 特殊節點
1.1.1. html節點
document.documentElement -> html標籤
可返回存在於 XML 以及 HTML 文件中的文件根節點
1.1.2. body節點
document.body -> body標籤
對 HTML 頁面的特殊擴充套件，提供了對 <body> 標籤的直接訪問。
如果我們要對頁面上新增顯示元素，一般來說會使用這種方式。
我們要注意的區別：
document.documentElement.clientHeight 它拿到的是整個視窗高度
document.body.clientHeight 拿到內容的高度
1.2. 節點分類
|
|
nodeName |
nodeValue |
nodeType |
|
Element(元素) |
標籤名稱 |
null |
1 |
|
Attribute(屬性) |
屬性的名稱 |
屬性的值 |
2 |
|
Text(文字) |
#text |
文字的內容 |
3 |
1.3. Node物件的屬性與方法總表
|
查詢節點 |
|
|
|
方法 |
getElementById(); |
返回對擁有指定 id 的第一個物件的引用。 |
|
getElementsByName() |
返回帶有指定名稱的物件集合。 |
|
|
getElementsByTagName() |
返回帶有指定標籤名的物件集合。 |
|
|
getElementsByClassName(); |
返回帶有指定類名的物件集合 |
|
|
屬性 |
parentNode |
父節點 |
|
firstChild |
列表中的第一個節點 |
|
|
lastChild |
列表中的最後一個節點 |
|
|
childNodes |
所有子節點的列表 |
|
|
previousSibling |
上一個兄弟節點 |
|
|
nextSibling |
下一個兄弟節點 |
|
|
增加節點 |
|
|
|
|
appendChild() |
追加節點 |
|
insertBefore() |
插入節點 |
|
|
修改節點 |
|
|
|
|
replaceChild() |
替換節點 |
|
刪除節點 |
|
|
|
|
removeChild() |
刪除節點 |
|
建立節點 |
|
|
|
|
createElement() |
建立一個元素節點 |
|
createTextNode() |
建立一個文字節點 |
|
|
setAttribute() |
給某個節點新增一個屬性 |
|
|
getAttribute() |
獲取某個節點屬性的值。 |
|
|
節點資訊 |
|
|
|
|
nodeName |
節點名稱 |
|
nodeValue |
節點值 |
|
|
nodeType |
節點型別 |
1.4. 節點例項
1.4.1. 查詢節點
<ul id="parent">
<li>第一行</li><li id="two">第二行</li><li>第三行</li><li>第四行</li>
</ul>
//查詢two的父節點
//>>1. 獲取two節點
var two = document.getElementById("two");
//>>2. 查詢two的父節點
var parObj = two.parentNode;
log(parObj);
//查詢parent中第一個子節點
//>>1. 找到parent
var parent = document.getElementById("parent");
//>>2. 找第一個子節點
log(parent.firstChild);
//查詢parent中第最後一個子節點
//>>1. 找到parent
var parent = document.getElementById("parent");
//>>2. 找最後一個子節點
log(parent.lastChild);
//查詢所有子節點列表：
//>>1. 找到parent
var parent = document.getElementById("parent");
//>>2. 所有子節點
log(parent.childNodes);
//查詢two的上一個兄弟
//>>1. 獲取two節點
var two = document.getElementById("two");
//>>2. 查詢two的上一個兄弟
var preObj = two.previousSibling;
log(preObj);
1.4.2. 增加節點
<ul id="parent">
<li>第一行</li>
<li id="two">第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
//需求： 在parent中新增一個新節點
//>>1. 建立一個新節點；
//>>1.1 建立元素節點
var liobj = document.createElement("li");
//>>1.2 建立屬性節點
liobj.className = "xxx";
//>>1.3 建立文字節點
liobj.innerHTML = "<p>我是新增的段落</p>";
//>>2. 把新節點新增到parent中
//>>2. 1 獲取parent節點
var parent = document.getElementById("parent");
//>>2. 2 在parent中追加新節點
parent.appendChild(liobj);
//需求：在two節點之前插入新節點
//>>1. 建立新節點
//>>1.1 建立元素節點
var liobj = document.createElement("li");
//>>1.2 建立屬性節點
liobj.className = "yyy";
//>>1.3 建立文字節點
liobj.innerHTML = "我是新節點";
//>>2. 找到要在哪個節點之前新增
var two = document.getElementById("two");
//>>3. 具體新增
//>>3. 1 獲取parent節點
var parent = document.getElementById("parent");
//>>3. 2具體新增
parent.insertBefore(liobj,two);
1.4.3. 修改節點
<ul id="parent">
<li>第一行</li>
<li id="two">第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
//需求： 用新節點替換two節點
//>>1. 建立新節點
//>>1.1 建立元素節點
var liobj = document.createElement("li");
//>>1.2 建立屬性節點
liobj.className = "xxx";
//>>1.3 建立文字節點
liobj.innerHTML = "<p>我是新增的段落</p>";
//>>2. 獲取要替換的節點
var two = document.getElementById("two");
//>>3. 替換
//>>3.1 獲取父元素
var parent = document.getElementById("parent");
//>>3.2 用新元素替換舊元素
parent.replaceChild(liobj,two);
//>>4. 替換屬性節點
liobj.className = "aaa";
1.4.4. 刪除節點
<ul id="parent">
<li>第一行</li>
<li id="two">第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
//需求： 刪除two節點
//>>1. 獲取父元素
var parent = document.getElementById("parent");
//>>2. 刪除指定節點
//>>2.1 獲取要刪除的節點
var two = document.getElementById("two");
//>>2.2 刪除
parent.removeChild(two);
//需求： 刪除parent中所有節點
//>>1. 獲取父元素
var parent = document.getElementById("parent");
//>>2. 獲取父元素中所有的子元素
var child = parent.childNodes;
//>>3. 刪除子元素
//>>3.1 遍歷子元素
for(var i=child.length-1; i>=0; i--){
//>>3.2刪除所有子元素
parent.removeChild(child[i]);
}
-
事件
2.1. 什麼是事件？
事件是使用者與計算機互動的行為。比如：單擊按鈕、滑鼠放上、滑鼠移開等等。
事件例子：
HTML 事件的例子：
當用戶點選滑鼠時
當網頁已載入時 onload（文件載入完畢）
當網頁被解除安裝時 onbeforeunload（文件即將從瀏覽器中解除安裝）
當圖片已載入時
當滑鼠移動到元素上時
當輸入欄位被改變時
當 HTML 表單被提交時
當用戶觸發按鍵時
2.2. 事件的四要素
事件源：事件發生的源頭，就是事件發生的那個標籤
事件型別：發生的是什麼事件，比如：點選click
事件處理函式：當事件發生時，去呼叫的函式
事件物件：事件發生時的相關資訊都儲存到事件物件中
2.3. 註冊事件三種方式
2.3.1. 在標籤上新增事件
2.3.2. 在DOM物件上註冊事件
2.3.3. W3C標準方法註冊事件
W3C標準新增事件方式:
target.addEventListener(type, listener, useCapture);
引數介紹:
target： 文件節點、document、window 或 XMLHttpRequest。
type： 字串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實現了 EventListener 介面或者是 JavaScript 中的函式。
useCapture：是否使用捕捉，true為捕捉，false為冒泡，一般用 false 。
例如：
target.addEventListener("keydown",function (event){
alert(event.keyCode);
}, false);
W3C標準刪除事件：
target.removeEventListener(event,function);
2.4. 常用事件
|
滑鼠事件 |
||
|
click |
點選事件 |
點選滑鼠左鍵觸發 |
|
dblclick |
雙擊事件 |
雙擊滑鼠左鍵觸發 |
|
mouseover |
移入事件 |
滑鼠指標移到一個元素上觸發 |
|
mouseout |
移出事件 |
滑鼠指標移出一個元素上觸發 |
|
mousemove |
移動事件 |
滑鼠在一個元素上移動持續觸發 |
|
mousedown |
滑鼠按下 |
單擊滑鼠任何一個按鍵觸發 |
|
mouseup |
滑鼠抬起 |
鬆開滑鼠任何一個按鍵觸發 |
|
鍵盤事件 |
||
|
keydown |
鍵按下 |
使用者按下一個鍵盤按鍵時觸發 |
|
keyup |
鍵彈起 |
使用者在鍵盤按鍵被鬆開時觸發 |
|
keypress |
按鍵一次 |
按下且抬起一個鍵 |
|
表單事件 |
||
|
submit |
表單提交 |
|
|
input |
輸入事件 |
HTML5新增事件，輸入內容時觸發 |
|
blur |
元素失去焦點 |
|
|
focus |
元素獲取焦點 |
|
|
change |
使用者改變域的內容 |
|
|
視窗事件 |
||
|
load |
視窗載入 |
是網頁載入完畢時發生 |
2.5. 事件的捕捉和冒泡
向下是捕獲1-2-3-4,向上是冒泡5,6,7,8
事件的捕獲和冒泡只能夠通過W3C標準註冊事件的方式來完成
2.6. 事件處理函式返回值
某些事件發生時，瀏覽器會自動執行預設的動作。而事件控制代碼的返回值會影響瀏覽器預設動作的執行。如果事件控制代碼不返回值，或者返回true，預設動作被執行；如果事件控制代碼返回false，則預設動作不發生。
例如：當單擊刪除連結時
<a href="http://www.sina.com.cn" onclick="return confirm('是否確認刪除操作？')">刪除商品</a>
/*
需求:點選刪除按鈕，彈出一個提示框，
如果點選是確定按鈕，執行瀏覽器預設行為： 否則： 阻止瀏覽器預設行為
*/
<a href="http://www.baidu.com" onclick="return a()">刪除1</a>
//1. 定義函式
function a(){
//彈出提示框
var result = confirm("是否刪除資料");
//判斷result，阻止瀏覽器預設行為
if(!result){
return false;
}
}