什么是dom
DOM --> Document Object Model
DOM 定义了表示和修改文档所需的方法。DOM 对象即为宿主对象，由浏览器厂商定义，用来操作 html 和 XML 功能的一类对象的集合。也有人称DOM 是对HTML 以及xml 的标准编程接口。
简单来说DOM 并不是一种技术，而是一种访问结构化文档的一种思想。借助DOM 模型，我们可以对DOM 树进行修改、删除、新增等操作，让结构化文档动态化。DOM 不能操作css 但是可以通过给html 元素 添加内置 style 改变样式
DOM 节点：
DOM 模型中的节点–文档可以说是有节点构成的集合.在 DOM 模型中有以下三种节点：
元素节点：各种标签就是这些元素节点的名称，例如 < p >、< ul > 等 文本节点：文本节点总是被包含在元素节点的内部。 属性节点：一般用来修饰元素节点就称为属性节点。
为了动态地修改HTML元素，须先访问HTML 元素。DOM 主要提供了两种方式来访问HTML 元素：
根据 ID 访问HTML元素——通过document对象调用getElementByID() 方法来查找具有唯一id属性值得元素。利用节点关系访问HTML元素。常用的属性和方法如下：
parentNode 返回当前节点的父节点。 previousSibling 返回当前节点的前一个兄弟节点。 nextSibing 返回当前节点的后一个兄弟节点。 childNodes 返回当前节点的所有子节点。 firstChild 返回当前节点的第一个子节点。 lastChild 返回当前节点的最后一个子节点。 getElementsByTagName(tagName) 返回当前节点的具有指定标签名的所有子节点
通过节点查找元素实例：
<ul id
="names">
<li
>zhangsan
</li
>
<li
>lisi
</li
>
<li
>wangwu
</li
>
<li id
="n4">zhaoliu
</li
>
<li
>xiaoqiang
</li
>
<li
>lingling
</li
>
</ul
>
<input onclick
="showContent(curr.parentNode)" type
="button" value
="父节点">
<input onclick
="showContent(curr.parentNode.firstElementChild)" type
="button" value
="第一个子节点">
<input onclick
="showContent(curr.previousElementSibling)" type
="button" value
="上一个节点">
<input onclick
="showContent(curr.nextElementSibling.nextElementSibling)" type
="button" value
="下一个节点">
<input onclick
="showContent(curr.parentNode.lastElementChild)" type
="button" value
="最后一个节点">
<input onclick
="showItem()" type
="button" value
="得到所有li元素的个数">
<script
>
var curr
= document
.getElementById("n4")
function showContent(target
){
alert(target
.innerHTML
);
}
function showItem(){
console
.log(document
.getElementsByTagName("li"));
}
</script
>
通过标签名（元素名）找到元素
语法：
document
.getElementsByTagName()
实例：通过 div标签名 找到元素 div 和 实现红蓝两色来回切换
var div
= document
.getElementByTagName('div')[0];
div
.style
.width
= "100px";
div
.style
.height
= "100px";
div
.style
.backgroundColor
= "red";
var count
= 0;
div
.onclick = function () {
count
++
if(count
% 2 == 1) {
this.style
.backgroundColor
= "green";
}else{
this.style
.backgroundColor
= "red";
}
}
