
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"
观察局部细节:
<a href="http://www.imooc.com">JavaScript DOM</a>

Object.innerHTML
注意:
1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
2.注意书写,innerHTML区分大小写
Object.style.property=new style;

<p id="pcon">Hello World!</p><script>var mychar = document.getElementById("pcon");mychar.style.color="red";mychar.style.fontSize="20";mychar.style.backgroundColor ="blue";</script>
Object.style.display = value

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>display</title><script type="text/javascript">function hidetext(){var mychar = document.getElementById("con");mychar.style.display = "none";}function showtext(){var mychar = document.getElementById("con");mychar.style.display = "block";}</script></head><body><h1>JavaScript</h1><p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p><form><input type="button" onclick="hidetext()" value="隐藏内容" /><input type="button" onclick="showtext()" value="显示内容" /></form></body></html>
object.className = classname
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>className属性</title><style>body{ font-size:16px;}.one{border:1px solid #eee;width:230px;height:50px;background:#ccc;color:red;}.two{border:1px solid #ccc;width:230px;height:50px;background:#9CF;color:blue;}</style></head><body><p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p><input type="button" value="添加样式" onclick="add()"/><p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p><input type="button" value="更改外观" onclick="modify()"/><script type="text/javascript">function add(){var p1 = document.getElementById("p1");p1.className="one";}function modify(){var p2 = document.getElementById("p2");p2.className="two";}</script></body></html>
原文:http://www.cnblogs.com/echorep/p/5186251.html