1.節點的概念
2.節點的屬性(nodeType,nodeName,nodeValue)
3.父節點(父元素)
4.獲取子節點或子元素
5.獲取節點、元素的方法（12行代碼）
6.案例：div標簽里面的p標簽背景高亮(使用子節點或子元素的方式)
7.封裝節點兼容代碼
8.案例：切換背景圖片
9.案例：全選、全不選
10.元素創建的第一種方式 document.write("<p>文本</P>");
11.元素創建的第二種方式 document.getElementById("divId").innerHTML="<p>新添加的文本</P>";
12.案例：點擊按鈕，在div中加載一張圖片
13.案例：動態創建列表(元素創建的第二種方式)
14.第三種元素創建方式 var pEle = document.createElement("p");
15.案例：動態創建列表(使用第三種元素創建方式)
16.動態創建表格(使用第三種元素創建方式)
17.【操作元素的一些方法】
18.點擊按鈕，創建元素(只創建一次)
19.為元素綁定多個事件
20.為元素綁定事件的兼容代碼
21.解綁事件的三種方式
22.解綁事件的兼容代碼
23.事件冒泡、阻止事件冒泡
24.事件的3個階段
25.為同一個元素綁定多個不同事件，事件使用同一個處理函數
26.案例：模擬百度搜索
1.節點的概念 <--返回目錄
* 文檔：document
* 元素：element,頁面中所有的標簽都是元素，標簽--元素--對象
* 節點：node，頁面中所有的內容(標簽、屬性、文本)
* 根元素：html這個標簽
2.節點的屬性(nodeType,nodeName,nodeValue) <--返回目錄
* 節點的屬性：可以通過標簽(屬性或文本).點出來
* 節點類型nodeType:1--標簽，2--屬性，3--文本
* 節點名稱nodeName：標簽節點--大寫的標簽名字，屬性節點--小寫的屬性名字，文本節點--#text
* 節點的值nodeValue:標簽節點--null，屬性節點--屬性值，文本節點--文本內容
3.父節點(父元素) <--返回目錄
* 只有標簽可以作為父節點(父元素)
- 獲取所有的父節點 ele.parentNode;
- 獲取所有的父元素 ele.parentElement;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<div id="box">
div里面的文本
<p>p里面的文本</p>
</div>
<script type="text/javascript">
var pEle = document.getElementById("box").getElementsByTagName("p")[0];
console.log(pEle.parentNode);//[object HTMLDivElement]---說明父節點是標簽
console.log(pEle.parentElement);//[object HTMLDivElement]---說明父元素是標簽
var parentEle= pEle.parentNode; //獲取父標簽
console.log(parentEle.nodeType); //1--標簽類型
console.log(parentEle.nodeName); //DIV--標簽名字
console.log(parentEle.nodeValue); //null--標簽的值
</script>
</body>
</html>
4.獲取子節點或子元素 <--返回目錄
* 獲取所有的子節點 ele.childNodes;
* 獲取所有的子元素(子標簽) ele.children;
【獲取子節點或子元素】
<div id="box"> div里面的文本 <p>p里面的文本</p> <a href=""></a> </div> <script type="text/javascript"> var divEle = document.getElementById("box"); console.log(divEle.childNodes);//子節點NodeList(5) [ #text, p, #text, a, #text ] console.log(divEle.children);//子元素HTMLCollection [ p, a ] </script>
代碼：【獲取子節點】
<div id="box"> div里面的文本 <p>p里面的文本</p> <a href="">a標簽里面的文本</a> </div> <script type="text/javascript"> var divEle = document.getElementById("box"); var _childNodes = divEle.childNodes;//子節點NodeList(5) [ #text, p, #text, a, #text ] for(var i=0;i<_childNodes.length;i++){ console.log(_childNodes[i].nodeType+"---"+_childNodes[i].nodeName+"---"+_childNodes[i].nodeValue); } </script>
結果：
3---#text---div里面的文本
1---P---null
3---#text---
1---A---null
3---#text---
【根據屬性名字獲取屬性節點】
<script type="text/javascript">
var ele = document.getElementById("txt");
var attNode = ele.getAttributeNode("name");
console.log(attNode);//屬性節點name="username"
alert(attNode);//屬性節點[object Attr]
console.log(attNode.nodeType+"---"+attNode.nodeName+"---"+attNode.nodeValue);//2---name---username
</script>
5.獲取節點、元素的方法（12行代碼） <--返回目錄
* 總結：凡是獲取節點的代碼在谷歌和火狐得到的都是節點，凡是獲取元素的代碼在谷歌和火狐總都是元素；
除父(子)節點/元素，凡是獲取節點的代碼在IE8中得到的是元素，獲取元素的代碼不支持。
//父節點 ele.parentNode; //父元素 ele.parentElement; //子節點 ele.childNodes; //子元素 ele.children; //第一個子節點 ele.firstChild; //第一個子元素 ele.firstElementChild //最后一個子節點 ele.lastChild; //最后一個子元素 ele.lastElementChild; //某個元素的前一個兄弟節點 ele.previousSibling; //某個元素的前一個兄弟元素 ele.previousElementSibling; //某個元素的后一個兄弟節點 ele.nextSibling; //某個元素的后一個兄弟元素 ele.nextElementSibling;
6.案例：div標簽里面的p標簽背景高亮(使用子節點或子元素的方式) <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="變色">
<div style="width:300px;border:2px solid blue">
<span>這是span內的文本1</span>
<p>這是p內的文本1</p>
<span>這是span內的文本2</span>
<p>這是p內的文本2</p>
</div>
<script type="text/javascript">
var divEle = document.getElementsByTagName("div")[0];
document.getElementsByTagName("input")[0].onclick=function(){
var eles = divEle.children;//獲取div標簽里面所有的子標簽
//遍歷所有的子標簽，並判斷是否是p標簽
for(var i=0;i<eles.length;i++){
if(eles[i].nodeType===1 && eles[i].nodeName==="P"){
eles[i].style.backgroundColor="red";
}
}
};
</script>
</body>
</html>
7.封裝節點兼容代碼 <--返回目錄
獲取任意一個父元素的第一個子元素
function getfirstEleChild(ele){ //if(typeof ele.firstElementChild != "undefined"){ if(ele.firstElementChild){ //ele.firstElementChild有值就為true return ele.firstElementChild; }else{ var node = ele.firstChild; while(node && node.nodeType !=1){ node=node.nextSibling; } return node; } }
獲取任意一個父元素的最后一個子元素
function getlastEleChild(ele){ if(ele.lastElementChild){ //ele.lastElementChild有值就為true return ele.lastElementChild; }else{ var node = ele.lastChild; while(node && node.nodeType !=1){ node=node.previousSibling; } return node; } }
8.案例：切換背景圖片 <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<style type="text/css">
img{
width:150px;
}
div{
width: 700px;
margin: 0 auto;
}
body {
background:url("images/1.jpg");/*設置背景圖片*/
}
</style>
</head>
<body>
<div id="box">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
</div>
<script type="text/javascript">
var eles = document.getElementById("box").children;
for(var i=0;i<eles.length;i++){
eles[i].onclick=function(){
console.log(this.src);//file:///C:/Users/oy/Desktop/images/2.jpg
document.body.style.background="url("+this.src+")";
console.log("url("+this.src+")");//url(file:///C:/Users/oy/Desktop/images/2.jpg)
};
}
</script>
</body>
</html>
9.案例：全選、全不選 <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<table align="center" width="30%" cellspacing="0" border="1" bgcolor="#eee">
<tr >
<th><input type="checkbox" id="checkboxId"></th>
<th>菜名</th>
<th>飯店</th>
</tr>
<tbody>
<tr align="center">
<td><input type="checkbox" name=""></td>
<td>aa</td>
<td>aa</td>
</tr >
<tr align="center">
<td><input type="checkbox" name=""></td>
<td>aa</td>
<td>aa</td>
</tr>
<tr align="center">
<td><input type="checkbox" name=""></td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var checkboxEle = document.getElementById("checkboxId");
var eles = document.getElementsByTagName("input");
//為第一個checkbox注冊點擊事件
checkboxEle.onclick=function(){
//如果第一個checkbox選中，則全部選中; 否則，全部取消選中
for(var i=0;i<eles.length;i++){
eles[i].checked=this.checked;
}
};
//為后面3個checkbox注冊點擊事件
for(var j=1;j<eles.length;j++){
eles[j].onclick=function(){
//判斷后面3個checkbox的狀態，如果都被選中，則將第一個checkbox也選中
var count=0;//計數器，用於保存選中的checkbox的個數
for(var k=1;k<eles.length;k++){
if(eles[k].checked){
count++;
}
}
//如果計數器count=3，說明后面3個checkbox都被選中了，則將第一個checkbox也選中
//如果計數器count<3，則將第一個checkbox去掉選中
console.log(`count = ${count}`)
if(count == 3){
checkboxEle.checked=true;
}else if(count<3){
checkboxEle.checked=false;
}
};
}
</script>
</body>
</html>
10.元素創建的第一種方式 <--返回目錄
document.write("<p>文本</P>");
- 如果是頁面加載完畢后，通過該種方式創建元素，頁面之前的所有內容被清空
- 如果是頁面加載的時候，通過該種方式創建元素，頁面之前的所有內容被保留
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" id="btn" value="按鈕" />
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
document.write("<p>文本</P>");//該句代碼是在點擊按鈕后執行，此時頁面已經加載完畢,頁面之前的所有內容被清空
};
document.write("<p>文本</P>");//頁面加載的時候，通過該種方式創建元素，頁面之前的所有內容被保留
</script>
</body>
</html>
11.元素創建的第二種方式 <--返回目錄
document.getElementById("divId").innerHTML="<p>新添加的文本</P>";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" id="btn" value="按鈕" />
<div id="divId" style="width: 300px;height: 200px;border:2px solid pink">div原來的文本</div>
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
document.getElementById("divId").innerHTML="<p>新添加的文本</P>";//將原來的文本覆蓋了
};
</script>
</body>
</html>
12.案例：點擊按鈕，在div中加載一張圖片 <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<style type="text/css">
img{
width: 300px;
height:300px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按鈕" />
<div id="divId" style="width:300px; height:300px; border:2px solid pink">div原來的文本</div>
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
//點擊按鈕，在div中加載一張圖片,加載的圖片也會應用已經定義的樣式
document.getElementById("divId").innerHTML="<img src='a.jpg'/>";
};
</script>
</body>
</html>
13.案例：動態創建列表(元素創建的第二種方式) <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按鈕" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原來的文本</div>
<script type="text/javascript">
var names = ["西施","楊玉環","貂蟬","王昭君"];
var ele = document.getElementById("btn");
ele.onclick=function(){
var str = "<ul style='list-style-type:none;cursor:pointer'>";
for(var i=0;i<names.length;i++){
str += "<li>"+names[i]+"</li>";
}
str += "</ul>";
document.getElementById("divId").innerHTML=str;
};
</script>
</body>
</html>
14.第三種元素創建方式 <--返回目錄
var pEle = document.createElement("p");
<input type="button" id="btn" value="按鈕" /> <div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原來的文本</div> <script type="text/javascript"> document.getElementById("btn").onclick=function(){ var pEle = document.createElement("p"); pEle.innerText="這是p標簽里面的文本"; document.getElementById("divId").appendChild(pEle);//在后面追加 }; </script>
15.案例：動態創建列表(使用第三種元素創建方式) <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按鈕" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原來的文本</div>
<script type="text/javascript">
var names = ["a","b","c"];
document.getElementById("btn").onclick=function(){
var parent = document.getElementById("divId");
var ulNode = document.createElement("ul");
parent.appendChild(ulNode);
for(var i=0;i<names.length;i++){
var node = document.createElement("li");
node.innerText=names[i];
ulNode.appendChild(node);
node.onmouseover = mouseoverHandler;
node.onmouseout = mouseoutHandler;
}
};
var mouseoverHandler = function (){
this.style.backgroundColor = "#ccc";
};
var mouseoutHandler = function (){
this.style.backgroundColor = "";
};
</script>
</body>
</html>
16.動態創建表格(使用第三種元素創建方式) <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" id="btn" value="按鈕" />
<div id="divId" style="width: 300px;height: 300px;border:2px solid pink">div原來的文本</div>
<script type="text/javascript">
var names = [
{"name":"百度","href":"http://www.baidu.com"},
{"name":"谷歌","href":"http://www.google.com"},
];
document.getElementById("btn").onclick=function(){
//創建table元素，並添加到div元素下
var parent = document.getElementById("divId");
var table = document.createElement("table");
table.border = "1";
parent.appendChild(table);
for(var i=0;i<names.length;i++){
var node = names[i];
//創建tr元素，並添加到table元素下
var tr = document.createElement("tr");
table.appendChild(tr);
//創建第一列，並添加到tr下
var td = document.createElement("td");
td.innerText = node.name;
tr.appendChild(td);
//創建第二列，並添加到tr下
var td = document.createElement("td");
td.innerHTML = "<a href="+node.href+">"+node.name+"</a>";
tr.appendChild(td);
}
};
</script>
</body>
</html>
17.操作元素的一些方法 <--返回目錄
* parentEle.appendChild(node);//追加子元素
* parentEle.insertBefore(newChild,refChild);//在指定的元素refEle之前插入newEle
parentEle.insertBefore(newChild,parentEle.firstElementChild);//在div里面最前面插入newEle
* parentEle.replaceChild(newChild,refChild);//替換
* parentEle.removeChild(parentEle.firstElementChild);//刪除第一個子元素
* 刪除所有子元素
while(parentEle.firstElementChild){
parentEle.removeChild(parentEle.firstElementChild);//刪除第一個子元素
}
18.點擊按鈕，創建元素(只創建一次) <--返回目錄
* 有則刪除，無則創建，即創建之前先判斷是否存在，存在刪除，然后創建
* 或者，創建之前先判斷是否存在，存在就什么也不做，不存在就創建。
19.為元素綁定多個事件 <--返回目錄
* ele.addEventListener(type,listener,useCapture);//可以為同一個元素綁定多個相同的事件，谷歌火狐都支持，IE8不支持
- 參數一：{string}type 事件的類型，沒有on前綴
- 參數二：{Function}listener 事件處理函數
- 參數三：{boolean}useCapture 目前就寫false，不解釋
* ele.attachEvent("onclick",fn);谷歌火狐不支持，IE8支持
* 區別
addEventListener 谷歌、火狐、IE11支持，IE8不支持
attachEvent 谷歌、火狐不支持，IE11不支持，IE8支持
ele.addEventListener("click", function(){
console.log(this); // this為ele這個對象
}, false);
ele.attachEvent("onclick", function(){
console.log(this); // this為window這個對象
});
20.為元素綁定事件的兼容代碼 <--返回目錄
為任意元素，綁定任意的事件,事件處理函數
function addEventListener(ele,type,fn){ //判斷瀏覽器是否支持這個方法 if(ele.addEventListener){ ele.addEventListener(type,fn,false); }else if(ele.attachEvent){ ele.attachEvent("on"+type,fn); }else{ ele["on"+type]=fn; } }
21.解綁事件的三種方式 <--返回目錄
第一種：ele.onclick=null;
注意：用什么方式綁定事件，就應該用對應的方式解綁事件
<input type="button" id="btn" value="按鈕" /> <input type="button" id="btn2" value="解綁事件" /> <script type="text/javascript"> document.getElementById("btn").onclick=function(){ alert(1); }; document.getElementById("btn2").onclick=function(){ document.getElementById("btn").onclick=null; }; </script>
第二種：ele.removeEventListener("click",命名函數的名字,false);
IE8不支持addEventListener和removeEventListener
<input type="button" id="btn" value="按鈕" />
<input type="button" id="btn2" value="解綁事件" />
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.addEventListener("click",f1,false);
ele.addEventListener("click",f2,false);
//移除第二個綁定事件
document.getElementById("btn2").onclick=function(){
ele.removeEventListener("click",f1,false);
};
function f1(){
console.log(1);
}
function f2(){
console.log(2);
}
</script>
第三種：
谷歌、火狐不支持，IE8支持
<input type="button" id="btn" value="按鈕" />
<input type="button" id="btn2" value="解綁事件" />
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.attachEvent("onclick",f1,false);
ele.attachEvent("onclick",f2,false);
//移除第二個綁定事件
document.getElementById("btn2").onclick=function(){
ele.detachEvent("onclick",f1);
};
function f1(){
console.log(1);
}
function f2(){
console.log(2);
}
</script>
22.解綁事件的兼容代碼 <--返回目錄
//為任意的一個元素解綁任意事件、任意響應函數 function removeEventListener(ele,type,fnName){ if(ele.removeEventListener){ ele.removeEventListener(type,fnName,false); }else if(ele.detachEvent){ ele.detachEvent("on"+type,fnName); }else{ ele["on"+type]=null; } }
注意：以后，一般都使用兼容代碼，不使用ele.onclick=null;為了以防多個人給同一個元素綁定了相同的事件
23.事件冒泡、阻止事件冒泡 <--返回目錄
* 事件冒泡：多個元素嵌套，這些元素都綁定了相同的事件，如果里面的元素的事件觸發了，外面的元素的事件也自動觸發。
* 阻止事件冒泡：
- window.event.cancelBubble = true; // IE特有的，谷歌支持，火狐不支持
- e.stopPropagation(); // 谷歌火狐支持，IE不支持
24.事件的3個階段 <--返回目錄
* 事件捕獲階段：從外向里
* 事件目標階段
* 事件冒泡階段：從里向外
* addEventListener(,,false|true)
- false:從目標階段開始，從里向外冒泡
- true:從外到里開始捕獲，直到目標階段【直到捕獲事件的觸發目標】
- 一般默認使用false，很少用true
25.為同一個元素綁定多個不同事件，事件使用同一個處理函數 <--返回目錄
<input type="button" id="btn" value="按鈕" />
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick = fun;
ele.onmouseover = fun;
ele.onmouseout = fun;
function fun(e){
switch(e.type){
case "click":
console.log("鼠標點擊事件");
break;
case "mouseover":
console.log("鼠標進入事件");
break;
case "mouseout":
console.log("鼠標離開事件");
break;
}
}
</script>
26.案例：模擬百度搜索 <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
</style>
</head>
<body>
<div>
<input type="text" id="txt" style="width: 200px;"/>
<input type="button" id="btn" value="搜索"/>
<div id="divId" style="width: 200px;display: none;border: 1px solid #ccc"></div>
</div>
<script type="text/javascript">
var keywords = ["我愛你","我喜歡你","我不喜歡你"];
var txtEle = document.getElementById("txt");
txtEle.onkeyup = function() {
//獲取文本框輸入的內容
var text = this.value;
var tempArr = [];//用於存放匹配上的數據
//把文本框輸入的內容與數組中的數據進行對比，匹配上的數據添加到tempArr中
for(var i=0;i<keywords.length;i++){
console.log(text.length);
if(text.length>0 && keywords[i].indexOf(text)==0){
tempArr.push(keywords[i]);//追加
}
}
console.log(tempArr);
var div = document.getElementById("divId");
//如果tempArr中有數據，創建列表
if(tempArr.length>0){
//先清空div中內容
while(div.firstElementChild){
div.removeChild(div.firstElementChild);//刪除第一個子元素
}
var ul = document.createElement("ul");
div.appendChild(ul);
//根據tempArr的數據創建列表，添加到div中
for(var j=0;j<tempArr.length;j++){
var li = document.createElement("li");
li.innerText = tempArr[j];
ul.appendChild(li);
//為li標簽添加鼠標進入和移出事件
li.onmouseover = function(){
this.style.backgroundColor = "#888";
};
li.onmouseout = function(){
this.style.backgroundColor = "";
};
//為li標簽添加鼠標點擊事件
li.onclick = function(){
//將li標簽內的文本添加到輸入框中
txtEle.value = this.innerText;
//將div隱藏
div.style.display = "none";
};
}
//使得div顯示
div.style.display = "block";
}else{
div.style.display = "none";
}
}
</script>
</body>
</html>
---