DOM对象
什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
DOM 节点
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
节点(自身)属性:
- attributes - 节点（元素）的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点（元素）的文本值
推荐导航属性：
- parentElement // 父节点标签元素
- children // 所有子标签
- firstElementChild // 第一个子标签元素
- lastElementChild // 最后一个子标签元素
- nextElementtSibling // 下一个兄弟标签元素
- previousElementSibling // 上一个兄弟标签元素
节点树中的节点彼此拥有层级关系。
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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>
<p>this is p</p>
<script>
// ---------------查找节点-----------------------
var div1=document.getElementById("div1");//只有用id来访问时获得一个节点，用其他方式会获取一个列表
var div2=document.getElementsByClassName('div2');
console.log(div2); //HTMLCollection [div.div2]
console.log(div2[0]);//<div class="div2">i am div2</div>
// -------------节点属性--------------------
console.log(div1.nodeName)//DIV
console.log(div1.nodeValue)//null
console.log(div1.nodeType)//1
//innerHTML会将标签内的所以内容都输出包括标签，而innerText只会输出文本内容
console.log(div1.innerHTML)// <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>
console.log(div1.innerText)//i am div2
//i am div2
//i am div2
//hello p
console.log(div1.attributes)//NamedNodeMap {0: id, id: id, length: 1}
// ----------------导航属性---------------------
console.log(div1.parentElement.nodeName)//BODY
console.log(div1.children)//HTMLCollection(4) [div.div2, div, div#div3, p, yuan: div, div3: div#div3]
console.log(div1.children[0])//<div class="div2">i am div2</div>
console.log(div1.nextElementSibling)//<p>this is p</p>
// ----------------局部查找----------------------
var div3=div1.getElementsByTagName('p')
console.log(div3)//HTMLCollection [p]
// 局部查找除了不能用id进行查找，其他方式都可以
</script>
</body>
</html>
HTML 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 确认按钮被点击。
onload：
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
onsubmit:
是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// ----------------------------------onload------------------------------------------------
function f()
{
var ele1=document.getElementsByTagName('div')[0]
console.log(ele1.innerHTML)
}//如果把js写在前面，因为按从上到下的顺序执行将找不到标签，所以要在body标签里写上onload=f()
//或者也可以写成
// window.onload=function()
// {
// var ele1=document.getElementsByTagName('div')[0]
// console.log(ele1.innerHTML)
// }
</script>
</head>
<body onload="f()"><!--onload='f()'表示在加载完所以标签后执行f()函数-->
<div>this is div</div>
<!-------------------------------onfocus---------------------------------------------->
<input type="text" id="id1" value="请输入用户名" onfocus="f1()" onblur="f2()"><!--绑定事件方式一-->
<script>
var ele=document.getElementById('id1');
function f1()
{
if(ele.value=='请输入用户名')
{
ele.value='';
}
}
function f2()
{
if(!ele.value.trim())
{
ele.value='请输入用户名';
}
}
</script>
<!--------------------------------------绑定事件---------------------------------------->
<!--除了上面的绑定事件方式之外，还可以不再标签里绑定，而是与通过.事件绑定，实现js与css的解耦-->
<p>this is p</p>
<script>
var ele2=document.getElementsByTagName('p')[0]
ele2.onclick=function ()
{
alert(666)
}
</script>
<!--------------------------------this-------------------------------------------------->
<div id="div1" onclick="func(this)">this is div1</div><!--当函数参数为this时，点击会自动定位到div标签-->
<script>
function func(that) //必须要有除了this以外的任意形参
{
console.log(that)//that就是div标签
}
</script>
<!------------------------------------onsubmit------------------------------------------->
<form action="" id="form1">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
<!--将下面的js注释掉会发现在点击提交之后,浏览器会将数据直接提交给后端后，刷新页面-->
<script>
var ele3=document.getElementById('form1')
ele3.onsubmit=function(event)//event为特殊的形参，表示事件的状态
{
alert('输入格式错误')
//如果不希望将数据上传至后端可以返回false，这样前段就不会上传数据也不会刷新页面，通常用于前段格式验证
return false
//同样可以用event的preventDefalt属性阻止上传数据与刷新
// event.preventDefault()
}
</script>
<!------------------------------------事件传播------------------------------------------->
<div id="abc_1" style="background: lightseagreen;width:300px;height:300px;">
<div id="abc_2" style="background: aqua;width:200px;height:200px;"></div>
</div>
<script >
document.getElementById("abc_1").onclick=function()
{
alert('111');
}
document.getElementById("abc_2").onclick=function(event)
{
alert('222');
//如果注释掉会发现点击里面的小方块，外面的alert也会被触发，这就是传播
event.stopPropagation(); //阻止事件向外层div传播.
}
</script>
</body>
</html>
应用
遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
background: white;
}
.div2{
background: #b4b4b4;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.div3{
position: absolute;
width: 300px;
height: 150px;
margin-top: 15%;
margin-left: 40%;
background: aqua;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1">this is content
<button onclick="show()">show</button></div>
<div class="div2 hide"></div>
<div class="div3 hide"><button onclick="hide()">hide</button></div>
<script>
var ele1=document.getElementsByClassName('div2')[0];
var ele2=document.getElementsByClassName('div3')[0];
function show()
{
ele1.classList.remove('hide')
ele2.classList.remove('hide')
}
function hide()
{
ele1.classList.add('hide')
ele2.classList.add('hide')
}
</script>
</body>
</html>
正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" cellpadding="15px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
<tr>
<td colspan="4" style="text-align:center">
<button onclick="selectall()">全选</button>
<button onclick="cancelall()">取消</button>
<button onclick="reverse()">反选</button>
</td>
</tr>
</table>
<script>
var eles=document.getElementsByTagName('input');
function selectall() {
for(var i=0;i<eles.length;i++)
{
eles[i].checked='checked'
}
}
function cancelall()
{
for (var i=0;i<eles.length;i++)
{
eles[i].checked=false;
}
}
function reverse()
{
for(var i=0;i<eles.length;i++)
{
eles[i].checked=!eles[i].checked;
}
}
</script>
</body>
</html>
二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province">
<option>请输入省份</option>
</select>
<select id="city">
<option>请输入城市</option>
</select>
<script>
data={湖北:['武汉','孝感','黄冈'],河南:['郑州','洛阳','开封'],福建:['福州','厦门','泉州']};
//javascript中字典关键字可以直接写，不用字符串
// console.log(typeof data);//类型为Object
// console.log(data);
// console.log(data.湖北[0]);//通过data.关键字或者data[关键字]都可以获得相应值
var ele_pro=document.getElementById('province');
var ele_city=document.getElementById('city');
//添加省份
for(var i in data)//i值就是关键字
{
// console.log(i)
var ele_p=document.createElement('option');
ele_p.innerHTML=i;
ele_pro.appendChild(ele_p);
}
//为省份select绑定onchange事件，当select发生改变时触发函数
ele_pro.onchange=function()
{
ele_city.options.length=1;//在添加城市之前去除之前省份的城市option
var ele=ele_pro.getElementsByTagName('option');
for(var i=0;i<ele.length;i++)
{
if(ele[i].selected)//选中的option的selected为true
{
for(var j in data[ele[i].innerHTML])
{
var ele_c=document.createElement('option');
ele_c.innerHTML=data[ele[i].innerHTML][j];
ele_city.appendChild(ele_c);
}
}
}
}
//下面是更简便的写法
// ele_pro.onchange=function ()
// {
// console.log(this.selectedIndex)//this会定位到ele_Pro标签,.selectedIndex是选中的标签的索引
// console.log(this.options[this.selectedIndex]);
//
// ele_city.options.length=1;
//
// for(var i=0;i<data[this.options[this.selectedIndex].innerHTML].length;i++)
// {
// var ele=document.createElement('option');
// ele.innerHTML=data[this.options[this.selectedIndex].innerHTML][i];
// ele_city.appendChild(ele);
// }
// }
</script>
</body>
</html>