1.查詢節點
1.根據節點的層級查詢節點
1.childNodes
元素節點,文本節點,
2.children
元素節點
3.parentNode
獲取父節點
4.nextSibling
獲取下一個兄弟節點
有可能是文本節點
5.nextElementSibling
獲取下一個兄弟元素節點
6.previousSibling
獲取上一個兄弟節點
有可能是文本節點
7.previousElementSibling
獲取上一個兄弟元素節點
2.通過標籤名查詢節點 - 返回數組
document|elem.getElementsByTagName("標籤名");
document:整個文檔內查找
elem:某個元素內查找
3.通過元素的name屬性值查詢節點
document.getElementsByName("name屬性值");
返回值:包含指定name屬性值的元素的數組
<input type="radio" checked >
4.通過元素的class值查詢節點
document|elem.getElementsByClassName("class");
返回:返回包含指定class屬性值的所有元素
2.增加節點
1.創建元素節點
語法:
var elem=document.createElement("元素名");
ex:
var div=document.createElement("div");
div.setAttribute("id","container");
div.innerHTML="動態創建的文本";
2.增加節點到網頁上
1.document.body.appendChild(elem);
向body中追加elem的新元素
2.parentNode.appendChild(elem);
向parentNode內部追加elem新元素
3.parentNode.insertBefore(newElem,oldElem)
將newElem元素插入到parentNode中oldElem元素之前
3.刪除節點
在DOM中,刪除節點的行爲只能由父元素髮起
parentNode.removeChild(elem);
刪除 parentNode 中的 elem 元素
4.事件
1.什麼是事件
通常都是由用戶的行爲來激發的操作
2.觸發事件的行爲
所有的事件在綁定時,必須加 on
1.鼠標事件
1.click 事件
當鼠標單擊元素時觸發該事件
2.mouseover 事件
當鼠標移入進元素時的事件
3.mouseout 事件
當鼠標移出元素時的事件
4.mousemove 事件
當鼠標在元素內移動時的事件
2.鍵盤事件
1.keydown 事件
當鍵位按下時所激發的事件
2.keypress 事件
當鍵位按下時所激發的事件
3.keyup 事件
當鍵位擡起時所激發的事件
3.狀態改變事件
1.load 事件
當元素加載完成時所觸發的事件(body)
2.change 事件
當選項發生改變時所觸發的事件(select)
3.focus 事件
當元素獲取焦點時所觸發的事件(文本框類)
4.blur 事件
當元素失去焦點時所觸發的事件(文本框類)
5.submit 事件
當表單被提交時所觸發的事件(表單)
3.綁定的方式
1.在元素中綁定事件
<元素 on事件名=""></元素>
2.在js中動態的爲元素綁定事件
語法:
DOM對象.on事件名=function(){
}
ex:
var main = document.getElementById("main");
main.onclick = function(){
}
注意：在JS動態綁定事件中,允許使用 this 來表示觸發當前事件的DOM元素
4.事件行爲
1.狀態改變事件
1.load 事件
通常爲 body 綁定 load 事件,目的是爲了在所有內容都加載完成之後再實現一些初始化的操作
1. <body onload="函數()">
2.JS中動態綁定
window.onload = function(){
網頁加載完成後,要執行的操作
}
2.submit 事件
只有表單被提交時纔會被觸發
注意:該事件需要一個boolean返回值來通知表單是否要繼續被提交.如果返回true,則可以提交表單.否則,阻止表單提交
JS中動態綁定:
表單對象.onsubmit = function(){
return true/false;
}
1.創建一個網頁,包含多個單選按鈕(name相同)
2.創建一個普通按鈕
3.單擊普通按鈕的時候
驗證多個單選按鈕中必須有一個被選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</p>
<button onclick="checkRadio()">驗證</button>
<p>
<input type="checkbox" id="chkAll" onclick="checkAll()">全選
<input type="checkbox" name="hobby">吃
<input type="checkbox" name="hobby">喝
<input type="checkbox" name="hobby">玩
<input type="checkbox" name="hobby">樂
</p>
<script src="common.js"></script>
<script>
function checkAll(){
//先獲取 chkAll 的選中狀態
var isChk = $("chkAll").checked;
//獲取所有的 hobby 並循環,將所有的hobby的checked更改爲isChk
var all = document.getElementsByName("hobby");
for(var i=0;i<all.length;i++){
all[i].checked = isChk;
}
}
function checkRadio(){
//得到頁面中name=gender的所有的元素
var arr=document.getElementsByName("gender");
//聲明變量用於記錄 radio 的選中狀態
var isChecked = false;
for(var i=0;i<arr.length;i++){
if(arr[i].checked){
isChecked = true;
break;
}
}
if(isChecked){
alert('通過');
}else{
alert('請選中一項');
}
}
</script>
</body>
</html> 點擊按鈕時
1.先獲取三個文本框的值
2.創建兩個按鈕 - 刪除按鈕 , 修改按鈕
3.先創建四個td
將三個文本框的值追加到前三個td
將兩個按鈕追加到第四個td中
4.創建一個tr
將四個td追加到tr中
5.將 tr 追加到 table 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<input type="text" id="gname" placeholder="商品名稱">
<input type="text" id="gprice" placeholder="商品價格">
<input type="text" id="gcount" placeholder="購買數量">
<button onclick="btnBuy()">購買</button>
</p>
<table border="1" width="600">
<thead>
<tr>
<td>商品名稱</td>
<td>商品價格</td>
<td>購買數量</td>
<td>操作</td>
</tr>
</thead>
<tbody id="content"></tbody>
</table>
<script src="common.js"></script>
<script>
function btnBuy(){
//1.獲取三個文本框的值
var gname = $("gname").value;
var gprice = $("gprice").value;
var gcount = $("gcount").value;
//2.創建兩個按鈕
var btnUpdate = document.createElement("button");
btnUpdate.innerHTML="修改";
var btnDelete = document.createElement("button");
btnDelete.innerHTML="刪除";
//爲 btnDelete 綁定 單擊事件
btnDelete.onclick = function(){
$("content").removeChild(this.parentNode.parentNode);
}
//3.創建4個td,分別追加值
var tdName = document.createElement("td");
tdName.innerHTML = gname;
var tdPrice = document.createElement("td");
tdPrice.innerHTML = gprice;
var tdCount = document.createElement("td");
tdCount.innerHTML = gcount;
var tdOper = document.createElement("td");
tdOper.appendChild(btnUpdate);
tdOper.appendChild(btnDelete);
//4.創建1個tr,追加td
var tr = document.createElement("tr");
tr.appendChild(tdName);
tr.appendChild(tdPrice);
tr.appendChild(tdCount);
tr.appendChild(tdOper);
//5.將tr追加到tbody中
$("content").appendChild(tr);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="/login/" method="post" id="frm">
<p>
用戶名稱
<input type="text" id="uname">
<span id="uname-show">*</span>
</p>
<p>
用戶密碼
<input type="password" id="upwd">
<span id="upwd-show">*</span>
</p>
<p>
確認密碼
<input type="password" id="cpwd">
<span id="cpwd-show">*</span>
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
<script src="common.js"></script>
<script>
function checkUname(){
var len = $("uname").value.length;
if(len >= 6 && len <= 18){
$("uname-show").innerHTML = "通過";
return true;
}else{
$("uname-show").innerHTML = "用戶名不符合規範";
return false;
}
}
function checkUpwd(){
var len = $("upwd").value.length;
if(len >= 6){
$("upwd-show").innerHTML="通過";
return true;
}else{
$("upwd-show").innerHTML="密碼不符合規範";
return false;
}
}
function checkCpwd(){
if($("upwd").value == $("cpwd").value){
$("cpwd-show").innerHTML = "通過";
return true;
}else{
$("cpwd-show").innerHTML = "兩次密碼必須一致";
return false;
}
}
window.onload = function(){
$("uname").onblur = checkUname;
$("upwd").onblur = checkUpwd;
$("cpwd").onblur = function(){
checkCpwd();
}
$("frm").onsubmit = function(){
// if(checkUname() && checkUpwd() && checkCpwd()){
// return true;
// }
// return false;
return checkUname() && checkUpwd() && checkCpwd();
}
}
</script>
</body>
</html>