JS学习笔记（五） HTML DOM

　　参考资料：

　　1. http://www.w3school.com.cn/js/js_htmldom.asp

　　2. http://www.runoob.com/htmldom/htmldom-tutorial.html

　　☂ 知识点：

　　☞ HTML DOM定义了访问和操作HTML和XML文档的标准方法。

　　☞ W3C DOM标准分3个不同的部分：1. 核心DOM - 针对任何结构化文档的标准模型。

　　　　　　　　　　　　　　　　　　 2. XML DOM - 针对XML文档的标准模型。

　　　　　　　　　　　　　　　　　　 3. HTML DOM - 针对HTML文档的标准模型。

　　☞ HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

　　　　　　　　　　　　　　　　图1　　DOM树

改变HTML输出流

在Javascript中，document.write()可用于直接向HTML输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
　　document.write(Date());
</script>

</body>
</html>

改变HTML内容

document.getElementById(id).innerHTML=new HTML

改变HTML属性

document.getElementById(id).attribute=new value

改变HTML样式

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

创建新的HTML元素

<div id="div1">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
</div>

<script>
　　var para=document.createElement("p");
　　var node=document.createTextNode("段落3");
　　para.appendChild(node);

　　var element=document.getElementById("div1");
　　element.appendChild(para);
</script>

删除已有的HTML元素

<div id="div1">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
</div>

<script>
　　var parent=document.getElementById("div1");
　　var child=document.getElementById("p1");
　　parent.removeChild(child);
</script>

事件

<h1 onclick="this.innerHTML='This is a test.'">Click me now!</h1>

<h1 onclick="changetext(this)">Click me now!</h1>

使用DOM添加事件

<script>
　　document.getElementById("bt").onclick=function(){displayDate()};
</script>