DOM
Document Object Model
功能：用來控制頁(yè)面中的內(nèi)容，通過操作對(duì)象來控制頁(yè)面內(nèi)容。
DOM本質(zhì)就是將文檔中的所有內(nèi)容封裝成對(duì)象。
五類對(duì)象
- Document - 文檔對(duì)象
- Element - 元素對(duì)象
- Text - 文本對(duì)象
- Attribute -屬性對(duì)象
- Common - 注釋對(duì)象
DOM對(duì)象的獲得
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>對(duì)象的獲得</title>
</head>
<body>
<div id="one" class="two" name="three" ></div>
<script type="text/javascript">
//dom的所有對(duì)象會(huì)在頁(yè)面打開時(shí),由瀏覽器負(fù)責(zé)創(chuàng)建.
//我們?nèi)绾潍@得這些dom對(duì)象?
// 瀏覽器把 dom的定點(diǎn)對(duì)象 Document對(duì)象的引用交給了 window對(duì)象
//代碼:window.document
//document
var doc = window.document;
//alert(doc);
//element 的獲得 (重點(diǎn))
var div1 = document.getElementsByTagName("div")[0];
var div2 = document.getElementById("one");
var div3 = document.getElementsByClassName("two")[0];
var div4 = document.getElementsByName("three")[0];
alert(div3 == div4);
</script>
</body>
</html>
DOM中的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom事件1</title>
</head>
<body>
<input type="button" value="點(diǎn)我" id="one" onclick="alert('heihei')" />
<script type="text/javascript">
//演示 給id為one的 按鈕 添加事件的方法
//方式1:
/* //1 獲得要添加的元素對(duì)象
var one = document.getElementById("one");
//2 添加事件函數(shù)屬性
one.onclick=function(){
alert("haha");
} */
//方式2:
// <input type="button" value="點(diǎn)我" id="one" onclick="alert("heihei")" />
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom事件2</title>
</head>
<body>
<input type="text" id="one" />
<select id="two" >
<option>大專</option>
<option>本科</option>
</select>
<script type="text/javascript">
var one = document.getElementById("one");
// 鼠標(biāo)點(diǎn)中文本框時(shí)
/* one.onblur=function(){
alert("失去焦點(diǎn)!");
}
// 鼠標(biāo)離開文本框時(shí)
one.onfocus=function(){
alert("得到焦點(diǎn)!");
} */
// 內(nèi)容、選中改變時(shí)
one.onchange=function(){
alert("被改變了!");
}
two.onchange=function(){
alert("被改變了!");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom事件3</title>
</head>
// 頁(yè)面加載時(shí)候調(diào)用onload
<body onload="alert('haha')">
<input type="text" id="one" />
<script type="text/javascript">
/* onkeydown 某個(gè)鍵盤按鍵被按下。 3 1 No Yes
onkeypress 某個(gè)鍵盤按鍵被按下并松開。 3 1 9 Yes
onkeyup 某個(gè)鍵盤按鍵被松開。 3 1 9 Yes */
//event => 封裝了事件發(fā)生的詳情
//keyCode屬性 => 按下按鍵的unicode碼
var one = document.getElementById("one");
one.onkeydown=function(event){
//1 獲得摁下的按鍵
var key = event.keyCode;
//2 判斷按鍵按下的是否是回車
if(key==13){
//是=>表單提交
alert("表單被提交了");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom事件</title>
<style type="text/css">
div{
border:1px red solid;
width:300px;
height: 300px;
}
</style>
</head>
<body>
<div id="one">
</div>
<script type="text/javascript">
/* onmousedown 鼠標(biāo)按鈕被按下。 4 1 9 Yes
onmouseup 鼠標(biāo)按鍵被松開。
onmouseout 鼠標(biāo)從某元素移開。 4 1 9 Yes
onmouseover 鼠標(biāo)移到某元素之上。 3 1 9 Yes
onmousemove 鼠標(biāo)被移動(dòng)。 3 1 9 Yes
*/
var one = document.getElementById("one");
one.onmousedown =function(eventa){
alert(event.button);
}
one.onmouseout =function(event){
alert("onmouseout");
}
/*one.onmouseover =function(event){
alert("onmouseover");
} */
/* one.onmousemove =function(event){
alert(event.clientX+"==>"+event.clientY);
} */
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom事件5</title>
</head>
<body>
<form action="#" id="one" >
用戶名:<input type="text" /><br>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
//onsubmit 當(dāng)表單提交時(shí)觸發(fā)
//作用: 表單驗(yàn)證
//onsubmit="return fun();"
var one = document.getElementById("one");
one.onsubmit = function (event){
//校驗(yàn)
//校驗(yàn)通過
alert("校驗(yàn)不通過!");
//校驗(yàn)不通過 => 攔截表單提交
//return false;
// 阻止默認(rèn)事件的發(fā)生，即表單的提交
event.preventDefault();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom</title>
<style type="text/css">
div{
border:1px red solid;
}
#one{
width:300px;
height: 300px;
}
#two{
width:100px;
height: 100px;
}
</style>
</head>
<body>
<div id="one">
<div id="two">
</div>
</div>
<script type="text/javascript">
//event.stopPropagation();
//阻止事件的繼續(xù)傳播，在這里效果是點(diǎn)擊里面的，外面不會(huì)alert
document.getElementById("two").onclick=function (event){
alert("two");
event.stopPropagation();
}
document.getElementById("one").onclick=function (){
alert("one");
}
</script>
</body>
</html>
DOM中的增刪改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CURD</title>
<style type="text/css">
div {
border:#0099FF 1px solid;
height:60px;
width:120px;
margin:20px 0px 20px 20px;
padding:10px 0px 0px 20px;
}
#div_1{
background-color:#00FFFF;
}
#div_2{
background-color:#FF3399;
}
#div_3{
background-color:#0000FF;
}
#div_4{
background-color:#FFFF66;
}
</style>
</head>
<body>
<div id="div_1">
</div>
<div id="div_2">
div區(qū)域2
</div>
<div id="div_3">
div區(qū)域3
</div>
<div id="div_4">
div區(qū)域4
</div>
<hr />
<input type="button" value="創(chuàng)建并添加節(jié)點(diǎn)" onclick="addNode()" />
<input type="button" value="刪除節(jié)點(diǎn)" onclick="deleteNode()" />
<input type="button" value="替換節(jié)點(diǎn)" onclick="updateNode()" />
<input type="button" value="克隆節(jié)點(diǎn)" onclick="copyNode()" />
<script type="text/javascript">
//創(chuàng)建并添加節(jié)點(diǎn)
function addNode(){
// 1 創(chuàng)建A標(biāo)簽對(duì)象 <a></a>
var a = document.createElement("a");
// 2 為創(chuàng)建的a標(biāo)簽增加屬性
a.setAttribute("href", "https://www.baidu.com");
// 3 為a標(biāo)簽添加標(biāo)簽體
a.innerHTML = "點(diǎn)我";
// 4 找到div標(biāo)簽
var div_1 = document.getElementById("div_1");
// 5 添加
div_1.appendChild(a);
}
//刪除節(jié)點(diǎn)
function deleteNode(){
//1 獲得要?jiǎng)h除的div
var div_2 = document.getElementById("div_2");
//2 獲得div的父元素
var parent = div_2.parentNode;
//3 通過父節(jié)點(diǎn)刪除孩子節(jié)點(diǎn)
parent.removeChild(div_2);
}
//替換節(jié)點(diǎn)
function updateNode(){
//1 獲得被替換的div
var div_3 = document.getElementById("div_3");
//2 創(chuàng)建img元素對(duì)象<img />
var img = document.createElement("img");
//3 為img添加屬性
img.setAttribute("src", "cherry.jpg");
img.setAttribute("width", "300");
//4 找到父節(jié)點(diǎn)
var parent = div_3.parentNode;
//5 替換
parent.replaceChild(img, div_3);
}
//克隆節(jié)點(diǎn)
function copyNode(){
// 1.獲得div4
var div_4 = document.getElementById("div_4");
// 2.調(diào)用克隆方法克隆
var div_copy = div_4.cloneNode(true);
// 3.獲得父親\
var parent = div_4.parentNode;
// 4.添加到最后一個(gè)div之前
//parent.appendChild(div_copy);
parent.insertBefore(div_copy, div_4);
}
</script>
</body>
</html>
表單驗(yàn)證例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單驗(yàn)證例子</title>
</head>
<body>
<form action="" name="form1" onsubmit="return fun1();">
<table border="1" width="30%" >
<tr>
<th colspan="2" align="center" >
用戶注冊(cè)
</th>
</tr>
<tr>
<td>用戶名:</td>
<td><input type="text" name="name" onblur="checkName();" /><font color="red" ></font></td>
</tr>
<tr>
<td>郵箱:</td>
<td><input type="text" name="email" /><font color="red" ></font></td>
</tr>
<tr>
<td colspan="2" align="center" >
<input type="submit" value="提交" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//如果校驗(yàn)不符合規(guī)則,攔截表單的提交
//1 用戶名不能為空,并且長(zhǎng)度在6到10位之間.只能以英文字母開頭. 用戶名中只能使用"_"符號(hào).
function fun1(){
var flag = true;
if(!checkEmail()){
flag = false;
}
if(!checkName()){
flag = false;
}
alert(flag);
return flag;
}
//驗(yàn)證郵箱
function checkEmail(){
//1 獲得用戶輸入的郵箱
var email = document.form1.email.value;
//2 定義正則
var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g;
//3 校驗(yàn)
if(!reg.test(email)){
//失敗=>提示,并返回false
addError(document.form1.email,"郵箱不符合規(guī)則!");
return false;//攔截表單提交
}else{
removeError(document.form1.email);
return true;
}
}
//驗(yàn)證用戶名
function checkName(){
//1 獲得文本輸入框中的內(nèi)容
//var nameInput= document.getElementsByName("name")[0];
var nameInput = document.form1.name;
//var name = nameInput.getAttribute("value");
var name = nameInput.value; //DHTML屬性
//2 定義正則表達(dá)式對(duì)象
var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
//3 校驗(yàn)
if(!reg.test(name)){
//校驗(yàn)失敗=> 提示用戶.
//alert("用戶需要6到10位,不能以數(shù)字開頭!");
addError(nameInput,"用戶需要6到10位,不能以數(shù)字開頭!");
return false;//攔截表單提交
}else{
//驗(yàn)證成功=>清除錯(cuò)誤信息
removeError(nameInput);
return true;
}
}
//添加錯(cuò)誤
//參數(shù)1 : 標(biāo)識(shí)往那里添加
//參數(shù)2 : 錯(cuò)誤信息是什么
function addError(where,what){
where.nextSibling.innerHTML=what;
}
//清除錯(cuò)誤
function removeError(where){
where.nextSibling.innerHTML="";
}
</script>
</body>
</html>
二級(jí)聯(lián)動(dòng)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二級(jí)聯(lián)動(dòng)</title>
</head>
<body onload="fun1();">
<script type="text/javascript">
// json對(duì)象
// 相當(dāng)于java當(dāng)中的map
/*
var json = {"name":"tom","age":18};
//遍歷json對(duì)象的鍵
for(var key in json){
//alert(key);
alert(key+"==>"+json[key])
}
*/
var json = {"河北省":["石家莊","廊坊","滄州"],
"山西省":["太原","大同","運(yùn)城"],
"黑龍江省":["哈爾濱","齊齊哈爾","佳木斯"]};
function fun1(){
//1 獲得省的select對(duì)象
var province = document.getElementById("province");
//2 遍歷json的所有鍵
for(var key in json){
// 創(chuàng)建一個(gè)option
var option = document.createElement("option");
option.innerHTML = key; // <option>河北省</option>
// 將option添加到select中
province.appendChild(option);
}
}
function fun2(){
//1 獲得市的select對(duì)象
var province = document.getElementById("province");
var city = document.getElementById("city");
//2 清空市級(jí)下拉選的數(shù)據(jù)，只保留提示選項(xiàng)
city.length =1;
//3 獲得用戶選擇的省
if(province.selectedIndex == 0){
//用戶選擇的是提示選項(xiàng)(index = 0)=>什么也不做
return;
}
var options = province.options;
// 城市內(nèi)容
var pName = options[province.selectedIndex].innerHTML;
alert(pName);
//4 從json中根據(jù)省獲得 省下的市數(shù)據(jù)
var cities = json[pName];
//5 遍歷市級(jí)的數(shù)組
for(var i = 0 ; i<cities.length;i++){
var cityName = cities[i];
//創(chuàng)建市的option
var option = document.createElement("option");
option.innerHTML = cityName;
// 將option添加到select中
city.appendChild(option);
}
}
</script>
<select id="province" onchange="fun2()">
<option>--請(qǐng)選擇省--</option>
</select>
<select id="city">
<option>--請(qǐng)選擇市--</option>
</select>
</body>
</html>
2017.3.9
by @sunhaiyu
