DOM可以做什么？

学习过程即将开始，还是先来几个实际例子，看看DOM可以做什么吧。

改变页面的背景

教程里有如下一段改变网页背景颜色的JavaScript代码。

  function ChangeColor(){
  document.body.bgColor="yellow" 
 }

其实在HTML DOM简介里面我们就已经做过一个类似的例子了。在这里我们还是做点更有趣的例子吧。

隐藏和显示

上面的按钮可以控制我的显示和消失哦。这个特效就是通过JavaScript配合HTML DOM来完成的。代码如下：

JavaScript代码：

<script type="text/javascript">
  function hide(){
  document.getElementById("hiddenTest").style.display = "none" ; 
 }
  function show(){
  document.getElementById("hiddenTest").style.display = "block" ; 
 }
</script>

HTML代码：

<form action="#">
 <button onclick="hide(); return false;" value="隐藏" >隐藏段落</button>
 <button onclick="show(); return false;" value="显示" >显示段落</button>
 </form>
 <p id="hiddenTest">上面的按钮可以控制我的显示和消失哦。……</p>

菜鸟的HTML DOM笔记目录

  1. DOM可以做什么？
  2. DOM的结构
  3. 访问DOM节点1——getElementById()
  4. 访问DOM节点2——getElementsByTagName()
  5. 访问DOM节点3——通过节点关系
  6. DOM节点信息
  7. DOM信息nodeType的应用
  8. 修改DOM——innerHTML
  9. 删除DOM节点——removeChild
  10. 添加DOM节点
  11. DOM简介总结