浅谈JavaScript如何操作html DOM

** 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。**

HTML DOM 树

Paste_Image.png

DOM树很重要，特别是其中各节点之间的关系。因为有时候我们需要通过父节点寻找子节点等。

本文将会讲到以下内容：
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

JavaScript 能够改变页面中的所有 HTML 元素

首先，我们要知道如何查找HTML元素，通常有三种方法：

• id
• tag
• classs
  就是分别通过id，tag，class的名字查找HTML元素。

通过ID查找HTML元素

    
        
hello world
        
display getElementById method 
        
        
    

通过tag查找HTML元素

    
 hello world
    

    
hello world 
    
display the getElementBYTagName  method
    
    
    

JavaScript 改变 HTML 元素的内容。

改变 HTML 输出流

改变 HTML 内容

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

    
hello world
    

改变 HTML 属性

原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

Hello World!
Hello World!



上面的段落已被一段脚本修改。

hello world

change color

** JavaScript 有能力对 HTML 事件做出反应**

HTML 事件的例子：

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

请点击该文本

请点击该文本

点击按钮就可以执行 displayDate() 函数。

点击这里






 

添加和删除节点（HTML 元素）

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

这段代码创建新的

元素：

var para=document.createElement("p");

如需向

元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是新段落。");

然后您必须向

元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

总结

在我们的 JavaScript 教程的 HTML DOM 部分，您已经学到了：

• 如何改变 HTML 元素的内容 (innerHTML)
• 如何改变 HTML 元素的样式 (CSS)
• 如何对 HTML DOM 事件作出反应
• 如何添加或删除 HTML 元素