概述
获取标签、获取属性、获取内容
样式
事件
概述
官方：Document Object Model（文档对象模型），包含着将HTML当做对象操作的所有思路，把所有HTML当做节点操作。
个人：在事件里面，操作着属性、标签、内容。
标签：id/class/name/标签选择器
内容：childNodes/nodeName/nodeValue
属性：attributes/nodeName/nodeValue
获取标签（1，2，3，4）获取属性（5）获取内容（6）
1、获取标签：通过id选择器获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取标签</title>
</head>
<body>
<div id="d1">DOM</div>
<script type="text/javascript">
var div1 = document.getElementById("d1");
document.write(div1)
</script>
</body>
</html>
2、获取标签：通过标签选择器获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取标签</title>
</head>
<body>
<div id="d1">DOM</div>
<script type="text/javascript">
var div1 = document.getElementsByTagName("div");
document.write(div1);
</script>
</body>
</html>
3、获取标签：通过class选择器获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取标签</title>
</head>
<body>
<div class="d">DOM</div>
<script type="text/javascript">
var div1 = document.getElementsByClassName("d");
document.write(div1);
</script>
</body>
</html>
4、获取标签：通过name获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取标签</title>
</head>
<body>
<div class="d">DOM</div>
<input name="userName">
<script type="text/javascript">
var div1 = document.getElementsByName("userName");
document.write(div1);
</script>
</body>
</html>
5、获取属性：通过attributes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取属性</title>
</head>
<body>
<div id="d1" align="center">DOM</div>
<script type="text/javascript">
//获取标签
var div1 = document.getElementById("d1");
//获取所有属性
var as=div1.attributes;
//获取所有属性名和属性值
for(i=0;i<as.length;i++){
document.write("属性名"+as[i].nodeName+"</br>")
document.write("属性值"+as[i].nodeValue)
}
</script>
</body>
</html>
6、获取内容：通过childNodes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取内容</title>
</head>
<body>
<div id="d1" align="center">DOM</div>
<script type="text/javascript">
//获取标签
var div1 = document.getElementById("d1");
//获取所有内容
var as=div1.childNodes[0];
//获取所有内容名和内容值
document.write("内容名"+as.nodeName+"</br>")
document.write("内容值"+as.nodeValue)
</script>
</body>
</html>
7、获取内容：通过innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取标签</title>
</head>
<body>
<div id="d1" align="center">DOM</div>
<script type="text/javascript">
//获取标签
var div1 = document.getElementById("d1");
//获取内容值
var as=div1.innerHTML;
//打印内容值
document.write("内容值:"+as)
</script>
</body>
</html>
样式
1、显示隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取标签</title>
</head>
<body>
<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button>
<div id="d">DIV</div>
<script type="text/javascript">
function hide(){
var d = document.getElementById("d");
d.style.display="none";
}
function show(){
var d = document.getElementById("d");
d.style.display="block";
}
</script>
</body>
</html>
2、改背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取标签</title>
</head>
<body>
<button onclick="change()">改变背景色</button>
<div id="d" style="background-color:pink">Hello HTML DOM</div>
<script type="text/javascript">
function change(){
var d=document.getElementById("d");
d.style.backgroundColor="green";
}
</script>
</body>
</html>
事件
1、焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" onfocus="of()" onblur="ob()" id="o">
<div id="message"></div>
<script type="text/javascript">
function of(){
document.getElementById("message").innerHTML="获取焦点"
}
function ob(){
document.getElementById("message").childNodes[0].nodeValue="失去焦点";
}
</script>
</body>
</html>
2、鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onmousedown="down()" onmouseup="up()" value="用于演示按下和弹起" >
<input type="button" onmousemove="move()" value="用于演示鼠标经过" >
<input type="button" onmouseover="over()" value="用于演示鼠标进入" >
<input type="button" onmouseout="out()" value="用于演示鼠标退出" >
<div id="message"></div>
<script type="text/javascript">
var number = 0;
function down(){
document.getElementById("message").innerHTML="按下了鼠标";
}
function up(){
document.getElementById("message").childNodes[0].nodeValue="弹起了鼠标";
}
function move(){
document.getElementById("message").innerHTML="鼠标经过次数:"+(++number);
}
function over(){
document.getElementById("message").innerHTML="鼠标进入次数:"+(++number);
}
function out(){
document.getElementById("message").innerHTML="鼠标退出";
number = 0;
}
</script>
</body>
</html>
3、点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="singleClick()" ondblclick="doubleClick()" value="用于演示单击和双击" >
<div id="message"></div>
<script type="text/javascript">
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
function doubleClick(){
document.getElementById("message").innerHTML="双击按钮";
}
</script>
</body>
</html>
4、提交事件
<form action="/study/login.jsp" onsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
alert("提交表单");
}
</script>
5、加载事件
<script>
function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
}
function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
}
</script>
<body onload="loadBody()">
<div id="message1"></div>
<div id="message2"></div>
</body>
<img onload="loadImg()" src="https://how2j.cn/example.gif"/>
网友评论