HTML DOM基础知识
DOM（Document Object Model）是一个标准，W3C（World Wide Web）指定的，它定义了一个访问文档（如：XML、HTML）的标准。HTML DOM是HTML的标准对象模型、编程接口，它包含如下内容：
1、 HTML元素都是对象
2、 包含了HTML元素的所有属性
3、 访问HTML元素的方法
4、 HTML元素的事件
页面加载完，浏览器就生成一个树形DOM。回忆一下，数据结构与算法的书籍里学习的树形结构，如：无序树、二叉树、完全二叉树、霍夫曼树、B树、B+树。节点之间的关系有很多种，比如：根节点、子节点、兄弟节点、父节点、祖先节点。HTML的模型同样的有这样的节点关系，它的根节点是：<html>、它的一个子节点是<body>。
就是依靠这个模型，我们的JavaScript可以：
改变HTML元素
改变HTML元素的属性
移除HTML元素
移除HTML元素的属性
添加HTML元素
添加HTML元素的属性
改变CSS
移除CSS
响应HTML事件
创建HTML事件
关于HTML DOM的常用函数
当我们需要修改一个HTML元素的时候，我们需要先找到它，然后修改它的内容、它的属性、它的CSS。
查找HTML元素及其子节点
- 通过ID查找
document.getElementById("car");
获取到一个id为car的元素，找到了返回的是一个对象，没有找到的话，返回null。document是对象，getElementById("car")是方法。
- 通过元素名获取
var CarColor=document.getElementsByTagName("span");
返回所有的span元素。一个页面里可能有很多个span元素，这个函数返回的是一个集合，也可以在一定程度上理解为数组，但，它不是数组。你可以这样去访问这个集合的元素：
CarColor[0];
你也可以这样得到这个集合有多少元素
CarColor.length;
- 通过元素的class获取
var CarColor=document.getElementsByClassName("color");
一个页面里可能有很多个元素的类名是color，这个函数返回的是一个集合，也可以在一定程度上理解为数组，但，它不是数组。你可以这样去访问这个集合的元素：
CarColor[0];
你也可以这样得到这个集合有多少元素
CarColor.length;
- 函数querySelectorAll()
document.querySelectorAll("span.color");
查找span元素里class为"color"的元素
- 复杂的例子，组合使用以上几个函数
5.1 查找id为"car"的元素下面所有的<li>元素
var car = document.getElementById("car");
var carList = car.getElementsByTagName("li");
- 查找第一个子节点
document.getElementById("demo").firstChild;
- 获取第一个子节点的值（innerHTML）
document.getElementById("demo").firstChild.nodeValue;
也可以这样
document.getElementById("demo").childNodes[0].nodeValue;
修改HTML元素及其属性
- 修改一个元素的内容
document.getElementById("car").innerHTML="BMW";
document是对象，getElementById()是方法，innerHTML是getElementById()方法返回的元素对象的属性。
- 修改元素的属性
document.getElementById("birdImage").src = "parrot.jpg";
把img元素的src属性修改为：parrot.jpg。
添加HTML元素、移除HTML元素
- 添加HTML元素
var note=document.createElement("span");//创建元素
var content=document.createTextNode("The British Broadcasting Corporation is a British
public service broadcaster. ");//添加内容
note.appendChild(note);
如果是插入到id为brief的元素后面
var DivElement=document.getElementById("brief");
DivElement.appendChild(note);
如果是插入到id为brief的元素前面
var DivElement=document.getElementById("brief");
DivElement.insertBefore(note);
- 移除一个元素
var parent = document.getElementById("");
var child = document.getElementById("");
parent.removeChild(child);
修改CSS、移除CSS
- 修改CSS
函数原型
document.getElementById(id).style.property=;
这个函数的property就是在CSS里能设置的属性。如：字体大小、颜色、边框、补白、背景图片等等。
例如：改变p1元素的字体大小
document.getElementById("p1").style.font-size=18px;
- 移除CSS
这个比较难了，需要自己写函数，没有现成的可以调用。
