版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
(1)dom概述
(2)常见dom对象
window对象，location对象，History对象
(3)图片轮播练习
(4)定时弹出广告练习
(5)节点
(6)表单校验练习(节点)
(7)隔行换色练习
(8)复选框练习(节点全选全不选)
(9)节点操作
创建节点，新增节点，删除节点，替换节点
(10)与下拉框有关的两个对象select/option
省市二级联动
(1)dom概述
文档对象模型（Document Object Model，简称DOM）:是Js操作HTML文档的一种技术，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
- dom将html标签对象化，将网页中的每一个元素都看作一个对象。
- 利用dom可以直接访问所有的html对象，连同他们的文本和属性，可以对其中的内容进行修改和删除，也可以创建新的元素。
dom作用：参与制作动态网页(其他前端技术还有vue，ng)。dom能够在所有的浏览器上提供一种一致的方法通过代码访问html的结构和内容。
dom参与制作网页动态的过程： 在浏览器加载页面时，浏览器会解析html页面并创建包含html标签所有元素的文档的内部模型，自上而下依次来解析，当遇到Js时浏览器会使用dom来检查其语法，然后执行。使用dom来检查页面，完成修改，从页面接收一些事件或者是要求浏览器从外部服务器获取一些其他的数据，当Js修改了dom时，浏览器就会随着修改dom而动态的更新页面，这样dom就参与了页面的动态制作。
(2)常见dom对象
- window对象
- loaction对象
- History对象
<html>
<head>
<title>dom编程</title>
<mate charset="utf-8" />
<script>
window.onload = function load() {
//window对象
// window.alert("Pop-up box");
// window.confirm("Confirmation box");
// window.prompt("input box(确认框):");
// indow.setInterval("method1()", 1000);
window.setTimeout("method1()", 1000);
}
function method1() {
location.href = "http://www.baidu.com";
location.reload();
// alert("Period周期");
}
</script>
</head>
<body onload="load()">
<a href="Testdom1.html">跳转</a>
<input type="button" value="回退" onclick="window.history.back()" />
<input type="button" value="前进" onclick="window.history.forward()" />
</body>
</html>
(3)练习:图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script>
window.onload = function () {
window.setInterval("rotate()", 2000);
}
var i = 1;
function rotate() {
i++;
if (i > 3) {
i = 1;
}
var img = document.getElementById("轮播图1");
img.src = "image/轮播图" + i + ".jpg";
}
</script>
</head>
<body>
<img id="轮播图1" src="image/轮播图1.jpg" />
</body>
</html>
(4)练习:定时弹出广告...
- css的显示和隐藏的属性display
block:显示元素
none:隐藏元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告定时弹出/隐藏</title>
<script>
var time;
window.onload = function () {
time = window.setTimeout("show()", 2000);
}
//显示图片
function show() {
//获得图片元素对象
var img = document.getElementById("img1");
//设置css_style的display属性
img.style.display = "block";
//显示以后,立即清除时间定时,重新计时
window.clearTimeout(time);
//调用消失函数
time = window.setTimeout("hide()", 2000);
}
//隐藏图片
function hide() {
//找到对象
var img = document.getElementById("img1");
//设置css_style的display属性
img.style.display = "none";
//令隐藏的定时器失效
window.clearTimeout(time);
//两秒钟之后再次唤醒show函数
time = window.setTimeout("show()", 2000);
}
</script>
</head>
<body>
<img id="img1" src="image/上级_自来也.jpg" />
</body>
</html>
(5)节点
- 文档本身是文档节点
- 所有HTML元素是元素节点
- 所有HTML属性是属性节点
- HTML元素内的文本是文本节点
- 注释是注释节点
①获取元素节点:
<html>
<head>
<title>dom编程</title>
<mate charset="utf-8" />
<script>
//初始化加载会执行onload
window.onload = function load() {
//1.通过ID获得节点
var spans1 = document.getElementById("span1");
console.info(spans1);
//2.通过标签名获得节点
var spans2 = document.getElementsByTagName("span");
console.info(spans2.length);
for (var i = 0; i < spans2.length; i++) {
console.info(spans2[i]);
}
//3.通过name属性值获得
var spans3 = document.getElementsByName("sp");
console.info(spans3.length);
}
function method1() {
location.reload();
}
</script>
</head>
<body>
<span id="span1" name="sp">span1</span>
<span id="span2" name="sp">span2</span>
<span id="span3" name="sp">span3</span>
</body>
</html>
②节点的属性:
dom规定各种节点的type:
- 元素节点类型是1
- 属性节点是2
- 文本节点是3
- 注释节点是8
- 文档节点是9
<html>
<head>
<title>dom编程</title>
<mate charset="utf-8" />
<script>
//初始化加载会执行onload
window.onload = function load() {
//1.通过ID获得节点
var spans1 = document.getElementById("span1");
console.info(spans1);
//2.通过标签名获得节点
var spans2 = document.getElementsByTagName("span");
console.info(spans2.length);
for (var i = 0; i < spans2.length; i++) {
console.info(spans2[i]);
}
//3.通过name属性值获得
var spans3 = document.getElementsByName("sp");
// console.info(spans3.length);
//----获得span3标签中的文本信息.
console.info(span3.innerText);
//----获取span3标签中文本值和子标签
console.info(span3.innerHTML);
//----获取span3标签的节点名称/值/类型
console.info(span3.nodeName + " " + span3.nodeValue + " " + span3.nodeType);
//获得子节点
var div1 = document.getElementById("div1");
//----获得所有子节点,返回集合
var childs = div1.childNodes;
console.info(childs.length);//除了3个span标签还有4个换行
//----获得头尾节点
console.info(div1.firstChild);
console.info(div1.lastChild);
}
function method1() {
location.reload();
}
</script>
</head>
<body>
<div id="div1">
<span id="span1" name="sp"> span1</span>
<span id="span2" name="sp">span2</span>
<span id="span3" name="sp">span3</span>
</div>
</body>
</html>
(6)节点练习:表单校验
<!DOCTYPE html>
<html lang="en">
<head>
<title>css练习</title>
<meta charset="UTF-8">
<script type="text/javascript">
function checkForm() {
//获得用户名对象
var username = document.getElementById("username");
//---获得用户名输入框中的value值
var usernamevalue = username.value;
if (usernamevalue == "") {
//为span设置提示语
document.getElementById("usernameSpan").innerHTML = "<font color='red'> 用户名不能为空<font>";
}
//获得密码value
var password = document.getElementById("password").value;
if (password == "") {
document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空</font>";
}
}
</script>
</head>
<body>
<div style="height:600px;background-color: pink; ">
<div
style="border:5px solid gray; background-color: white; width:600px; position: absolute;left:350px;top:100px">
<form action="" methon="post" name="form" onsubmit="return checkForm()">
<table width="100%" cellspacing="15">
<!-- 文本框中readonly="readonly"只读 -->
<tr>
<td>用户名</td>
<td>
<input type="text" id="username" name="username" value="" /><span id="usernameSpan"></span>
</td>
</tr>
<!-- 密码框 -->
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" value="" />
<span id="passwordSpan"></span>
</td>
</tr>
<!-- 确认密码 -->
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword" value=""></td>
</tr>
<!-- 性别 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<!-- 邮箱 -->
<tr>
<td>邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<!-- 爱好 -->
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="sing" checked="checked" /> 唱歌
<input type="checkbox" name="hobby" value="dancing" /> 跳舞
<input type="checkbox" name="hobby" value="skiing" /> 滑雪
</td>
</tr>
<!-- 籍贯 -->
<tr>
<td>籍贯</td>
<td>
<select name="province" value="">
<option>-请选择-</option>
<option>-河南省-</option>
</select>
<select name="city" value="">
<option>-请选择-</option>
<option>-郑州市-</option>
<option>-新乡市-</option>
</select>
</td>
</tr>
<!-- 头像 -->
<tr>
<td>头像</td>
<td></td>
</tr>
<!-- 文本域简介 -->
<tr>
<td>简介</td>
<td>
<textarea name="info" id="" cols="5" rows="5"></textarea>
</td>
</tr>
<!-- 注册,重置,按钮 -->
<tr>
<td colspan="2">
<input type="button" value="注册" onclick="checkForm()" />
</td>
<!-- <input type="submit" value="提交">
<input type="reset" value="重置"> -->
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
(7)节点练习:隔行换色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function () {
//获得表格节点
var tab = document.getElementById("tab1");
//获得行
var l = tab.rows.length;
for (var i = 0; i < l; i++) {
if (i % 2 == 0) {
tab.rows[i].style.backgroundColor = "yellow";
} else {
tab.rows[i].style.backgroundColor = "pink";
}
}
}
</script>
</head>
<body>
<center>
<h1>Js实现隔行换色</h1>
</center>
<table id="tab1" border="1" align="center" width="700px" height="200px">
<tr style ="background-color: yellow">
<td>序号</td>
<td>学科</td>
<td>描述</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>Java</td>
<td>万物皆对象</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>php</td>
<td>php是最好的语言</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>Golang</td>
<td>Golang发展前景巨大</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
(8)节点练习:复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框练习</title>
<script>
window.onload = function () {
//获得表格节点
var tab = document.getElementById("tab1");
//获得行
var l = tab.rows.length;
for (var i = 0; i < l; i++) {
if (i % 2 == 0) {
tab.rows[i].style.backgroundColor = "yellow";
} else {
tab.rows[i].style.backgroundColor = "pink";
}
}
}
function checkAll() {
//获得表头行的复选 框
var selectAll = document.getElementById("selectAll");
//获得表格体中的所有复选框
var ids = document.getElementsByName("ids");
//判断总复选框是否被选中
if (selectAll.checked == true) {
//获得表格体集合,全选
for (var i = 0; i < ids.length; i++) {
ids[i].checked = true;
}
} else {
for (var i = 0; i < ids.length; i++) {
ids[i].checked = false;
}
}
}
</script>
</head>
<body>
<center>
<h1>Js实现隔行换色</h1>
</center>
<table id="tab1" border="1" align="center" width="700px" height="200px">
<thead>
<tr>
<th><input type="checkbox" id="selectAll" onclick="checkAll()" /></th>
<th>序号</td>
<th>学科</td>
<th>描述</td>
<th>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>1</td>
<td>Java</td>
<td>万物皆对象</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>2</td>
<td>php</td>
<td>php是最好的语言</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="ids" /></td>
<td>3</td>
<td>Golang</td>
<td>Golang发展前景巨大</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
(9)节点操作
-
创建节点/属性
-
新增节点
-
删除节点
-
替换节点
//创建节点
var newelmt = document.createElement("input");
//为节点创建属性
newelmt.setAttribute("type", "text");
newelmt.value = "mary";
newelmt.style.color = "red";
newelmt.id = "new";
//创建文本节点
var textnode = document.createTextNode("这里是文本");
//在某个节点前添加节点
div1.insertBefore(newelmt, span1);
//在div节点后面添加子节点
div1.appendChild(textnode);
//删除子节点
div1.removeChild(textnode);
//替换节点
div1.replaceChild(textnode, span1);
(10) 与下拉框有关的两个对象select/option
①select对象
②option对象
③select/option练习:省市二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<script>
function getShi(index) {
//获得市的下拉列表对象
var shi = document.getElementById("shi");
//清空市的选项
if (index != "") {
shi.options.length = 0;
}
//定义省市二维数组
var arrs = new Array(3);
arrs[0] = ["杭州市", "绍兴市", "嘉兴市", "义乌市"];
arrs[1] = new Array("南京市", "苏州市", "扬州市", "无锡市");
arrs[2] = new Array("武汉市", "襄阳市", "荆州市", "宜昌市");
for (var i = 0; i < arrs[index].length; i++) {
var option = new Option(arrs[index][i], i);
shi.add(option);
}
}
</script>
</head>
<body>
<h1>省市二级联动</h1>
籍贯:
<select name="sheng" onchange="getShi(this.value)">
<option value="">请选择</option>
<option value="0">浙江省</option>
<option value="1">江苏省</option>
<option value="2">湖北省</option>
</select>
<select id="shi">
<option>请选择</option>
</select>
</body>
</html>
