认识 JavaScript 六

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
这个比较难了，需要自己写函数，没有现成的可以调用。