一、什么是DOM
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
二、DOM 节点
2.1、dom对象
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
节点(自身)属性:
- attributes - 节点（元素）的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点（元素）的文本值
导航属性:
- parentNode - 节点（元素）的父节点 (推荐)
- firstChild – 节点下第一个子元素
- lastChild – 节点下最后一个子元素
- childNodes - 节点（元素）的子节点
推荐导航属性：
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
节点树中的节点彼此拥有层级关系，父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法
局部查找：
<div id="div1">
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div id="div3">i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)
</script>示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">
<p name="littleP" class="p1">hello p</p>
<div class="div2">hello div
<div>div3</div>
<a href="">click</a>
</div>
<span>span</span>
</div>
<span>spanspanspanspan</span>
<div>hhhhh</div>
<script>
//var ele=document.getElementById()
var ele=document.getElementsByClassName("p1")[0];
console.log(ele); //<p name="littleP" class="p1">hello p</p>
console.log(ele.nodeName); //p
console.log(ele.nodeType); //1
console.log(ele.nodeValue); //null
console.log(ele.innerHTML); //hello p
// ele.innerHTML="hello world" //直接修改元素html文本值
var p_ele=ele.parentNode; //父节点
console.log(p_ele.nodeName); //DIV
var b_ele=ele.nextSibling;
console.log(b_ele.nodeName); //#text ==>元素不在同一行时不准确
var b_ele2=ele.nextElementSibling; //比nextSibling更准确
console.log(b_ele2.nodeName); //DIV
console.log(b_ele2.innerHTML);
//hello div
// <div>div3</div>
// <a href="">click</a>
var ele3=document.getElementsByClassName("div1")[0];
console.log(ele3.children[1].children) //[div, a]
// eg:
var ele4=document.getElementsByName("littleP")[0]
var ele5=ele4.nextElementSibling;
console.log(ele5.innerHTML); //整个标签结果
console.log(ele5.innerText); //标签文本内容
//
// ele5.innerHTML="<h1>YUAN</h1>";
//局部查找
var ele6=document.getElementsByClassName("div1")[0];
console.log(ele6); //div1
var ele7=ele6.getElementsByTagName("span");
console.log(ele7[0].innerHTML) //span
</script>
</body>
</html>2.2、DOM Event(事件)
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作
onclick //当用户点击某个对象时调用的事件句柄。 ondblclick //当用户双击某个对象时调用的事件句柄。 onfocus //元素获得焦点。 //练习：输入框 onblur //元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange //域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown //某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress //某个键盘按键被按下并松开。 onkeyup //某个键盘按键被松开。 onload //一张页面或一幅图像完成加载。 onmousedown //鼠标按钮被按下。 onmousemove //鼠标被移动。 onmouseout //鼠标从某元素移开。 onmouseover //鼠标移到某元素之上。 onmouseleave //鼠标从元素离开 onselect //文本被选中。 onsubmit //确认按钮被点击。
添加事件属性方式：
<div onclick="alert(123)">点我呀</div> #直接在html上添加
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc"); #添加js代码，绑定事件
ele.onclick=function () {
alert("hi")
};
</script>this参数：
<div id="abc" onclick="func1(this)">事件绑定方式1</div> //this拿到的是本身标签
<div id="id123">事件绑定方式2</div>
<script>
function func1(self){
console.log(self.id) //abc
}
//jquery下是$(self), 这种方式this参数必须填写;
//------------------------------------------
var ele=document.getElementById("id123").onclick=function(){
console.log(this.id); //id123
//jquery下是$(this), 这种方式不需要this参数;
}onload事件：
onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// window.onload=function(){
// var ele=document.getElementById("ppp");
// ele.onclick=function(){
// alert(123)
// };
// };
function fun1() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}
</script>
</head>
<body onload="fun1()"> //当body加载完后，加载fun1()
<p id="ppp">hello p</p>
</body>
</html>onsubmit事件:
当表单在提交时触发. 该属性也只能给form元素使用.
应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
<form id="form">
<input type="text"/>
<input type="submit" value="点我!" />
</form>
<script type="text/javascript">
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("验证失败 表单不会提交!");
// return false;
// 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
alert("验证失败 表单不会提交!");
event.preventDefault();
}Event 对象：
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可
事件传播：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
300px;
height: 300px;
background-color: antiquewhite;
}
.inner{
100px;
height: 100px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="outer" onclick="func2()">
<div class="inner"></div>
</div>
<script>
var ele=document.getElementsByClassName("inner")[0];
ele.onclick= function (e) {
alert("I am inner!");
e.stopPropagation() ////阻止事件向外层div传播.
};
function func2() {
alert("I am outer!")
}
</script>
</body>
</html>三、增删改查操作
3.1、node的CRUD
1）增加
createElement(name)创建元素 appendChild();将元素添加
2）删除
获得要删除的元素 获得它的父元素 使用removeChild()方法删除
3）修改
第一种方式:
- 使用上面增和删结合完成修改
第二中方式:
- 使用setAttribute();方法修改属性
- 使用innerHTML属性修改元素的内容
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1,.div2,.div3,.div4{
300px;
height: 100px;
}
.div1{
background-color: green;
}
.div2{
background-color: yellow;
}
.div3{
background-color: rebeccapurple;
}
.div4{
background-color: deeppink;
}
</style>
</head>
<body>
<div class="div1">
<button onclick="add()">add</button> //添加事件
</div>
<div class="div2">
<button onclick="del()">del</button> //删除事件
hello div2
</div>
<div class="div3">
<button onclick="change()">change</button> //修改事件
<p>hello div3</p>
</div>
<div class="div4">hello div4</div>
<script>
function change() {
var img=document.createElement("img");//<img src=""> 创建img元素
//img.setAttribute("src","meinv.jpg"); //使用img.setAttribute设置属性
img.src="meinv.jpg";
var ele=document.getElementsByTagName("p")[0]; //获取要修改的元素
var father=document.getElementsByClassName("div3")[0]; //获取修改元素的父元素
father.replaceChild(img,ele) //替换
}
function add() {
var ele=document.createElement("p");//<p></p>
ele.innerHTML="<h1>hello p</h1>";
//ele.innerText="<h1>hello p</h1>"; //只是添加文本，没有格式
ele.style.color="red";
ele.style.fontSize="10px";
var father=document.getElementsByClassName("div1")[0];
father.appendChild(ele) //添加
}
function del() {
var father=document.getElementsByClassName("div1")[0];
var son=father.getElementsByTagName("p")[0];
father.removeChild(son) //删除
}
</script>
</body>
</html>3.2、修改HTML DOM
1）改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。
2）改变 CSS 样式
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";3）改变 HTML 属性
elementNode.setAttribute(name,value) elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)
4）创建新的 HTML 元素
createElement(name)
5）删除已有的 HTML 元素
elementNode.removeChild(node)
6）关于class的操作
elementNode.className elementNode.classList.add elementNode.classList.remove
四、实例练习
4.1、搜索框
<input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">
<script>
function Focus(){
var input=document.getElementById("ID1");
if (input.value=="请输入用户名"){
input.value="";
}
};
function Blurs(){
var ele=document.getElementById("ID1");
var val=ele.value;
if(!val.trim()){
ele.value="请输入用户名";
}
}
</script>4.2、模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action('show')">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action('hide')">
</div>
<script>
function action(act){
var ele=document.getElementsByClassName("shade")[0];
var ele2=document.getElementsByClassName("models")[0];
if(act=="show"){
ele.classList.remove("hide");
ele2.classList.remove("hide");
}else {
ele.classList.add("hide");
ele2.classList.add("hide");
}
}
</script>
</body>
</html>4.3、全选反选取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
200px;
background-color: gold;
}
</style>
</head>
<body>
<button onclick="select('all');">全选</button>
<button onclick="select('cancel');">取消</button>
<button onclick="select('reverse');">反选</button>
<table border="1" id="Table">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
<script>
function select(choice){
var ele=document.getElementById("Table");
var inputs=ele.getElementsByTagName("input"); //获取所有输入
for (var i=0;i<inputs.length;i=i+1){
var ele2=inputs[i];
if (choice=="all"){ //全选
ele2.checked=true;
}else if(choice=="cancel"){ //取消
ele2.checked=false;
}
else { //反选
ele2.checked=!ele2.checked;
// if (ele2.checked){
// ele2.checked=false;
// }else {
// ele2.checked=true;
// }
}
}
}
</script>
</body>
</html>4.4、两级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="provinces">
<option value="">请选择省份</option>
<!--<option value="">河北省</option>-->
<!--<option value="">河南省</option>-->
<!--<option value="">北京</option>-->
</select>
<select name="" id="citys">
<option value="">请选择城市</option>
</select>
<script>
data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
var pro_ele=document.getElementById("provinces");
var city_ele=document.getElementById("citys")
for(var i in data){
var ele=document.createElement("option");
ele.innerHTML=i;
pro_ele.appendChild(ele)
}
pro_ele.onchange=function () {
console.log(this.selectedIndex);
console.log(this.options[this.selectedIndex])
var citys=data[this.options[this.selectedIndex].innerHTML];
city_ele.options.length=1;
for(var i=0;i<citys.length;i++){
var ele=document.createElement("option");
ele.innerHTML=citys[i];
city_ele.appendChild(ele)
}
}
</script>
</body>
</html>