5、DOM
2017-03-11 本文已影响9人
sunhaiyu
DOM
Document Object Model
功能：用来控制页面中的内容，通过操作对象来控制页面内容。
DOM本质就是将文档中的所有内容封装成对象。
五类对象
- Document - 文档对象
- Element - 元素对象
- Text - 文本对象
- Attribute -属性对象
- Common - 注释对象
DOM对象的获得
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象的获得</title>
</head>
<body>
<div id="one" class="two" name="three" ></div>
<script type="text/javascript">
//dom的所有对象会在页面打开时,由浏览器负责创建.
//我们如何获得这些dom对象?
// 浏览器把 dom的定点对象 Document对象的引用交给了 window对象
//代码:window.document
//document
var doc = window.document;
//alert(doc);
//element 的获得 (重点)
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="点我" id="one" onclick="alert('heihei')" />
<script type="text/javascript">
//演示 给id为one的 按钮 添加事件的方法
//方式1:
/* //1 获得要添加的元素对象
var one = document.getElementById("one");
//2 添加事件函数属性
one.onclick=function(){
alert("haha");
} */
//方式2:
// <input type="button" value="点我" 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");
// 鼠标点中文本框时
/* one.onblur=function(){
alert("失去焦点!");
}
// 鼠标离开文本框时
one.onfocus=function(){
alert("得到焦点!");
} */
// 内容、选中改变时
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>
// 页面加载时候调用onload
<body onload="alert('haha')">
<input type="text" id="one" />
<script type="text/javascript">
/* onkeydown 某个键盘按键被按下。 3 1 No Yes
onkeypress 某个键盘按键被按下并松开。 3 1 9 Yes
onkeyup 某个键盘按键被松开。 3 1 9 Yes */
//event => 封装了事件发生的详情
//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 鼠标按钮被按下。 4 1 9 Yes
onmouseup 鼠标按键被松开。
onmouseout 鼠标从某元素移开。 4 1 9 Yes
onmouseover 鼠标移到某元素之上。 3 1 9 Yes
onmousemove 鼠标被移动。 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 当表单提交时触发
//作用: 表单验证
//onsubmit="return fun();"
var one = document.getElementById("one");
one.onsubmit = function (event){
//校验
//校验通过
alert("校验不通过!");
//校验不通过 => 拦截表单提交
//return false;
// 阻止默认事件的发生，即表单的提交
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();
//阻止事件的继续传播，在这里效果是点击里面的，外面不会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区域2
</div>
<div id="div_3">
div区域3
</div>
<div id="div_4">
div区域4
</div>
<hr />
<input type="button" value="创建并添加节点" onclick="addNode()" />
<input type="button" value="删除节点" onclick="deleteNode()" />
<input type="button" value="替换节点" onclick="updateNode()" />
<input type="button" value="克隆节点" onclick="copyNode()" />
<script type="text/javascript">
//创建并添加节点
function addNode(){
// 1 创建A标签对象 <a></a>
var a = document.createElement("a");
// 2 为创建的a标签增加属性
a.setAttribute("href", "https://www.baidu.com");
// 3 为a标签添加标签体
a.innerHTML = "点我";
// 4 找到div标签
var div_1 = document.getElementById("div_1");
// 5 添加
div_1.appendChild(a);
}
//删除节点
function deleteNode(){
//1 获得要删除的div
var div_2 = document.getElementById("div_2");
//2 获得div的父元素
var parent = div_2.parentNode;
//3 通过父节点删除孩子节点
parent.removeChild(div_2);
}
//替换节点
function updateNode(){
//1 获得被替换的div
var div_3 = document.getElementById("div_3");
//2 创建img元素对象<img />
var img = document.createElement("img");
//3 为img添加属性
img.setAttribute("src", "cherry.jpg");
img.setAttribute("width", "300");
//4 找到父节点
var parent = div_3.parentNode;
//5 替换
parent.replaceChild(img, div_3);
}
//克隆节点
function copyNode(){
// 1.获得div4
var div_4 = document.getElementById("div_4");
// 2.调用克隆方法克隆
var div_copy = div_4.cloneNode(true);
// 3.获得父亲\
var parent = div_4.parentNode;
// 4.添加到最后一个div之前
//parent.appendChild(div_copy);
parent.insertBefore(div_copy, div_4);
}
</script>
</body>
</html>
表单验证例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证例子</title>
</head>
<body>
<form action="" name="form1" onsubmit="return fun1();">
<table border="1" width="30%" >
<tr>
<th colspan="2" align="center" >
用户注册
</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">
//如果校验不符合规则,拦截表单的提交
//1 用户名不能为空,并且长度在6到10位之间.只能以英文字母开头. 用户名中只能使用"_"符号.
function fun1(){
var flag = true;
if(!checkEmail()){
flag = false;
}
if(!checkName()){
flag = false;
}
alert(flag);
return flag;
}
//验证邮箱
function checkEmail(){
//1 获得用户输入的邮箱
var email = document.form1.email.value;
//2 定义正则
var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g;
//3 校验
if(!reg.test(email)){
//失败=>提示,并返回false
addError(document.form1.email,"邮箱不符合规则!");
return false;//拦截表单提交
}else{
removeError(document.form1.email);
return true;
}
}
//验证用户名
function checkName(){
//1 获得文本输入框中的内容
//var nameInput= document.getElementsByName("name")[0];
var nameInput = document.form1.name;
//var name = nameInput.getAttribute("value");
var name = nameInput.value; //DHTML属性
//2 定义正则表达式对象
var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g;
//3 校验
if(!reg.test(name)){
//校验失败=> 提示用户.
//alert("用户需要6到10位,不能以数字开头!");
addError(nameInput,"用户需要6到10位,不能以数字开头!");
return false;//拦截表单提交
}else{
//验证成功=>清除错误信息
removeError(nameInput);
return true;
}
}
//添加错误
//参数1 : 标识往那里添加
//参数2 : 错误信息是什么
function addError(where,what){
where.nextSibling.innerHTML=what;
}
//清除错误
function removeError(where){
where.nextSibling.innerHTML="";
}
</script>
</body>
</html>
二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
</head>
<body onload="fun1();">
<script type="text/javascript">
// json对象
// 相当于java当中的map
/*
var json = {"name":"tom","age":18};
//遍历json对象的键
for(var key in json){
//alert(key);
alert(key+"==>"+json[key])
}
*/
var json = {"河北省":["石家庄","廊坊","沧州"],
"山西省":["太原","大同","运城"],
"黑龙江省":["哈尔滨","齐齐哈尔","佳木斯"]};
function fun1(){
//1 获得省的select对象
var province = document.getElementById("province");
//2 遍历json的所有键
for(var key in json){
// 创建一个option
var option = document.createElement("option");
option.innerHTML = key; // <option>河北省</option>
// 将option添加到select中
province.appendChild(option);
}
}
function fun2(){
//1 获得市的select对象
var province = document.getElementById("province");
var city = document.getElementById("city");
//2 清空市级下拉选的数据，只保留提示选项
city.length =1;
//3 获得用户选择的省
if(province.selectedIndex == 0){
//用户选择的是提示选项(index = 0)=>什么也不做
return;
}
var options = province.options;
// 城市内容
var pName = options[province.selectedIndex].innerHTML;
alert(pName);
//4 从json中根据省获得 省下的市数据
var cities = json[pName];
//5 遍历市级的数组
for(var i = 0 ; i<cities.length;i++){
var cityName = cities[i];
//创建市的option
var option = document.createElement("option");
option.innerHTML = cityName;
// 将option添加到select中
city.appendChild(option);
}
}
</script>
<select id="province" onchange="fun2()">
<option>--请选择省--</option>
</select>
<select id="city">
<option>--请选择市--</option>
</select>
</body>
</html>
2017.3.9
by @sunhaiyu
