一、DOM对象简介
DOM是文档对象模型。
二、文档对象获取的方法
2.1 通过Id来获取元对象：document.getElementById("id值"),返回的是一个对象。
2.2 通过标签名来获取对象 ：document.getElementsByTagName("标签名");返回一个集合【数组】。
2.3 通过class属性值来获取对象：document.getElementsByClassName("sp");返回一个集合【数组】。
2.4 通过name 属性值来获取对象：document.getElementsByName("name属性值");返回一个集合【数组】。
2.5 HTML5 中新提供方式
2.5.1 document.querySelector("选择器");只返回匹配到的第一个元素，返回的是一个对象。
2.5.2 document.querySelectorAll("选择器"); 返回所有匹配的元素，返回值都是集合【数组】。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>获取DOM</title>
</head>
<body>
<div id="dd">
演示 DOM获取
</div>
<ul>
<li>空调</li>
<li class="sp">空调</li>
<li>冰镇西瓜</li>
</ul>
<span class="sp">
根据class 来获取对象
</span>
<p name="pp"> name=dddd</p>
<i name="pp"> name=dddd</i>
<a name="pp"> adasdfasdf</a>
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
</body>
<script type="text/javascript">
//1.通过Id来获取元对象
//document.getElementById("id值"),返回一个对象
var obj= document.getElementById("dd");
obj.style.color="red";
//2.通过标签名来获取对象
//document.getElementsByTagName("标签名");返回一个集合【数组】
var lis= document.getElementsByTagName("li");
debugger;
lis[2].style.backgroundColor="green";
lis[2].style.color="red";
//3.通过class属性值来获取对象
//document.getElementsByClassName("sp");返回一个集合【数组】
var temps= document.getElementsByClassName("sp");
for(var i=0;i<temps.length;i++){
temps[i].style.color="orange";
temps[i].style.backgroundColor="grey";
temps[i].style.fontSize="40px";
}
//4.通过name 属性值来获取对象
//pps=document.getElementsByName("name属性值");返回一个集合【数组】
var pps=document.getElementsByName("pp");
debugger;
for(var i=0;i<pps.length;i++){
pps[i].style.color="green";
pps[i].style.display="block";
pps[i].style.border="1px solid blue";
}
//Html5 中新提供方式
//只返回匹配到的第一个元素，返回的是一个对象
//document.querySelector("选择器");
var fli= document.querySelector("ol>li");
fli.style.color="blue";
//返回所有匹配的元素，返回值都是集合【数组】
//document.querySelectorAll("选择器")
var olis=document.querySelectorAll("span");
debugger;
for(var i=0;i<olis.length;i++){
olis[i].style.color="red";
olis[i].style.fontSize="50px";
}
</script>
</html>
三、绑定事件
3.1 常用鼠标事件
3.1.1 onmousedown。鼠标按键被按下。
3.1.2 onmouseup。鼠标按键被松开。
3.1.3 onmouseover。鼠标移动到某元素表面之上。
3.1.4 onmouseout。鼠标从某元素表面移开。
3.1.5 onmousemove。鼠标在某元素表面持续移动。
3.1.6 onclick。鼠标单击某元素。
3.1.7 ondblclick。鼠标双击某元素。
3.2 键盘事件。
3.2.1 onkeydown。键盘按键被按下。
3.2.2 onkeyup。键盘按键被松开。
3.2.3 onkeypress。键盘按键被按下松开。
四、通过javascript来绑定事件
当使用循环绑定事件时，this指代当前触发事件的元素对象
var lis= document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ debugger; lis[i].onclick=function(){ //注意：i 已经 大于 lis.length debugger; //lis[i].style.color="red";//错误的写法 if(this.style.color=="red"){ this.style.color="black"; } else{ this.style.color="red"; } }; }
实例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 50px;
height: 50px;
border: 1px solid red;
background-color: orange;
}
.orange{
color: orange;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="按钮添加事件" onclick="btnClick()" />
<div id="div1" onclick="btnClick()">div也可添加事件</div>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<ul id="u1">
<li class="orange">抽烟</li>
<li>喝酒</li>
<li>烫头</li>
</ul>
</body>
<script type="text/javascript">
function btnClick(){
alert("点击事件");
}
var lis= document.querySelectorAll("#u1>li");
for(var i=0;i<lis.length;i++){
//:hover
// //鼠标 悬停
// lis[i].onmouseover=function(){
// this.className="orange";
// };
// //鼠标 移出
// lis[i].onmouseout=function(){
// this.className="";
// };
lis[i].onmouseover=function(){
var temp=document.querySelector("#u1>.orange");
temp.className="";
this.className="orange";
};
}
</script>
</html>
实例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="div1">
操作内容
</div>
<input type="button" id="btn1" value="修改内容" />
<br>
<ul>
<li>西瓜</li>
<li>葡萄</li>
</ul>
<input type="button" id="btn2" value="添加到 西瓜前" />
<input type="button" id="btn3" value="添加到 葡萄后" />
</body>
<script type="text/javascript">
var btn=document.getElementById("btn1");
btn.onclick=function(){
var dd=document.getElementById("div1");
//标签内部的内容
dd.innerHTML="修改了内容";
//追加内容：
dd.innerHTML+="追加的内容";
//追加含有HTML标签的内容
dd.innerHTML+="<br><span>这是追加的span 标签</span>";
};
var no=0;
var btn2 =document.getElementById("btn2");
btn2.onclick=function(){
var li= document.createElement("li");
li.innerHTML="新增的li"+no;
no++;
li.style.color="green";
var ul= document.querySelector("ul");
//找到要插入位置的 标签对象
var oli=document.querySelector("ul>li")
//将元素插入到 指定位置
ul.insertBefore(li,oli);
};
var btn3 =document.getElementById("btn3");
btn3.onclick=function(){
// var ul= document.querySelector("ul");
// ul.innerHTML+="<li>香蕉</li>";
//创建标签对象
var t= document.createElement("li");
//对对象的操作
t.innerHTML="水蜜桃";
t.style.color="red";
t.style.backgroundColor="darkorchid";
var ul=document.querySelector("ul");
//把创建的对象 ，添加到父级元素的末尾
ul.appendChild(t);
};
</script>
</html>
五、练习
1.如下图，点击下面的小图，则上面的显示框会显示你点击的图片。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#container{
width: 700px;
height: 600px;
text-align: center;
margin: 0 auto;
}
ul{
list-style: none;
}
ul>li{
float: left;
width: 100px;
height:80px ;
margin-left: 40px;
}
ul img{
width: 100px;
height:80px;
}
</style>
</head>
<body>
<div id="container">
<div><img src="img/Desert.jpg" width="500" height="400" id="img1"/></div>
<ul>
<li><img src="img/Desert.jpg"/></li>
<li><img src="img/Hydrangeas.jpg"/></li>
<li><img src="img/Jellyfish.jpg"/></li>
<li><img src="img/Koala.jpg"/></li>
<li><img src="img/Lighthouse.jpg"/></li>
</ul>
</div>
</body>
<script type="text/javascript">
var imgs= document.querySelectorAll("ul img");
// 获取img标签对象，返回一个集合
for(var i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
var src=this.src;
var obj=document.getElementById("img1");
// 改变图片的地址路径
obj.src=src;
};
}
</script>
</html>
2.输入字符串，点击加密按钮，会出现乱码，再点击解码，则会显示你输入的字符。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1,#div2{
width: 300px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="text" id="input1">
<input type="button" name="btn1" id="btn1" value="加密" />
<div id="div1">
</div>
<input type="button" name="btn1" id="btn2" value="解密" />
<div id="div2">
</div>
</body>
<script type="text/javascript">
/*1. 获取btn1 的对象
*2. 绑定事件
*3.获取 input1 的值
* 4.遍历获取每一位上字符的编码，并加上10+i;
* 5.转换成新的字符串
* 6.显示在 div1中
*
* */
var btn =document.getElementById("btn1");
btn.onclick=function(){
var str= document.getElementById("input1").value;
var str2="";
for(var i=0;i<str.length;i++){
var code=str.charCodeAt(i)+20+i*i;
var s=String.fromCharCode(code);
str2+=s;
}
var dd = document.getElementById("div1");
dd.innerHTML=str2;
};
//思考题：
//1.解密
var btn2 =document.getElementById("btn2");
btn2.onclick=function(){
var str= document.getElementById("div1").innerHTML;
debugger;
var str2="";
for(var i=0;i<str.length;i++){
//var code=str.charCodeAt(i)+20+i*i;
//var s=String.fromCharCode(code);
//str2+=s;
var code = str.charCodeAt(i)-20-(i*i);
var s=String.fromCharCode(code);
str2+=s;
}
var dd = document.getElementById("div2");
dd.innerHTML=str2;
};
</script>
</html>
3.点击按钮，自动生成10个li；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul>li{
border: 1px solid black;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
float: left;
margin: 5px;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<input type="button" value="自动生成10li" id="btn1"/>
<ul id="u1"></ul>
</body>
<script type="text/javascript">
// 获取按钮对象
var btn =document.getElementById("btn1");
// 对按钮设置点击事件
btn.onclick=function(){
// 获取列表对象
var ul=document.getElementById("u1");
// 当显示了10个li，就不再显示
ul.innerHTML="";
for(var i=0;i<10;i++){
// 创建li标签
var li=document.createElement("li");
// 输入数字
li.innerHTML=i;
if(i%4==0){
li.className="red";
}else if(i%4==1){
li.className="yellow";
}else if(i%4==2){
li.className="blue";
}else {
li.className="green";
}
// 插入li标签
ul.appendChild(li);
}
};
</script>
</html>
4.点击按钮，生成v字形。
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
position: relative;
}
#div1>div{
/*position: absolute;
width: ;*/
text-align: center;
line-height: 50px;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="自动显示v字形" />
<div id="div1"></div>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn1");
btn.onclick=function(){
var dd = document.getElementById("div1");
for(var i=0;i<5;i++){
// 创建div标签
var obj=document.createElement("div");
// 设置绝对定位
obj.style.position="absolute";
obj.style.width="50px";
obj.style.height="50px";
obj.style.backgroundColor="red";
obj.style.color="white";
obj.style.left=(i*50)+"px";
if(i<=2){
obj.style.top=(i*50)+"px";
}
else{
obj.style.top=((4-i)*50)+"px"
}
obj.innerHTML=i;
dd.appendChild(obj);
}
};
</script>
</html>
5.当点击一段文字时，背景会变成绿色，再次点击时，背景会变成白色。
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>sadfafiewqjjflasdissdgfaf我撒打发斯蒂芬</li>
<li>大家来看决胜巅峰表卡了事发后为爱发声课件擦拭的</li>
<li>爱上了的机房里看书的浪费你老师傅阿斯顿发顺丰我和符合</li>
<li>阿道夫洒散发发的说法是的发放</li>
<li>沙发大事发生的发生发生法师打发发生 碍事法师打发撒旦法</li>
<li>阿打发斯蒂芬大沙发沙发上发大水发的说法十点多发的是</li>
</ul>
</body>
<script type="text/javascript">
var lis= document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
// 如果背景颜色为绿色，点击会变成白色
if(this.style.backgroundColor=="green"){
this.style.backgroundColor="white";
}else{
this.style.backgroundColor="green";
}
};
}
</script>
</html>
6.当鼠标放到字体表面时，背景会变色。
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>你哈你哈你哈你哈你哈你哈你哈你哈你哈你哈你哈</li>
<li>大家好才是真的好大家好才是真的好大家好才是真的好大家好才是真的好</li>
<li>热热热热热热热热热热热热热热热热热热</li>
<li>热热热热热热热热热热热热热热热热热热</li>
<li>热热热热热热热热热热热热热热热热热热 碍事法师打发撒旦法</li>
<li>阿打发斯蒂芬热热热热热热热热热热热热热热热热热热大沙的是</li>
</ul>
</body>
<script type="text/javascript">
var lis= document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
// 鼠标事件
lis[i].onmouseover=function(){
this.style.backgroundColor="gray";
};
lis[i].onmouseout=function(){
this.style.backgroundColor="";
};
}
</script>
</html>
7.点击按钮，会出现效果
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-weight: bold;
font-size: 22px;
}
#div1{
// 设置隐藏
display: none;
width: 400px;
height: 400px;
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="显示" />
<input type="button" id="btn2" value="隐藏" />
<span>我也是可以显示的......</span>
<div id="div1"></div>
</body>
<script type="text/javascript">
function showdiv(){
var div=document.getElementById("div1");
// 设置显示
div.style.display="block";
}
var bt1= document.getElementById("btn1");
bt1.onclick=showdiv;
var bt2= document.getElementById("btn2");
bt2.onclick=function(){
var div=document.getElementById("div1");
div.style.display="none";
};
var sp= document.querySelector("span");
sp.onclick=showdiv;
</script>
</html>
8.点击按钮，字体颜色和背景会发生改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-size: 16px;
border:2px solid black;
}
.red_yellow{
color: red;
background-color: yellow;
}
.yellow_red{
color: yellow;
background-color: red;
}
</style>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="红" />
<input type="button" name="btn1" id="btn2" value="黄" />
<p id="p1">千龙网 据美国全国广播公司(NBC)报道， 8月4日，黎巴嫩首都贝鲁特突发爆炸，已造成70余人死亡，近4000人受伤。爆炸引发强烈冲击波，几公里外建筑也被波及。俄罗斯卫星网报道称，爆炸原因目前尚不清楚，但以色列及黎巴嫩真主党均否认与事件有关。根据黎巴嫩媒体的资料显示，存储烟火的一个仓库发生火灾可能是爆炸的原因。黎巴嫩总理哈桑·迪亚卜(Hassan Diab)此前称，有一批重达2750吨的硝酸铵堆放在港口仓库中6年，并未采取有效预防措施。</p>
</body>
<script type="text/javascript">
var bt1=document.getElementById("btn1");
bt1.onclick=function(){
var p1=document.getElementById("p1");
p1.className="red_yellow";
};
var bt2=document.getElementById("btn2");
bt2.onclick=function(){
var p1=document.getElementById("p1");
p1.className="yellow_red";
};
</script>
</html>