1、dom有5个属性，属性内容如下
下面开始介绍Dom属性，一共有5个属性 1、document object：文档对象 2、element object：标签对象 3、test object：文本对象 4、attribute object：属性对象 5、comment object：注释对象
2、dom导航方法
Dom下面的导航方法
parentElement 父标签
Children 所有的子标签
firstElementChild 第一个子标签
lastElementChild 最后一个子标签
nextElementSibling 下一个兄弟标签
previousElementSibling 上一个兄弟标签
先看个实例
实例如下
<a href="#">百度一下</a>
<div id="div1">
<div>hello div</div>
<p>hello p</p>
</div>
<h1>hello h1</h1>
<script>
var ele = document.getElementById("div1")
alert(ele.lastElementChild.nodeName)
alert(ele.firstElementChild.nodeName)
alert(ele.children)
注意：这里返回的是一个数组，可以通过下面的方法循环打印
var ele_sons = ele.children
for (var i = 0;i <= ele_sons.length;i++){
alert(ele_sons[i])
}
alert(ele.nextElementSibling.nodeName)
alert(ele.previousElementSibling.nodeName)
</script>
3、寻找对象的方式
3_1、全局查找
首先这是全局查找，在整个document中查找
通过id属性查找标签，因为id是全网唯一的，所以返回的结果就是一个标签
var ele = document.getElementById("div1")
通过class属性查找标签
var ele = document.getElementsByClassName("c1")，这里由于class属性不是全网唯一的，所以这里返回的不是一个标签，而是一个数据，计算class的标签
只有一个，他也是一个数组，需要通过索引来取具体的标签
通过标签的名字查找标签
var ele3 = document.getElementsByTagName()
通过标签名称查找的结果和class效果是一样的，都是一个数组
通过name属性的值来查找标签，同样也是返回一个数组，这个用的不多，常用的是上面的三种
var els3 = document.getElementsByName("sb")
3_2、局部查找
下面看下局部查找，就是查找指定标签下的标签
把上面的document替换为指定的ele也是可以的,这个就是局部查找
局部查找支持标签名称
<div class="c1">
<div id="c2">hello div
<p>这是一个子标签的p标签</p>
</div>
<p class="c3" name="sb">hello p</p>
</div>
<script>
var ele = document.getElementById("c2")
var ele2 = ele.getElementsByTagName("p")
在ele2下面查找p标签
alert(ele2[0].innerText)
</script>
局部对象查找不支持id查找
var ele3 = ele.getElementById("c4")
alert(ele3.nodeName)
这个会报错的
Uncaught TypeError: ele.getElementById is not a function
局部查找支持class查找
var ele4 = ele.getElementsByClassName("c5")[0];
alert(ele4.nodeName)
局部查找不支持name属性查找
var ele5 = ele.getElementsByName("c6")[0];
alert(ele5.nodeName)
这个会报错的
Uncaught TypeError: ele.getElementsByName is not a function
4、Dom事件介绍
Dom中的事件，比如我们上面的例子onclick，鼠标点击就会触发onclick事件
onclick事件:鼠标单击会触发事件
ondblclick事件:鼠标双击会触发事件
onfocus事件:元素获得焦点的时候触发的事件,比如一个input输入框，当把鼠标点击输入框，输入就会获得焦点
onblur事件：元素失去焦点的时候触发的事件
下面用input标签写一个例子，默认input标签中有默认值，鼠标点击，默认值去掉，鼠标离开，默认值恢复
<input class="text" type="text" value="默认值" onfocus=func5() onblur=func6()>
javascript的代码
function func5() {
var ret = document.getElementsByClassName("text");
ret[0].value = "";
}
function func6() {
var ret = document.getElementsByClassName("text");
ret[0].value = "默认值";
}
onchange事件：一般用select标签中，如果select选中的标签被更改，则会触发该事件
<select onchange=func8()>
<option>背景</option>
<option>广州</option>
<option>深圳</option>
<option>湖南</option>
<option>内蒙古</option>
</select>
onkeydown事件：按下键盘中的一个键触发的事件，比如我们按回车触发提交
<input type="button" value="键盘触发" onkeydown="func9()">
keycode事件：按下指定的键盘中的某个键触发的事件，用的时候自己查文档吧
onkeydown事件：键盘某个键被按下触发的事件
onkeyup事件：键盘某个键被松开触发的事件
onkeypress事件：键盘某个键被按下然后松开触发的事件
onload事件：一张页面或者一张图加载完成触发的事件
onmousedown事件：鼠标按下触发的事件
onmousemove事件：鼠标在标签的范围内移动就会触发的事件
onmouseout事件：鼠标离开区域，就会触发事件
onmouseover事件：鼠标进入区域，就会触发事件
onsubmit事件：这个事件必须给form标签绑定，submit标签提交数据的时候触发的事件，就比如我们向后台提交数据，前台先做校验，通过则提交，不通过则不让往后台提交,不通过则
return false阻止往后台提交数据
<form action="#" method="post" onsubmit=func1(event)>
姓名：<input id="id1" type="text" name="username">
年龄：<input id="id2" type="text" name="age">
<input type="submit" value="提交">
</form>
javascript代码，有两种方法来实现
function func1(event) {
alert("验证失败")
event.preventDefault()
// 阻止默认的行为
}
第二种方法
<form action="#" method="post" onsubmit="return func2()">
姓名：<input id="id3" type="text" name="username">
年龄：<input id="id4" type="text" name="age">
<input type="submit" value="提交">
</form>
javascript代码
function func2() {
alert("验证失败");
return false;
}
stoppropation事件:一般用在div标签中，阻止事件的延生，比如下面的例子
<div id="div1" onclick="func3()">
<div id="div2" onclick="func4()"></div>
</div>
在这个代码中，点击id为div2的标签会弹出div2和div1，但是如果我们想点击div2的时候只弹出div1，该怎么办呢？
function func3() {
alert("div1")
}
function func4() {
alert("div2")
}
下面这个例子中使用
<div id="div1" onclick="func3()">
<div id="div2" onclick="func4(event)"></div>
</div>
在下面的代码中，点击id为div2的标签不会弹出div1的事件
function func4(event) {
alert("div5")
event.stopPropagation()
}
5、Dom实现增删查标签的效果
5_1、先看下如何增删标签
增
只能通过一个父标签，然后通过这个父标签添加子标签
createElement()创建标签
appendChild()添加标签到指定的父标签的下面
删
只能通过一个父标签，然后通过这个父标签去删除子标签
removeChild():删除指定的子标签
下面的例子使用添加标签和删除标签的作用
<div id="div1">
<div id="div2">hello div2</div>
<p>hello p</p>
</div>
<input type="button" value="添加标签" onclick="func1()">
<input type="button" value="删除标签" onclick="func2()">
<script>
增加标签的函数
function func1() {
var father_ele = document.getElementById("div1");
var son_ele = document.createElement("p");
son_ele.innerText = "被添加的p标签";
son_ele.style.fontSize = "20px";
father_ele.appendChild(son_ele);
}
删除标签的函数
function func2() {
var father_ele = document.getElementById("div1");
var remove_ele = father_ele.lastElementChild;
father_ele.removeChild(remove_ele);
}
</script>
5_2、在来看下如何修改标签
首先修改标签的文本内容
改变文本内容
son_ele.innerHTML = "<a href='www.baidu.com'>百度一下</a>";
这个出来的效果是a标签，可以解析HTML标签
son_ele.innerText = "<a href='www.baidu.com'>百度一下</a>";
这个出来的效果是单纯的字符串,所以innerText只能添加文本，不会解析HTML标签
在来看下如何修改css样式
改变css的样式
我们可以做这样一个例子，鼠标点击事件会把字体的名字变大，或者变小，如果字体大小为10px，则把字体大小修改为30px，如果字体大小为30px，则修改字体大小为10px
<p id="p1" onclick="func3()">测试修改字体属性</p>
function func3() {
var ele = document.getElementById("p1");
if(ele.style.fontSize == "30px"){
ele.style.fontSize = "10px";
}else {
ele.style.fontSize = "30px";
}
}
我们还可以直接修改class属性的值
直接修改class属性
a、首先定义一个css样式
.big{
color: red;
font-size: 30px;
}
b、然后写html代码
<p id="p2" onclick="func4()">测试直接修改class属性</p>
c、然后写javascript代码
function func4() {
var ele = document.getElementById("p2");
alert(ele.classList);
查看ele的class的信息
ele.classList.add("big");
添加class属性
alert(ele.classList)
ele.classList.remove("big")
删除class属性
alert(ele.classList)
}
