DOM對象
文檔對象模型，它把網頁中所有的標籤都當做一個dom對象，通過這個對象，我們可以精準地獲取網頁中的某一個標籤，同時可以動態地修改標籤的屬性、內容和外觀，實現動態的效果。
Document對象
每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象
getElementById() 返回對擁有指定 id 的第一個對象的引用。
getElementsByName() 返回帶有指定名稱的對象集合。
getElementsByTagName() 返回帶有指定標籤名的對象集合
getElementsByClassName() 根據類名獲取對象集合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="mydiv">
<p>*********************</p>
<p>*********************</p>
</div>
<p name="abc">
段落1
</p>
<p name="abc">
段落2
</p>
<ul>
<li>AAAAAAAAAAAA</li>
<li>AAAAAAAAAAAA</li>
<li>AAAAAAAAAAAA</li>
<li>AAAAAAAAAAAA</li>
<li>AAAAAAAAAAAA</li>
</ul>
<div class="redtext">
aaaaaaa
</div>
<div class="redtext">
aaaaaaa
</div>
<script type="text/javascript">
var divobj=document.getElementById("mydiv");
var parr=divobj.getElementsByTagName("p");
for(var i in parr){
parr[i].innerHTML="@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@";
}
var arr=document.getElementsByName("abc");
for(var i in arr){
arr[i].innerHTML="okokok";
}
var liarr=document.getElementsByTagName("li");
for(var i in liarr){
liarr[i].innerHTML=parseInt(i)+1+"lilili";
}
var divarr=document.getElementsByClassName("redtext");
for(var i in divarr){
divarr[i].innerHTML="bbbbbbbbbbbbbbbbbbbbbbb";
}
</script>
</body>
</html>
innerHTML用來獲取一個標籤內部的內容，即可以賦值，又可以取值
innerText也可以賦值取值，都用在非表單元素上面。
它們的區別在於：
在賦值時，如果賦的值是標籤，innerText會全部當文本解析，而innerHTML可以對標籤進行解析；在取值時，innerText會忽略標籤進行取值，而innerHTML獲取到的是開始標籤到結束便籤之間的全部內容，包括標籤。
對於自關閉標籤，一般是表單標籤，如 <input />、<select></select>、<textarea></textarea>和<button></button>如果想獲取這些便籤裏面的數據，只能用value，賦值和取值都用value。
對於<select></select>，設置value有默認選中效果
<select id="selcity">
<option value="zhengzhou">鄭州</option>
<option value="xuchang">許昌</option>
<option value="zhumadian">駐馬店</option>
<option value="nanyang">南陽</option>
</select>
<script type="text/javascript">
var sel=document.getElementById("selcity");
sel.value="zhumadian";
</script>
對於<input />、<textarea></textarea>，使用value將會直接顯示在控件上
實例1：
使用表單元素寫一個計算器，實現加減乘除運算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="num1" />
<select name="selop">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" name="num2" />
<input type="button" name="equals" value="=" onclick="calc()"/>
<input type="text" name="result" />
<script type="text/javascript">
function calc(){
var result=document.getElementsByName("result")[0];
var num1=document.getElementsByName("num1")[0].value;
var num2=document.getElementsByName("num2")[0].value;
var op=document.getElementsByName("selop")[0].value;
result.value=eval(num1+op+num2);
}
</script>
</body>
</html>
運行結果：
實例2：省市聯動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr=new Array();
arr["河南"]=["鄭州","許昌","洛陽","南陽","駐馬店"];
arr["河北"]=["保定","邯鄲","石家莊","秦皇島","衡水"];
arr["湖北"]=["武漢","十堰","黃岡","黃石","黃梅"];
function loadprov(){
var selprov=document.getElementById("prov");
var option="";
for(var i in arr){
option+="<option>"+i+"</option>";
}
selprov.innerHTML=option;
}
window.onload=function(){
loadprov();
loadcity();
}
function loadcity(){
var selprov=document.getElementById("prov");
var p=selprov.value;
var option="";
for(var i in arr[p]){
option+="<option>"+arr[p][i]+"</option>";
}
document.getElementById("city").innerHTML=option;
}
function getaddress(){
document.getElementById("address").innerHTML=
document.getElementById("prov").value+"省"
+document.getElementById("city").value+"市"
+document.getElementsByName("stre")[0].value;
}
</script>
</head>
<body>
<div>
<select id="prov" onchange="loadcity()">
</select>
<select id="city">
</select>
<input type="text" name="stre" />
<input type="button" value="確定" onclick="getaddress()"/>
<p id="address">
</p>
</div>
</body>
</html>
運行結果：
Element對象
element.getAttribute() 返回元素節點的指定屬性值
element.setAttribute() 把指定屬性設置或更改爲指定值
element.innerHTML 設置或返回元素的內容
element.removeAttribute() 從元素中移除指定屬性
實例1：
圖片輪播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr=["1.jpg","2.jpg","3.jpg","4.jpg","bg.jpg"];
var index=0;
function changeimg(){
index++;
if(index>=arr.length){
index=0;
}
var img=document.getElementsByTagName("img")[0];
//img.setAttribute("src","image/"+arr[index]);
img.src="image/"+arr[index];
}
window.setInterval("changeimg()",1500);
</script>
</head>
<body>
<input type="button" value="changeimage" onclick="changeimg()" />
<hr />
<img src="image/bg.jpg" />
</body>
</html>
實例2：
全選按鈕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function allcheck(){
var ckstate=document.getElementsByName("ckall")[0].checked;
var ckitems=document.getElementsByName("ckitem");
for(var i in ckitems){
ckitems[i].checked=ckstate;
}
}
</script>
</head>
<body>
<input type="checkbox" name="ckall" onclick="allcheck()"/>全選<br />
<input type="checkbox" name="ckitem" />語文
<input type="checkbox" name="ckitem" />數學
<input type="checkbox" name="ckitem" />英語
<input type="checkbox" name="ckitem" />政治
<input type="checkbox" name="ckitem" />歷史
<input type="checkbox" name="ckitem" />生物
<input type="checkbox" name="ckitem" />物理
</body>
</html>
實例3：
協議註冊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function agree(){
var state=document.getElementsByName("agr")[0].checked;
var btn=document.getElementById("btnreg");
btn.disabled=!state;
}
</script>
</head>
<body>
<textarea rows="5" cols="60" readonly="readonly">協議:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea>
<br />
<input type="checkbox" name="agr" onclick="agree()"/>同意
<input type="button" value="註冊" id="btnreg" disabled="disabled"/>
</body>
</html>
element.appendChild() 向元素添加新的子節點，作爲最後一個子節點 、
元素的增加與刪除
添加
方法1：
div.innerHTML="<img src='image/49.gif'/>";
方法2：
var img =document.createElement("img");
img.setAttribute("src","image/49.gif");
div.appendChild(img);
第一種方法直接替換原有的div中的內容，再次添加無效，第二種在原有div內容的下方，並且再次添加又會多添加一個
element.insertBefore() 在指定的已有的子節點之前插入新節點
方法3：
div.insertBefore(img,div.getElementsByTagName("p")[0]);
添加多級元素：
var ul=document.createElement("ul");
var li=document.createElement("li");
ul.appendChild(li);
var a=document.createElement("a");
a.setAttribute("href","http://www.baidu.com");
a.innerHTML="百度一下";
li.appendChild(a);
div.appendChild(ul);
刪除
element.removeChild() 從元素中移除子節點
function del(){
//var div=document.getElementById("mydiv");
var p=document.getElementsByTagName("p")[1];
//div.removeChild(p);
p.remove();
}
表格中自帶添加和刪除元素的方法
table
insertRow() 在表格中插入一個新行
deleteRow() 從表格刪除一行
cells[] 返回包含表格中所有單元格的一個數組
rows[] 返回包含表格中所有行的一個數組
tr
deleteCell() 刪除行中的指定的單元格
insertCell() 在一行中的指定位置插入一個空的 元素
btnadd.onclick=function(){
var table=document.getElementById("mytable");
var row=table.insertRow(table.rows.length);
var cell1=row.insertCell(0);
cell1.innerHTML="張三";
var cell2=row.insertCell(1);
cell2.innerHTML="女";
var cell3=row.insertCell(2);
cell3.innerHTML="28";
var cell4=row.insertCell(3);
btndel.onclick=function(){
var table=document.getElementById("mytable");
table.deleteRow(table.rows.length-1);
}
table刪除本行
element.parentNode 返回元素的父節點
cell4.innerHTML='<input type="button" value="刪除本行" name="btndelcurrent" onclick="delcurrent(this)"/>';
function delcurrent(obj){
//obj <input type='button'
var row=obj.parentNode.parentNode;
row.remove();
}
使用層級關係獲取子元素
element.childNodes 返回元素子節點的 NodeList
前提是標籤之間沒有空格，有空格的話把索引多加一個，每個空格佔一個子元素的索引
element.parentNode不需要考慮是否有空格
var div=document.getElementById("mydiv");
var obj=div.childNodes[0].childNodes[0];
alert(obj.innerHTML);
樣式
element.style 設置或返回元素的 style 屬性
element.className 設置或返回元素的 class 屬性
實例1：
改變顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[type='button']{
width:80px; height: 28px;
}
#mydiv{
width: 400px; height: 200px;
border:1px solid red;
}
</style>
<script type="text/javascript">
function changecolor(obj){
var div=document.getElementById("mydiv");
div.style.backgroundColor=obj.style.backgroundColor;
}
</script>
</head>
<body>
<input type="button" value="" style="background-color: blue;" onclick="changecolor(this)" />
<input type="button" value="" style="background-color: red;" onclick="changecolor(this)" />
<input type="button" value="" style="background-color:brown;" onclick="changecolor(this)" />
<input type="button" value="" style="background-color:chocolate;" onclick="changecolor(this)" />
<input type="button" value="" style="background-color:cornflowerblue;" onclick="changecolor(this)" />
<hr />
<div id="mydiv">
</div>
</body>
</html>
運行效果：
實例2：
讓一個div每隔一段時間移動相同的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#mydiv{width: 200px; height: 200px; background: red;}
</style>
<script type="text/javascript">
function movediv(){
var div=document.getElementById("mydiv");
var left= div.style.marginLeft?parseInt(div.style.marginLeft):0;
left+=1;
div.style.marginLeft=left+"px";
}
window.setInterval(movediv,50);
</script>
</head>
<body>
<div id="mydiv">
</div>
</body>
</html>
在循環批量註冊事件時，不要使用下標去註冊，因爲當使用這個函數的時候，下標已經到了最後一個
window.onload=function(){
var allli=document.getElementsByTagName("li");
for(var i in allli){
allli[i].onclick=function(){
//方法1：alert(this.innerHTML);
//方法2：event.target 事件源
alert(event.target.innerHTML);
}
}
}
table切換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
li{list-style: none;}
#tab ul li{float: left; width: 100px; height: 28px; font:14px/28px 微軟雅黑;
text-align: center; border:1px solid blue;
}
#content{width: 500px; height: 300px; border:1px solid red; clear: both; overflow: hidden;}
#content>div{width:500px; height: 300px;}
</style>
<script type="text/javascript">
window.onload=function(){
var allli=document.getElementById("tab").getElementsByTagName("li");
for(var i in allli){
allli[i].onmouseover=function(){
var alldiv=document.getElementById("content").getElementsByTagName("div");
for(var j =0;j<alldiv.length;j++){
alldiv[j].style.display="none";
}
document.getElementById(this.getAttribute("data-id")).style.display="block";
this.style.backgroundColor="black";
this.style.color="white";
}
allli[i].onmouseout=function(){
this.style.backgroundColor="white";
this.style.color="black";
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li data-id = "a">AAAA</li>
<li data-id = "b">BBBB</li>
<li data-id = "c">CCCC</li>
</ul>
<div id="content">
<div id="a" style="background: red;">
AAAAAAAA
</div>
<div id="b" style="background: blue;">
BBBBBBBBBB
</div>
<div id="c" style="background: green;">
CCCCCCCCCCCCCC
</div>
</div>
</div>
</body>
</html>
表單驗證
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
form table{font:14px/30px 微軟雅黑;}
.input{width: 400px; height: 30px; border:1px solid #ccc; border-radius: 7px; outline: none;}
.input:focus{border:1px solid #ccc; border-radius: 7px; box-shadow: 1px 1px 8px red;}
table tr td:first-child{vertical-align: top; width: 100px; text-align: right;}
</style>
<script type="text/javascript">
window.onload=function(){
var username=document.getElementsByName("username")[0];
username.onkeyup=checkusername;
var password=document.getElementsByName("password")[0];
password.onkeyup=checkpasword;
var repassword=document.getElementsByName("repassword")[0];
repassword.onkeyup=checkrepassword;
var borndate=document.getElementsByName("borndate")[0];
borndate.onchange=checkborndate;
var phone=document.getElementsByName("phone")[0];
phone.onkeyup=checkphone;
var email=document.getElementsByName("email")[0];
email.onkeyup=checkemail;
var form=document.getElementById("myform");
form.onsubmit=checkAll;
}
function checkAll(){
var ret1= checkphone();
var ret2=checkborndate();
var ret3=checkemail();
var ret4=checkpasword();
var ret5=checkrepassword();
var ret6=checkusername();
return ret1&&ret2&&ret3&&ret4&&ret5&&ret6;
}
function checkphone(){
var phone=document.getElementsByName("phone")[0].value;
var patt=/^1\d{10}$/;
var span=document.getElementById("ckphone");
if(patt.test(phone)){
span.innerHTML="<img src='image/1.png' height='28' align='middle'/>";
return true;
}else{
span.innerHTML="<img src='image/2.png' height='28' align='middle'/>";
return false;
}
}
function checkemail(){
var email=document.getElementsByName("email")[0].value;
var patt=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
var span=document.getElementById("ckemail");
if(patt.test(email)){
span.innerHTML="<img src='image/1.png' height='28' align='middle'/>";
return true;
}else{
span.innerHTML="<img src='image/2.png' height='28' align='middle'/>";
return false;
}
}
function checkborndate(){
var borndate=document.getElementsByName("borndate")[0];
var value=borndate.value;
var span=document.getElementById("ckborndate");
if(!value){
span.innerHTML="<img src='image/2.png' height='28' align='middle'/>";
return false;
}else{
var arr=value.split("-");
var dt=new Date();
dt.setFullYear(arr[0]);
dt.setMonth(arr[1]-1);
dt.setDate(arr[2]);
var now=new Date();
if(dt.getTime()>now.getTime()){
span.innerHTML="<img src='image/2.png' height='28' align='middle'/>";
return false;
}else{
span.innerHTML="<img src='image/1.png' height='28' align='middle'/>";
return true;
}
}
}
function checkrepassword(){
var password=document.getElementsByName("password")[0].value;
var repassword=document.getElementsByName("repassword")[0].value;
var span=document.getElementById("ckrepassword");
if(password==repassword){
span.innerHTML="<img src='image/1.png' height='28' align='middle'/>";
return true;
}else{
span.innerHTML="<img src='image/2.png' height='28' align='middle'/>";
return false;
}
}
function checkpasword(){
var password=document.getElementsByName("password")[0];
var value=password.value;
var patt=/^\w{6,18}$/;
var patt2=/\d+/;
var patt3=/[a-zA-Z]+/;
var span=document.getElementById("ckpassword");
if(patt.test(value)&&patt2.test(value)&&patt3.test(value)){
span.innerHTML="<img src='image/1.png' height='28' align='middle'/>";
return true;
}else{
span.innerHTML="<img src='image/2.png' height='28' align='middle'/>";
return false;
}
}
function checkusername(){
var username=document.getElementsByName("username")[0];
var value=username.value;
var patt=/^\w{6,18}$/;
var span=document.getElementById("ckusername");
if(patt.test(value)){
span.innerHTML="<img src='image/1.png' height='28' align='middle'/>";
return true;
}else{
span.innerHTML="<img src='image/2.png' height='28' align='middle'/>";
return false;
}
}
</script>
</head>
<body>
<form action="success.html" method="post" id="myform">
<table>
<tr>
<td>用戶名</td>
<td>
<input type='text' name="username" autocomplete="off" class="input" placeholder="請輸入用戶名"/>
<span id="ckusername"></span>
<p>只能包含數字字母下劃線,長度6-18位</p>
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type='password' name="password" class="input" placeholder="請輸入密碼"/>
<span id="ckpassword"></span>
<p>必須含有字母和數字,長度6-18位</p>
</td>
</tr>
<tr>
<td>確認密碼</td>
<td>
<input type='password' name="repassword" class="input" placeholder="請輸入確認密碼"/>
<span id="ckrepassword"></span>
<p>必須和密碼一致</p>
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type='radio' name="sex" value="男" checked="checked" />男
<input type='radio' name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type='date' name="borndate" />
<span id="ckborndate"></span>
</td>
</tr>
<tr>
<td>手機號</td>
<td>
<input type='tel' name="phone" class="input" placeholder="請輸入手機號"/>
<span id="ckphone"></span>
<p>必須11位數字1開頭</p>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type='email' name="email" class="input" placeholder="請輸入郵箱"/>
<span id="ckemail"></span>
<p>必須含有@和.</p>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="註冊" />
</td>
</tr>
</table>
</form>
</body>
</html>
正則表達式
\w 數字字母下劃線
\d 數字
\w{5} abcde abc12 ab123
\w{2,3} AB ABC AB2 ABC
\w{2,} 最少兩次
\w* \w{0,}
\w+ \w{1,}
\w? \w{0,1}
a[xyz] ax ay az
a[xyz]{2} axx axy
[a-d] [abcd]
[0-9] [0123456789] \d
[^0-9] \D
^\d+ 至少一個數字開頭
\d$ 必須以數字結尾
^\d{11}$ 十一位數字
----------------------------------------------------------------
字符串開始 ^
字符串結尾 $
用來限制位數
/^\d{6,10}$/ 123456 1234567
/\d{6,10}/ 4352345234523452345234
範圍 []
從[]中取出一個來匹配
[abcd]+
[a-d]+
[a-df-h0-35-9]
[^abcd]
[^0-9]
匹配次數 {}
{3,8}
{3}
{3,}
* {0,}
? {0,1}
+ {1,}
改變優先級 捕獲組 ()
便於引用
(\d[a-z]){3} 1a2a3a
(\d)(\s)(\w) 組的下標分別爲1,2,3
((\d)(\s\w)) 外面的大括號下標爲1，(\d)爲2，(\s\w)爲3，可以根據左括號出現的順序來判斷
引用：
(\d)\1{4} 使用\1來引用下標爲1的組，引用4次 表示五個數字，如22222、99999，一般用於篩選重複字符