1.DOM簡介
全稱Document Object Model，即文檔對象模型。
DOM描繪了一個層次化的樹，允許開發人員添加、刪除、修改頁面的某一部分。
瀏覽器在解析HTML頁面標記的時候，是將HTML頁面中的每一個標記按照順序在內存中組建一顆DOM樹，組建好之后，按照樹的結構將頁面顯示在瀏覽器的窗口中。
2.節點層次
HTML網頁是可以看做是一個樹狀的結構，如下：
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
這是一顆樹，是由多個節點（Node）組成的，節點的類型有很多種。
節點最多有一個父節點，可以有多個子節點。
HTML DOM 定義了訪問和操作HTML文檔的標准方法。
document
代表當前頁面的整個文檔樹。
訪問屬性
all
images
links
2.document入門
該對象代表整個文檔頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="" alt="這是圖片" />
<img src="" alt="這是圖片" />
<img src="" alt="這是圖片" />
<input type="button" value="設置圖片" onclick="setImg()" />
<a href="#">百度1</a>
<a href="#">百度2</a>
<a href="#">百度3</a>
<input type="button" value="設置a標簽" onclick="setA()" />
</body>
<script>
/*
DOM(Document Object Model) 文檔對象模型
一個html頁面被瀏覽器加載的時候，瀏覽器就會對整個html頁面上的所有標簽都會創建一個對應的
對象進行描述，我在瀏覽器上看到的信息只不過就是這些html對象的屬性信息而已。我們只要能找到
應的對象操作對象的屬性，則可以改變瀏覽器當前顯示的內容。
*/
//獲取當前頁面所有標簽對象
var allNodes = document.all;
for(var i= 0;i<allNodes.length;i++){
//document.write(allNodes[i]+"---");
//nodeName：節點名稱
document.write(allNodes[i].nodeName+"---");
}
function setImg(){
var allImgNodes = document.images;
for(var i= 0;i<allImgNodes.length;i++){
allImgNodes[i].src="img/2.jpg";
allImgNodes[i].width = 200;
allImgNodes[i].height = 200;
}
}
function setA(){
var aNodes = document.links;
for(var i= 0;i<aNodes.length;i++){
aNodes[i].href="http://www.baidu.com";
}
}
</script>
</html>
3.根據html標簽的屬性找節點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
用戶名：<input type="text" id="username" />
<input type="button" value="設置用戶名" onclick="setUserName()" />
<hr>
<img src="" alt="這是圖片1" />
<img src="" alt="這是圖片2" class="imgs" />
<img src="" alt="這是圖片3" class="imgs" />
<input type="button" value="設置圖片" onclick="setImgs()" />
<hr>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<input type="button" value="設置div" onclick="setDivs()" />
<hr>
<span name="span">span1</span>
<span name="span">span2</span>
<span name="span">span3</span>
<input type="button" value="設置span" onclick="setSpans()" />
<hr>
</body>
<script>
/*
通過html元素的標簽屬性找節點。
document.getElementById("html元素的id屬性值")
document.getElementsByTagName("標簽名")
document.getElementsByName("html元素的name屬性值")
document.getElementsByClassName("html元素的class屬性值")
*/
function setUserName(){
//通過id屬性獲取標簽對象
var usernameNode = document.getElementById("username");
usernameNode.value="jack";
}
function setImgs(){
//通過class屬性獲取標簽對象（返回的是一個數組）
var imgNodes= document.getElementsByClassName("imgs");
for(var i= 0;i<imgNodes.length;i++){
imgNodes[i].src="img/2.jpg";
imgNodes[i].width = 200;
imgNodes[i].height = 200;
}
}
function setDivs(){
//通過標簽名獲取標簽對象（返回的是一個數組）
var divNodes= document.getElementsByTagName("div");
for(var i= 0;i<divNodes.length;i++){
divNodes[i].innerHTML = "div標簽".fontcolor("red");
}
}
function setSpans(){
//通過name屬性獲取標簽對象（返回的是一個數組）
var spanNodes= document.getElementsByName("span");
for(var i= 0;i<spanNodes.length;i++){
spanNodes[i].innerHTML = "span標簽".fontcolor("red");
}
}
</script>
</html>
4.根據屬性找標簽練習
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript">
function checkAll() {
//找到所有的的選項
var items = document.getElementsByName("item");
//找到全選按鈕的對象
var allNode = document.getElementsByName("all")[0];
for (var i = 0; i < items.length; i++) {
items[i].checked = allNode.checked;
}
}
function getSum() {
var items = document.getElementsByName("item");
var sum = 0;
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
sum += parseInt(items[i].value);
}
}
var spanNode = document.getElementById("sumid");
spanNode.innerHTML = (" ¥" + sum).fontcolor("green");
}
</script>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />筆記本
電腦3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本
電腦3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦3000元<br />
<input type="checkbox" name="all" onclick="checkAll()" />全/不選<br />
<input type="button" value="總金額：" onclick="getSum()" />
<span id="sumid"></span>
</body>
</html>
5.通過節點關系找標簽
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<input type="text" id="userName" /><span></span>
</body>
<script type="text/javascript">
/*
通過關系(父子關系、兄弟關系)找標簽。
parentNode 獲取當前元素的父節點。
childNodes 獲取當前元素的所有下一級子元素。
firstChild 獲取當前節點的第一個子節點。
lastChild 獲取當前節點的最后一個子節點。
------------------------------------------------------------
nextSibling 獲取當前節點的下一個節點。（獲取當前節點相鄰的下一個平級節點）
previousSibling 獲取當前節點的上一個節點。（獲取當前節點相鄰的上一個平級節點）
我們可以通過標簽的類型進行判斷篩選：
文本節點的類型： 3
注釋的節點類型： 8
標簽節點的類型： 1
*/
var bodyNode = document.getElementsByTagName("body")[0];
//查看父節點
var parentNode = bodyNode.parentNode;
document.write("父節點的名稱：" + parentNode.nodeName);
document.write("<br />");
//找子節點:childNodes 獲取所有的子節點，返回的是一個數 組。 注意： 獲取子節點的時 候是包括了空文本或者是注釋。
var children = bodyNode.childNodes;
//document.write(children.length);
for (var i = 0; i < children.length; i++) {
//if(children[i].nodeType==1){
document.write("節點的名字：" + children[i].nodeName + " 對象的類型:" + children[i].nodeType + "---");
//}
}
document.write("<br />");
document.write("第一個子節點：" + bodyNode.firstChild.nodeName);
document.write("最后一個子節點：" + bodyNode.lastChild.nodeName);
document.write("<br />");
//找兄弟節點
var inputNode = document.getElementById("userName");
document.write("下個兄弟節點：" + inputNode.nextSibling.nodeName);
document.write("上一個兄弟節點：" + inputNode.previousSibling.nodeName);
</script>
</html>
6.創建節點，插入節點
每個節點都包含的信息的，這些屬性是：
nodeType 節點類型
nodeName 節點名稱
nodeValue節點值
元素類型 節點類型
元素 1 就是標簽元素，例<div>..</div>
文本 3 標簽元素中的文本
注釋 8 表示為注釋
nodeName
nodeName 屬性含有某個節點的名稱。
--------------------------------
元素節點的 nodeName 是標簽名稱
屬性節點的 nodeName 是屬性名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document
nodeValue
對於文本節點，nodeValue 屬性是所包含的文本。
對於屬性節點，nodeValue 屬性是屬性值。
對於注釋節點，nodeValue 屬性注釋內容。
nodeValue 屬性對於文檔節點和元素節點是不可用的。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript">
/*
創建節點、設置節點的屬性。
document.createElement("標簽名") 創建新元素節點
elt.setAttribute("屬性名", "屬性值") 設置屬性
elt.appendChild(e) 添加元素到elt中最后的位置
*/
var num = 1;
function add() {
var inputNode = document.createElement("input"); //創建一個指定標簽名字的節點。
//setAttribute:設置節點的屬性
inputNode.setAttribute("type", "button");
inputNode.setAttribute("value", "按鈕" + num);
num++;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode); //appendChild 添加子節點。
}
</script>
</head>
<body>
<input type="button" onclick="add()" value="添加" />
</body>
</html>
7.練習：添加標簽
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript">
/*
插入目標元素的位置
elt.insertBefore(newNode, childNode); 添加到elt中，childNode之前。
注意： elt必須是childNode的直接父節點。
刪除指定的子節點
elt.removeChild(child)
注意： elt必須是child的直接父節點。
*/
//添加附件
function addFile() {
//獲取表格節點對象
var table = document.getElementsByTagName("table")[0];
//創建tr標簽節點對象
var trnode = document.createElement("tr");
trnode.innerHTML = "<td><input type='file'/></td><td><a href='#' onclick='del(this)'>刪除附件</a></td>";
/* var tdnode1=document.createElement("td");
var tdnode2=document.createElement("td");
tdnode1.innerHTML="<input type='file'/>";
tdnode2.innerHTML="<a href='#'>刪除附件</a>";
trnode.appendChild(tdnode1);
trnode.appendChild(tdnode2);*/
//table.appendChild(trnode);
//獲取父節點對象
var tbody = document.getElementsByTagName("tbody")[0];
//獲取要插入的子節點
var lastrow = document.getElementById("lastrow");
//添加數據
tbody.insertBefore(trnode, lastrow);
}
//刪除附件
function del(delfile) {
//獲取父節點對象
var tbody = document.getElementsByTagName("tbody")[0];
//獲取要刪除的tr標簽節點對象
var del = delfile.parentNode.parentNode;
//刪除數據
tbody.removeChild(del);
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td><input type="file" /></td>
<td><a href="#" onclick="del(this)">刪除附件</a></td>
</tr>
<tr id="lastrow">
<td colspan="2"><input onclick="addFile()" type="button" value="添加附件" /></td>
</tr>
</tbody>
</table>
</body>
</html>
8.練習:城市聯動框
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script type="text/javascript">
function showCity() {
//維護一個二維數組存儲省份對應的城市
var citys = [[],["洛陽", "鄭州", "三門峽"],["青島", "日照", "煙台"],["廣州", "汕頭"]];
//獲取省份對應的節點
var provinceNodes = document.getElementById("province");
//獲取省份選中的選項
var index = provinceNodes.selectedIndex;
//獲取對應的城市
var datas = citys[index];
//找到city節點
var citynode = document.getElementById("city");
//先清空city框所有option
var citychild = citynode.childNodes;
for (var i = 0; i < citychild.length;) {
citynode.removeChild(citychild[i]);
}
//設置options的個數。
//citynode.options.length = 1;
//遍歷對應的所有城市然后創建對應的option添加到city上。
for (var i = 0; i < datas.length; i++) {
var op = document.createElement("option");
op.innerHTML = datas[i];
citynode.appendChild(op);
}
}
</script>
</head>
<body>
省份<select id="province" onchange="showCity()">
<option>省份</option>
<option>河南</option>
<option>山東</option>
<option>廣東</option>
</select> 城市
<select id="city">
<option>城市</option>
</select>
</body>
</html>
9.正則驗證From表單
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//檢查用戶名
function checkName(){
var inputNode = document.getElementById("userName");
var spanNode = document.getElementById("userId");
//獲取輸入框的內容
var content = inputNode.value;
//用戶名的規則： 六位的英文與數字組成。數字不能開頭
var reg = /^[a-z][a-z0-9]{5}$/i;
if(reg.test(content)){
//符合規則
spanNode.innerHTML = "正確".fontcolor("green");
return true;
}else{
//不符合規則
spanNode.innerHTML = "錯誤".fontcolor("red");
return false;
}
}
//檢查郵箱
function checkEmail(){
var email = document.getElementById("email").value;
var spanNode = document.getElementById("emailspan");
//編寫郵箱的正則 13456@qq.com 13456@qq.net 13456@qq.com.cn
var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i;
if(reg.test(email)){
//符合規則
spanNode.innerHTML = "正確".fontcolor("green");
return true;
}else{
//不符合規則
spanNode.innerHTML = "錯誤".fontcolor("red");
return false;
}
}
function checkAll(){
var userName = checkName();
var email = checkEmail();
if(userName&&email){
return true;
}else{
return false;
}
}
/*
表單提交的時候是會觸發onsubmit事件的，如果onsubmit事件的方法返回是true，那么該表單允許提交，如果返回的是false，該表單不允許提交。
*/
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>正則表達式</title>
</head>
<body>
<form action="success.html" method="get" onsubmit="return checkAll()" > <!--如果表單提交時候觸發的方法返回是false,那么該表單
不允許提交，如果返回的是true允許提交 -->
<table border="1px" width="50%" align="center"
cellspacing="0px" cellpadding="3px">
<tr>
<td width="25%">姓名:</td>
<td>
<input type="text" name="userName" id="userName" onblur="checkName()"/>
<span id="userId"></span>
</td>
</tr>
<tr>
<td >密碼:</td><td>
<input type="password" name="pwd" id="pwd" onblur="checkPass()"/>
<span id="passId"></span>
</td>
</tr>
<tr>
<td>確認密碼:</td><td>
<input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" /> <span id="ensure"></span>
</td>
</tr>
<tr>
<td>郵箱</td><td>
<input type="text" name="email" id="email"
onblur="checkEmail()"/>
<span id="emailspan"></span>
</td>
</tr>
<tr>
<td>性別</td><td>
<input type="radio" checked="ture" name="gender" id="male" value="male"/>
男
<input type="radio" name="gender" value="female"/>
女</td>
</tr>
<tr>
<td>愛好:</td><td>
<input type="checkbox" name="like" />
eat
<input type="checkbox" name="like" />
sleep
<input type="checkbox" name="like"/>
play
<span id="hobbySpan"></span>
</td>
</tr>
<tr>
<td>城市</td><td>
<select name="city" id="city">
<option value=""> 請選擇</option>
<option value="bj"> 北京 </option>
<option value="gz"> 廣州 </option>
<option value="sh"> 上海 </option>
</select>
</td>
</tr>
<tr>
<td>自我介紹</td><td> <textarea cols="15" rows="5" name="myInfo" id="myInfo"></textarea></td>
</tr>
<tr align="center">
<td colspan="2"><!--提交按鈕-->
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Success.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<h1><font color="#FF0000">恭喜你 ,提交數據成功</font></h1>
</body>
</html>
正則表達式：
位置：
^ 開頭
$ 結尾
次數：
* 0或多個
+ 1或多個
? 0或1個
{n} 就是n個
{n,} 至少n個
{n,m} 最少n個，最多m個
通配符：
\d 任意數字
\D 任意非數字
\s 任意空白
\S 任意非空白
. 任意字符（除'\n'外）
組合：
[a-z]
[0-9]
(正則) 匹配括號中正則表達式對應的結果，並暫存這個結果。
(?:正則) 匹配括號中正則表達式對應的結果，但不暫存這個結果。
\數字 使用第n個組匹配的結果
使用正則的工具（RegExp類與相關方法）
創建：
// 方式一
var regex = new RegExp("正則表達式", "標志");
// 方式二
var regex = /正則表達式/標志
標志：
g （全文查找出現的所有 pattern）
i （忽略大小寫）
m （多行查找）
方法：
Regexp.test( str )
String.replace( regex, str )