JavaScript通过HTML DOM创建动态HTML

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML元素之间的继承关系

DOM为常用的HTML元素提供了一套完整的继承体系，从页面的document对象到每个常用的HTML元素，DOM模型都提供了对应的类，每个类都提供了相应的方法来操作DOM元素本身、属性和其子元素。DOM模型允许以树的方式操作HTML文档中的每个元素。其中，Node，Document，Element，HTMLElement都是普通HTML元素的超类，不直接对应于HTML页面控制，但他们包含的方法可以被其他页面元素调用。

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问（window常省略）。Document对象中的属性或方法可以用Document.xxx的方式访问或调用。

Element对象

在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。Element对象中的属性或方法可以用element.xxx的方式访问或调用（element代指元素节点对象，示例如下增加元素的示例）。

---

查找 HTML 元素

查找html元素有三种方法：

1.通过id 找到 HTML 元素

例：var x=document.getElementById(“intro”);

如果找到该元素，则该方法将以对象的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

2.通过类名找到 HTML 元素（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。）
使用方法getElementsByClassName（），该方法返回文档中所有指定类名的元素的集合。

3.通过标签名找到 HTML 元素
使用方法getElementsByTagName（），该方法返回文档中所有带指定标签名的元素的集合。

（注：上面用到的三个方法都是Document对象中的方法。）

三个方法的示例：

    
测试
	通过id获取
	通过类名获取
	通过标签获取

	

4.通过节点关系找到HTML元素

element对象中通过节点关系访问HTML元素的属性如下（这些属性可用于所有元素上）：
parentNode //返回当前节点的父节点，顶级父级元素为document；
childNodes //返回当前节点的所有子节点
firstChild //返回当前节点的第一个子节点
lastChild //返回当前节点的最后一个子节点
nextSibling //返回当前节点的后一个兄弟节点
previousSiling //返回当前节点的前一个兄弟节点

5.通过css选择器找到HTML元素

使用document提供的如下方法：
querySelector（selecs）:该方法参数可以是一个或多个逗号隔开的css选择器，返回文档中第一个符合选择器参数的HATML元素。
querySelectorAll（selecs）：返回所有符合css选择器的HTML元素

---

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。语法：

document.getElementById(id).innerHTML=new HTML

改变 HTML 属性

语法：

document.getElementById(id).attribute=new value

改变 HTML 样式

语法：

document.getElementById(id).style.property=new style

注意：改变HTML样式是通过改变Style对象的属性完成，部分写法和css属性相似却略有区别。

增加HTML元素

向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素（调用element对象的appendChild（）方法，方法参数传入要添加的元素节点对象）。
示例：

        //创建一个新
元素节点
        var para=document.createElement("p");
        //向p元素中添加文本内容
		var node=document.createTextNode("这是新段落。");
		para.appendChild(node);
		//获取一个已存在的元素
		var element=document.getElementById("div1");
		//向这个已存在的元素追加前面创建的
元素
		element.appendChild(para);

删除HTML元素

删除元素需要获取目标元素的父元素，再调用父元素的removeChild（）方法（element对象中的方法），方法参数传入要删除的元素节点对象。
示例：

这是一个段落。
这是另一个段落。