JavaScript之DOM初识
Posted HzdWwZz"LJF
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之DOM初识相关的知识，希望对你有一定的参考价值。
javascript分三个部分:
ECMAScript标准:JS的基本的语法
DOM:Document Object Model --->文档对象模型----操作页面的元素
BOM:Browser Object Model----->浏览器对象模型---操作的是浏览器DOM: 文档对象模型
文档:把一个html文件看成是一个文档,由于万物皆对象,所以把这个文档看成是一个对象
XML文件也可以看成是一个文档
HTML:展示信息,展示数据的
XML:侧重于存储数据
html文件看成是一个文档,那么这个文档看成是一个对象,文档中的所有的标签都可以看成是一个对象
页面中的每个标签,都是一个元素(element),每个元素都可以看成是一个对象
标签可以嵌套,标签中有标签,元素中有元素
html页面中都有一个根标签--html--也叫根元素
页面中的有一个根元素(标签--html),里面有很多的元素(有很多的标签,有很多的对象)
文档:一个页面就是一个文档
元素(element):页面中的所有的标签都是元素,元素可以看成是对象
节点(node):页面中所有的内容都是节点:标签,属性,文本
root:根
页面就是文档--document,文档中有根元素:html
由文档及文档中的所有的元素(标签)组成的一个树形结构图,叫树状图(DOM树)几个案例：
点击按钮弹窗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<script>
document.getElementById("btn").onclick=function () {
alert("弹窗了！");
};
//点击操作:------>事件:就是一件事,有触发和响应,事件源
//按钮被点击,弹出对话框
//按钮---->事件源
//点击---->事件名字
//被点了--->触发了
//弹框了--->响应
</script>
</body>
</html>先写函数再调用也可以:
<script>
function f1() {
alert("Hello");
}
var btnObj=document.getElementById("btn").onclick=f1;//不加括号
</script>注意：先有按钮,才能获取,获取之后才能注册事件
点击按钮显示图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<img src="" id="image" />
<script>
var btn1=document.getElementById("btn");
btn1.onclick=function () {
var img1=document.getElementById("image");
img1.src="images/xxx.jpg";//这是图片的路径
img1.width="300";
img1.height="400";//不用加px
};//记得加分号
</script>
</body>
</html>点击按钮修改内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="点击修改内容" />
<p id="p1">
还没修改的文本
</p>
<script>
//凡是成对的标签,中间的文本内容,设置的时候,都使用innerText这个属性的方式
document.getElementById("btn").onclick = function () {
document.getElementById("p1").innerText = "点击按钮后就修改了内容了";
};
</script>
</body>
</html>点击按钮修改多个p标签的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value="点击修改内容"/>
<div id="div1">
<p>还没修改的文本</p>
<p>还没修改的文本</p>
<p>还没修改的文本</p>
<p>还没修改的文本</p>
<p>还没修改的文本</p>
</div>
<div id="div2">
<p>还没修改的文本2</p>
<p>还没修改的文本2</p>
<p>还没修改的文本2</p>
<p>还没修改的文本2</p>
<p>还没修改的文本2</p>
</div>
<script>
//只修改div1的内容
// document.getElementById("btn").onclick = function () {
// var pObjs = document.getElementById("div1").getElementsByTagName("p");
// for (var i = 0; i < pObjs.length; i++) {
// pObjs[i].innerText = "修改了";
// }
// };
//修改全部p标签的内容
document.getElementById("btn").onclick = function () {
var pArr = document.getElementsByTagName("p");
for (var i = 0; i < pArr.length; i++) {
pArr[i].innerText = "全部修改了";
}
};
</script>
</body>
</html>点击按钮修改文本框的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="修改内容" id="btn"/></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<input type="text" value=""></br>
<script>
document.getElementById("btn").onclick = function () {
var inputS = document.getElementsByTagName("input");
for (var i = 0; i < inputS.length; i++) {
if (inputS[i].type != "button") {
inputS[i].value = "哈哈，修改了";
}//end if
}//end for
};
</script>
</body>
</html>点击按钮变成文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="修改内容" id="btn"/></br>
<script>
//在某个元素的事件中,自己的事件中的this就是当前的这个元素对象
var btnObj=document.getElementById("btn");
btnObj.onclick=function () {
this.value="按钮变成了文本框了";
this.type="text";
};
</script>
</body>
</html>点击图片，修改自身的宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<img src="images/xxx.jpg" id="im"/>
<script>
//点击图片,修改自身的宽和高
var imgObj = document.getElementById("im");
imgObj.onclick = function () {
this.width = "200";
this.height = "300";
};
</script>
</body>
</html>排他功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="没变化"/></br>
<input type="button" value="没变化"/></br>
<input type="button" value="没变化"/></br>
<input type="button" value="没变化"/></br>
<input type="button" value="没变化"/></br>
<script>
//获取所有的按钮,分别注册点击事件
var btnObjs = document.getElementsByTagName("input");
for (var i = 0; i < btnObjs.length; i++) {
btnObjs[i].onclick = function () {
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "没变化";
}
this.value = "变化了";
};
}
</script>
</body>
</html>点击超链接切换大图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<a id="ak" href="images/1.jpg"><img src="images/1-small.jpg" id="im"></a>
<script>
//点击图片标签,设置图片标签的src路径为超链接中大图的路径
document.getElementById("im").onclick=function () {
this.src=document.getElementById("ak").href;
return false;
};
</script>
</body>
</html>点击按钮修改图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="显示大图" id="btn"/>
<img src="images/1-small.jpg" id="im">
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick=function () {
my$("im").src="images/1.jpg";
};
</script>
</body>
</html>点击按钮改变div的背景颜色、宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="修改div" id="btn" />
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function () {
var dvobj=document.getElementById("dv");
dvobj.style.height="300px";
dvobj.style.width="200px";
dvobj.style.backgroundColor="yellowgreen";
};
</script>
</body>
</html>点击按钮设置div隐藏和显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv{
width: 300px;
height: 200px;
background-color: #cccccc;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn" />
<input type="button" value="显示" id="btn2" />
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function () {
document.getElementById("dv").style.display="none";
};
document.getElementById("btn2").onclick=function () {
document.getElementById("dv").style.display="block";
};
</script>
</body>
</html>一个按钮实现上面的需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv {
width: 300px;
height: 200px;
background-color: #cccccc;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").onclick = function () {
//判断当前点击的按钮的value属性值
if (this.value == "隐藏") {
document.getElementById("dv").style.display = "none";
this.value = "显示";
} else if (this.value == "显示") {
document.getElementById("dv").style.display = "block";
this.value = "隐藏";
}
};
</script>
</body>
</html>点击按钮,通过类样式的方式设置div的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv {
width: 300px;
height: 200px;
background-color: #cccccc;
}
.none {
display: none;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").onclick = function () {
var dvobj = document.getElementById("dv");
//判断的是div是否应用了类样式
if (dvobj.className != "none") {
dvobj.className = "none";
this.value = "显示";
} else {
dvobj.className = "";
this.value = "隐藏";
}
};
</script>
</body>
</html>网页开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.black {
background-color: black;
}
</style>
</head>
<body>
<input type="button" value="开/关灯" id="btn"/>
<script>
document.getElementById("btn").onclick=function () {
document.body.className = document.body.className != "black" ? "black" : "";
}
</script>
</body>
</html>以上是关于JavaScript之DOM初识的主要内容，如果未能解决你的问题，请参考以下文章