DOM （文档对象模型），简单来说就是当网页被加载时，浏览器会为整个网页创建一个对象document
1、查找元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
</head>
<body>
<p id="p1">第一个段落标签</p>
<p id="p2">第二个段落标签</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
console.log(p1);
</script>
</body>
</html>
网页输出：
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
window.onload = function() {
var p1 = document.getElementById("p2");
console.log(p1);
}
</script>
</head>
<body>
<p id="p1">第一个段落标签</p>
<p id="p2">第二个段落标签</p>
</body>
</html>
2、查找多个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
window.onload = function() {
var p1 = document.getElementsByClassName("p1");
console.log("数组长度为:"+p1.length);
for(var i=0;i<p1.length;i++)
{
console.log("分割线-----------");
console.log(p1[i]);
}
}
</script>
</head>
<body>
<p class="p1">第一个段落标签</p>
<p class="p1">第二个段落标签</p>
</body>
</html>
网页显示：
image.png
3、操作css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<style type="text/css">
#p1{
width: 100px;
height: 100px;
border: dashed red ;
}
</style>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
window.onload = function() {
var p2=document.getElementById("p2");
//注意css属性要全部用双引号引起来
p2.style.width="200px";
p2.style.height="100px";
p2.style.border="dotted blue"
}
</script>
</head>
<body>
<p id="p1">第一个段落标签</p>
<p id="p2">第二个段落标签</p>
</body>
</html>
网页显示：
image.png
4、innerHTML、innerText
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<style type="text/css">
#p1{
width: 100px;
height: 100px;
border: dashed red ;
}
</style>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
window.onload = function() {
var p1=document.getElementById("p1");
console.log(p1.innerText);
console.log(p1.innerHTML);
}
</script>
</head>
<body>
<p id="p1">
第一个段落标签
<font color="antiquewhite">
颜色变啦
<a href="http://www.baidu.com">跳转</a>
</font>
</p>
</body>
</html>
网页显示：
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<style type="text/css">
#p1{
width: 100px;
height: 100px;
border: dashed red ;
}
</style>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
window.onload = function() {
var p1=document.getElementById("p1");
p1.innerHTML="<font color='antiquewhite'>颜色变啦 <a href='http://www.baidu.com'>跳转</a></font>"
console.log(p1);
}
</script>
</head>
<body>
<p id="p1">
</p>
</body>
</html>
网页显示：
image.png
5、设置属性、获取属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<style type="text/css">
#p1{
width: 100px;
height: 100px;
border: dashed red ;
}
</style>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
window.onload = function() {
var p1=document.getElementById("input1");
console.log(p1.type);
console.log(p1.value);
}
</script>
</head>
<body>
<input id="input1" type="button" value="点击" />
</body>
</html>
网页显示：
image.png
如果这个属性是我们自己定义的就不能这么用了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<style type="text/css">
#p1{
width: 100px;
height: 100px;
border: dashed red ;
}
</style>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
window.onload = function() {
var p1=document.getElementById("input1");
console.log(p1.type);
console.log(p1.getAttribute("city"));
//也可以设置属性
p1.setAttribute("city","上海");
p1.setAttribute("address","市中心");
}
</script>
</head>
<body>
<input id="input1" type="button" value="点击" city="北京"/>
</body>
</html>
网页显示：
image.png
html中的属性也可以被修改
image.png
6、文本事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
function onfocusFn()
{
console.log("元素获取到焦点了")
}
function onblurFn()
{
console.log("元素失去焦点了")
}
</script>
</head>
<body>
用户名：<input id="username" type="text" placeholder="请输入用户名" onfocus="onfocusFn()" onblur="onblurFn()"/>
</body>
</html>
网页显示：
image.png
7、form表单 submit一点问题
看下这段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
function checkValue()
{
var username=document.getElementById("username");
console.log(username.value);
if(username.value=="zhangsan")
{
console.log("输入不合法");
alert("输入不合法");
return false;
}
else{
return true;
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<form action="" method="get" onsubmit="return checkValue()">
用户名：<input id="username" name="username" type="text" placeholder="请输入用户名"/></br>
<input type="submit" value="注册"/>
</form>
</body>
</html>
注意下form标签的onsubmit属性
onsubmit="return checkValue()"
在submit提交时，如果onsubmit属性的值是"return true"则会提交，如果onsubmit属性的值是"return false",则不会提交
例如上面的代码中我们需要在提交前检验输入的合法性，如果用户名是"zhangsan"就不让提交
网页显示：
image.png
8、下拉列表 onchange事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
function onchangeFn()
{
var tag=document.getElementById("city");
console.log(tag.value);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<select id="city" onchange="onchangeFn()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
</body>
</html>
网页显示：
image.png
还有一种简单写法：我们可以直接把当前元素作为参数传递给方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript">
function onchangeFn(obj)
{
console.log(obj.value);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<select id="city" onchange="onchangeFn(this)">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select>
</body>
</html>
网友评论