DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
DOM 以树结构表达 HTML 文档。
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
DOM操作：
Document：整个html文件都成为一个document文档
Element：所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node：document、element、attribute、text统称为节点node
Document对象：
getElementById()：返回对由于指定id的第一个对象的引用；
getElementsByName()：返回带有指定名称的对象集合；
getElementsByTagName()：返回带有指定标签名的对象集合；
后面两个方法获取之后要遍历
document.createTextNode()：创建文本节点；
document.createElement()：创建元素节点；
h5新特性：
getElementsByClassName()；（通过类名获取）
querySelector()：返回指定选择器的第一个元素对象；
Element操作：html中所有的标签都是element元素。
element.appendChild()：向元素添加新的节点，作为最后一个节点；
element.firstChild()：返回元素的首个子节点；
element.getAttribute()：返回元素节点的指定属性值；
element.innerHTML()：设置或返回元素的内容； （可以改变元素的内容，可以识别HTML标签）
element.innerText()：可以改变元素的内容 （可以识别HTML标签）
element.insertBefore()：在指定的已有子节点之前插入新节点；
element.lastChild()：返回元素的最后一个子元素；
element.setAttribute()：把指定属性设置或更改为指定值。
Attribute：html中所有标签的属性都是Attribute
attr.value()：设置或返回属性的值；
小栗子：实现表格的隔行换色
实现：
<!DOCTYPE html>
<html>
<head>
<title>表格颜色交替显示</title>
<meta charset="utf-8">
<script>
//onload 事件会在页面或图像加载完成后立即发生。
window.onload = function() {
//获取表格
var tabbel = document.getElementById("tbl");
//获取表格中tbody的长度
var len = tabbel.rows.length;
//对tbody里的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
tabbel.rows[i].style.backgroundColor = "pink";
}else{
tabbel.rows[i].style.backgroundColor = "gold";
}
}
}
</script>
</head>
<body>
<table border="1" id="tbl" width="500px" height="240px" align="center">
<thead>
<th>用户Id</th>
<th>用户名</th>
<th>年龄</th>
<th>毕业学校</th>
<th>备注</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>20</td>
<td>光明小学</td>
<td>优秀班干部</td>
</tr>
<tr>
<td>2</td>
<td>小刚</td>
<td>19</td>
<td>光明小学</td>
<td>学习委员</td>
</tr>
<tr>
<td>3</td>
<td>小红</td>
<td>25</td>
<td>光明小学</td>
<td>副班</td>
</tr>
<tr>
<td>4</td>
<td>李磊</td>
<td>18</td>
<td>光明小学</td>
<td>服务股长</td>
</tr>
<tr>
<td>5</td>
<td>韩梅梅</td>
<td>21</td>
<td>光明小学</td>
<td>心理委员</td>
</tr>
</tbody>
</table>
</body>
</html>
小栗子：表格高亮显示：鼠标放在表格的一行改变颜色，鼠标移开再变回白色
代码：
<!DOCTYPE html>
<html>
<head>
<title>表格颜色交替显示</title>
<meta charset="utf-8">
<script>
function changeColor(id,change){
if(change == "over"){
document.getElementById(id).style.backgroundColor="pink";
}else if(change == "out"){
document.getElementById(id).style.backgroundColor="white";
}
}
</script>
</head>
<body>
<table border="1" width="500px" height="240px" align="center">
<thead>
<th>用户Id</th>
<th>用户名</th>
<th>年龄</th>
<th>毕业学校</th>
<th>备注</th>
</thead>
<tbody>
<tr id="t1" onmouseover="changeColor('t1','over')"
onmouseout="changeColor('t1','out')" >
<td>1</td>
<td>小明</td>
<td>20</td>
<td>光明小学</td>
<td>优秀班干部</td>
</tr>
<tr id="t2" onmouseover="changeColor('t2','over')"
onmouseout="changeColor('t2','out')">
<td>2</td>
<td>小刚</td>
<td>19</td>
<td>光明小学</td>
<td>学习委员</td>
</tr>
<tr id="t3" onmouseover="changeColor('t3','over')"
onmouseout="changeColor('t3','out')" >
<td>3</td>
<td>小红</td>
<td>25</td>
<td>光明小学</td>
<td>副班</td>
</tr>
<tr id="t4" onmouseover="changeColor('t4','over')"
onmouseout="changeColor('t4','out')" >
<td>4</td>
<td>李磊</td>
<td>18</td>
<td>光明小学</td>
<td>服务股长</td>
</tr>
<tr id="t5" onmouseover="changeColor('t5','over')"
onmouseout="changeColor('t5','out')" >
<td>5</td>
<td>韩梅梅</td>
<td>21</td>
<td>光明小学</td>
<td>心理委员</td>
</tr>
</tbody>
</table>
</body>
</html>
例子：js操作表单
点击按钮改变输入框的内容
输入密码的输入与隐藏
效果：
实现：
<!DOCTYPE html>
<html>
<head>
<title>DOM中表单属性的的设置</title>
<meta charset="utf-8">
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<!--点击按钮改变文本框内容 -->
<button id="btn">点击按钮改变内容</button></br>
<input type="text" value="输入内容">
</br></br></br></br>
<!-- 密码隐藏与显示 -->
<div class="box">
<label>
<img src="close.jpg" id="eye">
</label>
<input type="password" id="pwd">
</div>
</body>
<script>
//获取元素
var bt = document.querySelector('button');
var input = document.querySelector('input');
//绑定事件
bt.onclick = function() {
//表单里面的值，文字内容通过value值来修改
input.value = '被点击了';
//点击一次按钮后禁用按钮
this.disabled = true;
}
</script>
<script>
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
//标记变量,flag=0密码不可见,flag=1密码可见
var flag = 0;
eye.onclick = function() {
if(flag == 0){
pwd.type = 'text';
eye.src = 'open.jpg';
flag = 1;
}else {
pwd.type = 'password';
eye.src = 'close.jpg';
flag = 0;
}
}
</script>
</html>
例子：按下按钮动态添加城市
实现：
<!DOCTYPE html>
<html>
<head>
<title>动态添加城市</title>
<meta charset="utf-8">
<script>
function addCity() {
//先获取文本框的内容
var cvalue = document.getElementById("cityname").value;
//获取ul元素节点
var ulEle = document.getElementById("ul1");
//创建城市文本节点
var cityNode = document.createTextNode(cvalue);
//创捷li元素节点
var liEle = document.createElement("li");
//将城市节点添加到li节点
liEle.appendChild(cityNode);
//将li添加到ul中
ulEle.appendChild(liEle);
//添加完成后清空输入框
cityname.value="";
}
</script>
</head>
<body>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<input type="text" id="cityname" name="cityname">
<button onclick="addCity()" id="btn">添加</button>
</body>
</html>使用Vue框架来操作ul中的li，使输入框中输入的内容加到li中，点击x删除：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app4">
<!-- keyup.enter回车执行事件 -->
<input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
<!--使用组件的做法 -->
<ul>
<todo-item v-for="(todo,index) in todos" v-bind:title="todo.title" v-on:remove="todos.splice(index,1)">
</todo-item>
</ul>
</div>
<script>
Vue.component("todo-item", {
props: ["title"],
template: `
<li>
{{title}}
<button v-on:click="$emit('remove')">X</button>
</li>
`
})
new Vue({
el: "#app4",
data: {
newTodoText: "",
todos: [
{ id: 1, title: "Do the dishes" },
{ id: 2, title: "Take out the trash" },
{ id: 3, title: "Mow the lawn" },
],
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.todos.length + 1,
title: this.newTodoText,
});
this.newTodoText = "";
}
}
})
</script>
</body>
</html>
例子：省市二级联动
实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,intial-scale=1">
<title>注册网页</title>
<style type="text/css">
body {
width: 1200px;
height: 1200px;
margin: 0 auto;
border: 1px solid lightsalmon;
background-color: azure;
}
.dd1 {
height: 60px;
border: 1px solid pink;
float: left;
/*设置向左浮动*/
}
.dd2 {
width: 1200px;
height: 60px;
background-color: black;
border: 1px solid palevioletred;
}
table tr {
height: 10px;
}
a {
text-decoration: none;
}
/* 清除浮动 */
#clear {
clear: both;
}
</style>
<script>
//创建一个二维数组
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","商丘市");
function changeCity(ci){
//获取第二个下拉列表
var cityEle = document.getElementById("city");
//每次清空第二个下拉列表的option内容
cityEle.options.length = 0;
// 遍历二维数组中的省份
for(var i=0;i < cities.length;i ++){
if(ci==i){
//遍历所选省份的所有城市
for(var j=0;j<cities[i].length;j++){
//创建城市文本节点
var textNode = document.createTextNode(cities[i][j]);
//创建option元素节点
var opEle = document.createElement("option");
//将城市文本节点添加到option元素节点中
opEle.appendChild(textNode);
//将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
</head>
<body>
<!--第一层-->
<div>
<div class="dd1">
<img src="tb1.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb2.png" width="398px" height="60px" />
</div>
<div class="dd1">
<img src="tb3.png" width="398px" height="60px" />
</div>
</div>
<!-- 清除浮动 -->
<div id="clear"></div>
<!--第二层-->
<div class="dd2">
<p>
<a href="#"><font color="white" size="5px"> 首页 </font></a>
<a href="#"><font color="white" size="3px">手机数码</font></a>
<a href="#"><font color="white" size="3px">电脑办公</font></a>
<a href="#"><font color="white" size="3px">鞋靴箱包</font></a>
<a href="#"><font color="white" size="3px">家用电器</font></a>
</p>
</div>
<!--第三层-->
<div >
<br /><br/>
<form action="#" method="get" name="regform" onsubmit="return checkForm()">
<table border="1px" align="center" cellspacing="0px" cellpadding="0px" width="700px" height="500px">
<tr>
<td colspan="2">会员注册 USER REGISTER</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" id="username" name="username"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" id="password" name="password"/>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" id="repassword" name="repassword"/>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="email" id="email" name="email"/>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" id="name" name="name"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" value="男" name="sex" checked="checked"/>男
<input type="radio" value="女" name="sex"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" id="date" name="date"/>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<!-- 省 -->
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<!-- 市 -->
<select id="city">
</select>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" id="checkcode" name="checkcode">
<img src="4.jpg" height="35px" width="80px"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="reset" value="重置" />
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
