一、DOM初识
1、DOM—文档对象模型 操作页面元素的
2、DOM又被称为文档树模型
(1)文档:把一个html页面文件可以看成一个文档,由于万物皆对象,所以可以把这个文档看成一个对象。
(2)文档中的所有的标签都可以看成是一个对象
(3)页面中的每个标签都是一个元素(element),每个元素都可以看成是一个对象。
(4)标签中可以嵌套标签,标签中有标签,元素中有元素
(5)一个html页面都有一个根标签—》html---->根元素,里面有很多个标签(元素)—》很多个对象
============》》标签可以叫元素,一个元素就是一个对象,一个标签就是一个对象
(6)元素(element):页面中的所有的标签都是元素,元素可以看成对象。
(7)节点(node):页面中所有的内容都是节点。内容:标签、属性、文本 -----》范围大
3、DOM文档树模型
> (一)获取页面元素(标签、对象) 方法:
getElementById(id值);-------》一个对象
getElementsByTagName(标签的名字);-----》一个伪数组,for 循环
getElementsByName(name属性的值);------》一个伪数组
getElementsByClassName(类样式的名字);-----》一个伪数组(二)操作的标签的属性:
阻止超链接跳转:return false;
(三)事件:
1:点击事件 onClick
2:鼠标进入和离开事件 onMouseOver onMouseOut
3:获取焦点事件和失去焦点事件 onFocus onblur
(四)设置成对标签的内容:
(1)innerText
(2)textContent
(3)innerHtml
设置、获取、区别
(五)自定义属性:
获取自定义属性值:getAttribute(自定义属性的名字);
设置自定义属性和值:setAttribute(属性的名字,值);
移除自定义属性:removeAttribute(属性的名字);
1、凡是成对的标签,中间的文本内容,设置的时候都是使用innerText属性;
<script>
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
var pObj = document.getElementById("p1");
pObj.innerText = "我是一个p";
};
</script>
2、getElementsByTagName(“标签的名字”);--------->返回的是一个伪数组;要用到循环遍历。
当数组中只有一个元素时:
<script>
document.getElementById("btn").onclick = function () {
var imObjs = document.getElementsByTagName("img");
imObjs[0].alt="柳岩";
imObjs[0].title = "现身吧";
};
</script>
3、在某个元素的事件中,自己的事件中的this就是当前的这个对象
<script>
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
this.value = "我是按钮";
this.type = "text";
this.id = "btn2";
};
</script>
4、排他功能
<body>
<input type="button" value="哈哈">
<input type="button" value="哈哈">
<input type="button" value="哈哈">
<input type="button" value="哈哈">
<input type="button" value="哈哈">
<input type="button" value="哈哈">
<script>
var inputs = document.getElementsByTagName("input");
for (var i = 0 ; i < inputs.length;i++){
inputs[i].onclick = function () {
//先把所有的都是 哈哈
for (var i = 0 ; i < inputs.length ; i++){
inputs[i].value = "哈哈";
}
//点击的变成 嘿嘿
this.value="嘿嘿";
};
}
</script>
</body>
5、在表单标签中,如果属性和值只有一个,并且值是这个属性的本身。那么,在写js代码的时候,这个属性值写布尔类型的。
<input type="button" value="修改性别" id="btn1">
<input type="radio" value="1" name="sex" checked="checked"> 男
<input type="radio" value="2" name="sex" id="women"> 女
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn1").onclick = function () {
my$("women").checked = true;
};
</script>
6、点击按钮设置div的高度和背景颜色
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
my$("dv").style.width="300px";
my$("dv").style.height="300px";
my$("dv").style.backgroundColor = "pink";
};
</script>
7、点击按钮设置div隐藏
CSS中隐藏:
(1)display:none display:block
(2)visibility: hidden visible
(3)overflow:hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<input type="button" value="显示" id="btn2">
<div id="dv" ></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
my$("dv").style.display = "none";
};
my$("btn2").onclick = function () {
my$("dv").style.display = "block";
};
</script>
</body>
</html>
8、一个按钮控制div显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
if (this.value =="隐藏"){
my$("dv").style.display = "none";
this.value="显示";
}else if (this.value =="显示"){
my$("dv").style.display = "block";
this.value = "隐藏";
}
};
</script>
</body>
</html>
9、一个按钮控制div的显示隐藏
在js代码中DOM操作的时候,设置元素的类样式使用className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.cls {
display: none;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
//点击按钮,通过类样式来控制div的显示和隐藏
my$("btn").onclick = function () {
//判读div是否应用了类样式
if (my$("dv").className != "cls"){
//隐藏
my$("dv").className="cls";
this.value ="显示";
}else{
//显示
my$("dv").className = "";
this.value="隐藏";
}
};
</script>
</body>
</html>
10、一键换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cls {
background-color: pink;
}
</style>
</head>
<body>
<input type="button" value="换肤" id="btn">
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
document.body.className = document.body.className != "cls"?"cls":"";
};
</script>
</body>
</html>
11、点击按钮禁用文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
<input type="text" value="文本框" id="txt">
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
my$("txt").disabled = true;//禁用
};
</script>
</body>
</html>
12、阻止超链接跳转
return false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- //阻止超链接的跳转:return false;-->
<a href="http://www.baidu.com" onclick="alert('哈哈,我被点击了');return false">百度</a>
<a href="http://www.baidu.com" id="ak">百度</a>
<script src="common.js"></script>
<script>
my$("ak").onclick = function () {
alert("很爱很爱你");
return false;
};
</script>
</body>
</html>
13、案例美女相册
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline-block;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>
美女画廊
</h2>
<ul id="imagegallery">
<li>
<a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100" alt="美女1"/>
</a>
</li>
<li><a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100" alt="美女2"/>
</a></li>
<li><a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100" alt="美女3"/>
</a></li>
<li><a href="images/4.jpg" title="美女D">