一台猴、概念
1类腮、DOM
DOM：Document Object Model 文檔對(duì)象模型
要實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)交互效果椅文，bom 操作遠(yuǎn)遠(yuǎn)不夠缭嫡，需要操作 html 才是核心缔御。如何操作 htm，就是 DOM妇蛀。簡(jiǎn)單的說(shuō)耕突，dom 提供了用程序動(dòng)態(tài)控制 html 接口。DOM 即文檔對(duì)象模型描 繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)评架，運(yùn)行開(kāi)發(fā)人員添加眷茁、移除和修改頁(yè)面的某一部分。dom 處于 javascript 的核心地位上纵诞。
每個(gè)載入瀏覽器的 HTML 文檔都會(huì)成為 Document 對(duì)象上祈。Document 對(duì)象使我們可以從腳 本中對(duì)HTML 頁(yè)面中的所有元素進(jìn)行訪問(wèn)。Document 對(duì)象是 Window 對(duì)象的一部分，可通過(guò) window.document 屬性對(duì)其進(jìn)行訪問(wèn)登刺。
2籽腕、節(jié)點(diǎn)
加載 HTML 頁(yè)面時(shí)，Web 瀏覽器生成一個(gè)樹(shù)型結(jié)構(gòu)纸俭，用來(lái)表示頁(yè)面內(nèi)部結(jié)構(gòu)节仿。DOM 將這 種樹(shù)型結(jié)構(gòu)理解為由節(jié)點(diǎn)組成，組成一個(gè)節(jié)點(diǎn)樹(shù)掉蔬。對(duì)于頁(yè)面中的元素廊宪，可以解析成以下幾種類 型的節(jié)點(diǎn)：
節(jié)點(diǎn)類型 HTML內(nèi)容 例如
文檔節(jié)點(diǎn) 文檔本身 整個(gè)文檔document
元素節(jié)點(diǎn) 所有的HTML元素 a、div女轿、p
屬性節(jié)點(diǎn) HTML元素內(nèi)的屬性 id箭启、href、name蛉迹、class
文本節(jié)點(diǎn) 元素內(nèi)的文本 hello
注釋節(jié)點(diǎn) HTML中的注釋 <!-- -->
clipboard1.png
二傅寡、元素節(jié)點(diǎn)的操作
當(dāng) HTML 文檔在被解析為一顆 DOM 樹(shù)以后，里面的每一個(gè)節(jié)點(diǎn)都可以看做是一個(gè)一個(gè)的 對(duì)象北救，我們成為 DOM 對(duì)象荐操，對(duì)于這些對(duì)象，我們可以進(jìn)行各式各樣的操作珍策，查找到某一個(gè)或 者一類節(jié)點(diǎn)對(duì)象托启，可以創(chuàng)建某種節(jié)點(diǎn)對(duì)象，可以在某個(gè)位置添加節(jié)點(diǎn)對(duì)象攘宙，甚至可以動(dòng)態(tài)地刪 除節(jié)點(diǎn)對(duì)象屯耸，這些操作可以使我們的頁(yè)面看起來(lái)有動(dòng)態(tài)的效果，后期結(jié)合事件使用蹭劈，就能讓我 們的頁(yè)面在特定時(shí)機(jī)疗绣、特定的事件下執(zhí)行特定的變換。
- 獲取節(jié)點(diǎn)
在進(jìn)行增铺韧、刪多矮、改的操作時(shí)，都需要指定到一個(gè)位置哈打，或者找到一個(gè)目標(biāo)塔逃，此時(shí)我們就可 以通過(guò) Document 對(duì)象提供的方法，查找前酿、定位某個(gè)對(duì)象（也就是我們說(shuō)的節(jié)點(diǎn)）患雏。
注意：操作 dom 必須等節(jié)點(diǎn)初始化完畢后，才能執(zhí)行罢维。處理方式兩種:
（1）把 script 調(diào)用標(biāo)簽移到 html 末尾即可淹仑；
（2）使用 onload 事件來(lái)處理 JS丙挽，等待 html 加載完畢再加載 onload 事件里的 JS。
方法 描述
getElementById() 根據(jù) id 獲取 dom 對(duì)象匀借，如果 id 重復(fù)颜阐，那么以第一個(gè)為準(zhǔn)
getElementsByTagName() 根據(jù)標(biāo)簽名獲取 dom 對(duì)象數(shù)組
getElementsByClassName() 根據(jù)樣式名獲取 dom 對(duì)象數(shù)組
getElementsByName() 根據(jù) name屬性值獲取 dom 對(duì)象數(shù)組，常用于多選獲取值
- 創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)
* 創(chuàng)建節(jié)點(diǎn)
方法 描述
createElement() 創(chuàng)建一個(gè)新的節(jié)點(diǎn)吓肋，需要傳入節(jié)點(diǎn)的標(biāo)簽名稱凳怨，返回創(chuàng)建的元素對(duì)象
createTextNode() 創(chuàng)建一個(gè)文本節(jié)點(diǎn)，可以傳入文本內(nèi)容 innerHTML
也能達(dá)到創(chuàng)建節(jié)點(diǎn)的效果是鬼，直接添加到指定位置了
* 插入節(jié)點(diǎn)
方法 描述
write() 將任意的字符串插入到文檔中
appendChild() 向元素中添加新的子節(jié)點(diǎn)肤舞，作為最后一個(gè)子節(jié)點(diǎn)
insertBefore() 向指定的已有的節(jié)點(diǎn)之前插入新的節(jié)點(diǎn)
newItem：要插入的節(jié)點(diǎn)
exsitingItem：參考節(jié)點(diǎn) 需要參考父節(jié)點(diǎn)
/**
* 替換元素
*/
function replaceNode() {
// oldNode.parentNode.replaceChild(newNode,oldNode)
// 首先通過(guò)舊節(jié)點(diǎn)定位到父節(jié)點(diǎn)，然后用新的節(jié)點(diǎn)替換舊節(jié)點(diǎn)
var cxy = document.getElementById("test");
// 創(chuàng)建新節(jié)點(diǎn)
var span = document.createElement("span");
span.innerHTML = "攻城獅";
cxy.parentNode.replaceChild(span,cxy);
}
/**
* cloneNode() 復(fù)制節(jié)點(diǎn)
var 復(fù)制好的節(jié)點(diǎn) = 被復(fù)制的節(jié)點(diǎn).cloneNode([true/false]);
true：深度克隆均蜜，可以克隆結(jié)構(gòu)和內(nèi)容
false(默認(rèn)值)：只克隆結(jié)構(gòu)
*/
function cloneValue() {
// 得到被克隆的對(duì)象
var cloneValue = document.getElementById("music");
var newValue = cloneValue.cloneNode(false); // 淺度克隆李剖，只克隆結(jié)構(gòu)
console.log(newValue);
var deepValue = cloneValue.cloneNode(true); // 克隆結(jié)構(gòu)及內(nèi)容
console.log(deepValue);
// 將克隆好的結(jié)果追加到div中
document.getElementById("mydiv").appendChild(deepValue);
}
- 間接查找節(jié)點(diǎn)
方法|屬性 描述
childNodes () 返回元素的一個(gè)子節(jié)點(diǎn)的數(shù)組
firstChild() 返回元素的第一個(gè)子節(jié)點(diǎn)
lastChild() 返回元素的最后一個(gè)子節(jié)點(diǎn)
nextSibling 返回元素的下一個(gè)兄弟節(jié)點(diǎn)
parentNode 返回元素的父節(jié)點(diǎn)
previousSibling 返回元素的上一個(gè)兄弟節(jié)點(diǎn)
// 得到div對(duì)象
var div1 = document.getElementById("div1");
// childNodes () 返回元素的一個(gè)子節(jié)點(diǎn)的數(shù)組
console.log(div1.childNodes);
// firstChild() 返回元素的第一個(gè)子節(jié)點(diǎn)
console.log(div1.firstChild);
// lastChild() 返回元素的最后一個(gè)子節(jié)點(diǎn)
console.log(div1.lastChild);
// parentNode 返回元素的父節(jié)點(diǎn)
console.log(div1.parentNode);
// nextSibling 返回元素的下一個(gè)兄弟節(jié)點(diǎn)
console.log(div1.nextElementSibling); // 下一個(gè)元素節(jié)點(diǎn)（元素）
console.log(div1.nextSibling); // 下一個(gè)節(jié)點(diǎn)（包含文本節(jié)點(diǎn)）
// previousSibling 返回元素的上一個(gè)兄弟節(jié)點(diǎn)
console.log(div1.previousElementSibling); // 上一個(gè)元素節(jié)點(diǎn)（元素）
console.log(div1.previousSibling); // 上一個(gè)節(jié)點(diǎn)（包含文本節(jié)點(diǎn)）
- 替換節(jié)點(diǎn)
方法|屬性 描述
replaceChild(newNode,oldNode) 用新的節(jié)點(diǎn)替換舊的節(jié)點(diǎn)
oldNode.parentNode.replaceChild(newNode,oldNode)
首先通過(guò)舊節(jié)點(diǎn)定位到父節(jié)點(diǎn)，然后用新的節(jié)點(diǎn)替換舊節(jié)點(diǎn)
- 克隆節(jié)點(diǎn)
方法|屬性 描述
cloneNode() 復(fù)制節(jié)點(diǎn)
var 復(fù)制好的節(jié)點(diǎn) = 被復(fù)制的節(jié)點(diǎn).cloneNode([true/false]);
true：深度克隆囤耳，可以克隆結(jié)構(gòu)和內(nèi)容
false(默認(rèn)值)：只克隆結(jié)構(gòu)
- 刪除節(jié)點(diǎn)
方法|屬性 描述
removeChild() 從元素中移除子節(jié)點(diǎn)
三篙顺、表單操作
表單是我們頁(yè)面向后臺(tái)傳輸數(shù)據(jù)的一種非常常見(jiàn)的方式，在進(jìn)行數(shù)據(jù)發(fā)送（請(qǐng)求發(fā)出）之 前充择，我們應(yīng)該現(xiàn)在頁(yè)面進(jìn)行一系列數(shù)據(jù)合法性的驗(yàn)證德玫，節(jié)省不必要的錯(cuò)誤數(shù)據(jù)的傳輸，以及提 高用戶的體驗(yàn)度椎麦。
1宰僧、獲取表單
document.表單名稱
document.getElementById(表單 id);
document.forms[表單名稱]
document.forms[索引]; //從 0 開(kāi)始
<body>
<form id='myform' name="myform" action="" method="post">
</form>
<form id='myform2' name="myform2" action="" method="post">
</form>
</body>
<script>
//四種方式 var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);
</script>
2、獲取元素
* 獲取 input 的元素
1)铃剔、通過(guò) id 獲热鼋啊：document.getElementById(元素 id);
2)查刻、通過(guò) form.名稱形式獲取: myform.元素名稱; ? name 屬性值
3)键兜、通過(guò) name 獲取 :document.getElementsByName(元素名稱)[索引] //從 0 開(kāi)始
4)、通過(guò) tagName 數(shù)組 :document.getElementsByTagName('input')[索引] //從 0 開(kāi)始
<body>
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/>
<br />
密碼:<input type="password" id="upwd" name="upwd" value="123456" />
<br /> <input type="hidden" id="uno" name="uno" value="隱藏域" />
個(gè)人說(shuō)明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >
獲取元素內(nèi)容</button>
</form>
</body>
<script>
function getTxt(){
var uno =document.getElementById("uno");
var uname =myform.uname;
console.log(uname+"--------");
var upwd =document.getElementsByTagName('input')[1] ;
var intro =document.getElementsByName("intro")[0];
alert(uno.value+"-->"+uname.value +"-->"+upwd.value+"->"+intro.value);
}
</script>
* 獲取 單選按鈕
前提：將一組單選按鈕設(shè)置相同的 name 屬性值
(1)獲取單選按鈕組： document.getElementsByName("name 屬性值");
(2)遍歷每個(gè)單選按鈕穗泵，并查看單選按鈕元素的 checked 屬性 若
屬性值為 true 表示被選中普气，否則未被選中
選中狀態(tài)設(shè)定： checked=’checked’ 或 checked=’true’ 或 checked
未選中狀態(tài)設(shè)定： 沒(méi)有 checked 屬性 或 checked=’false’
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
</form>
<script type="text/javascript">
var radios = document.getElementsByName('rad')
//radios[0].checked = 'checked'
for(var i=0; i<radios.length; i++){
console.log(radios[i].checked + '---' + radios[i].value)
}
</script>
* 獲取 多選按鈕
操作方式與單選同理，不同之處在于可以多選
var ufav=document.getElementsByName("ufav"); var favstr="";
for (i=0;i<ufav.length;i++){
if(ufav[i].checked){
favstr+=ufav[i].value+",";
}
}
favstr =favstr.substr(0,favstr.length-1);
* 獲取下拉選項(xiàng)
（1）獲取 select 對(duì)象： var ufrom = document.getElementById("ufrom");
（2）獲取選中項(xiàng)的索引： var idx=ufrom.selectedIndex ;
（3）獲取選中項(xiàng) options 的 value 屬性值：
var val = ufrom.options[idx].value;
注意：當(dāng)通過(guò) options 獲取選中項(xiàng)的 value 屬性值時(shí)佃延，
若沒(méi)有 value 屬性现诀，則取 option 標(biāo)簽的內(nèi)容
若存在 value 屬性，則取 value 屬性的值
（4）獲取選中項(xiàng) options 的 text：
var txt = ufrom.options[idx].text;
選中狀態(tài)設(shè)定：selected='selected'履肃、selected=true仔沿、selected
未選中狀態(tài)設(shè)定：不設(shè) selected 屬性
<body>
來(lái)自:
<select id="ufrom" name="ufrom" >
<option value="-1" >請(qǐng)選擇</option>
<option selected="selected">北京</option>
<option value="1" >上海</option>
</select><br />
</body>
<script type="text/javascript">
// （1）獲取 select 對(duì)象
var sel = document.getElementById("ufrom");
// （2）獲取選中項(xiàng)的索引
var selectIndex = sel.selectedIndex;
console.log("當(dāng)前選中項(xiàng)的索引：" + selectIndex);
// （3）獲取選中項(xiàng) options 的 value 屬性值
var value1 = sel.value;
var value2 = sel.options[selectIndex].value;
console.log("當(dāng)前選中項(xiàng)的值：" + value1 + "," + value2);
// （4）獲取選中項(xiàng) options 的 text
var text1 = sel.options[selectIndex].innerHTML;
var text2 = sel.options[selectIndex].text;
console.log("當(dāng)前選中項(xiàng)的文本：" + text1 + "," + text2);
</script>
3、提交表單
注：提交表單時(shí)尺棋，表單元素必須設(shè)置name屬性值
提交類型：
get請(qǐng)求
參數(shù)會(huì)直接跟在地址欄后面顯示封锉，請(qǐng)求參數(shù)的長(zhǎng)度有限，相對(duì)post而言不安全，
不會(huì)自動(dòng)刷新緩存成福；每次訪問(wèn)時(shí)優(yōu)先獲取緩存中的數(shù)據(jù)碾局，所以請(qǐng)求速度快。
post請(qǐng)求 （需要服務(wù)器的支持）
參數(shù)不會(huì)跟在地址欄后面顯示奴艾，請(qǐng)求參數(shù)長(zhǎng)度不限（其實(shí)是有長(zhǎng)度限制净当，
與服務(wù)器相關(guān)），相對(duì)而言安全蕴潦，會(huì)自動(dòng)刷新緩存像啼；請(qǐng)求速度相對(duì)而言慢。
通常做查詢操作潭苞，使用GET請(qǐng)求埋合；增刪改使用POST請(qǐng)求。
提交表單
（1）使用普通 button 按鈕+onclick 事件+事件中編寫(xiě)代碼:
獲取表單.submit();
（2）使用 submit 按鈕 + onclick="return 函數(shù)()" +函數(shù)編寫(xiě)代碼:
最后必須返回：return true|false;
（3）使用 submit 按鈕/圖片提交按鈕 + 表單 onsubmit="return 函數(shù)();" +函數(shù)編寫(xiě)代碼:
最后必須返回：return true|false;
<form action="01-獲取表單.html" method="get">
姓名：<input type="text" name="uname" />
<input type="submit" value="提交" onclick="return checkForm1()"/>
</form>
<form action="01-獲取表單.html" method="get" onsubmit="return checkForm2()">
姓名：<input type="text" name="uname" />
<input type="submit" value="提交" />
</form>
<form action="01-獲取表單.html" method="get" >
姓名：<input type="text" name="uname1" />
<input type="button" value="提交" onclick="checkForm3()" />
<span id="msg" style="font-size: 12px;color: red;"></span>
</form>
<script type="text/javascript">
/*提交方式一：submit按鈕 + onclick事件*/
// 給submit按鈕綁定點(diǎn)擊事件萄传，調(diào)用時(shí)需要使用"return 函數(shù)名()"甚颂，定義的函數(shù)中需要return true或false；
//如果return true秀菱，則提交表單振诬；return false不提交；若直接return也會(huì)提交表單
function checkForm1() {
//return true; // 提交表單
return false; // 不提交表單
//return; // 無(wú)效衍菱，不會(huì)阻止表單提交
}
/*提交方式二：submit按鈕 + onsubmit事件*/
// 給表單對(duì)象綁定onsubmit事件赶么，調(diào)用時(shí)需要使用"return 函數(shù)名()"，定義的函數(shù)中需要return true或false脊串；
//如果return true辫呻，則提交表單；return false不提交琼锋；若直接return也會(huì)提交表單
function checkForm2() {
return true; // 提交表單
//return false; // 不提交表單
//return; // 無(wú)效放闺，不會(huì)阻止表單提交
}
/*提交方式三：button按鈕+點(diǎn)擊事件*/
// 給button按鈕綁定點(diǎn)擊事件，調(diào)用時(shí)需要使用"函數(shù)名()"缕坎，如果滿足要求則手動(dòng)提交表單怖侦，否則return
function checkForm3() {
var uname = document.getElementsByName("uname1")[0].value;
if ( uname == null || uname.trim() == "") {
console.log("用戶名不能為空！");
document.getElementById("msg").innerHTML = "用戶名不能為空谜叹！";
return;
}
// 手動(dòng)提交表單
document.forms[2].submit();
}
</script>
