详细讲解JavaScript操作HTML DOM的基本方式

使用HTML DOM，您可以访问JavaScript HTML文档的所有元素。HTML(文档对象模型)加载网页时，浏览器将创建该网页的文档对象模型。HTML DOM模型被构建为对象树：。

通过可编程对象模型，JavaScript获得了足够的能力来创建动态HTML。

JavaScript可以改变页面中的所有HTML元素。JavaScript可以改变页面中的所有HTML属性。JavaScript可以改变页面中的所有CSS样式。JavaScript可以响应页面中的所有事件，并找到HTML元素。一般来说，通过JavaScript，你需要操作HTML元素。为此，您必须首先找到元素。有三种方法可以做到：

按id查找HTML元素按标签名查找HTML元素按类名查找HTML元素按id查找HTML元素在DOM中查找HTML元素最简单的方法就是使用元素的id。本示例查找id='intro': instance的元素。

var x=document . getelementbyid(' intro ')；如果找到了元素，方法会将元素作为对象返回(在x中)。如果找不到元素，x将包含null。通过标记名查找HTML元素本示例查找id='main '的元素，然后查找id='main '元素中的所有p元素：实例。

var x=document . getelementbyid(' main ')；var y=x . getelementsbytagname(' p ')；在本例中，getElementsByClassName函数用于查找class='intro ':实例的元素。

var x=document . getelementsbyclassname(' intro ')；

更改HTMLHTML DOM允许JavaScript更改HTML元素的内容。更改HTML输出流JavaScript可以创建动态HTML内容：今天的日期是：WED 2015年10月21日14:4:25 GMT 0800(中国标准时间)。在JavaScript中，document.write()可用于将内容直接写入HTML输出流。例子

！DOCTYPE html html bodyscriptdocument . write(Date())；/script/body/htmllamp，加载文档后不要使用document.write()。这将覆盖文档。

更改HTML内容时使用innerHTML属性，这是修改HTML内容最简单的方法。要更改HTML元素的内容，请使用以下语法：document.getelementbyid (id)。innerhtml=newhtmlThis本示例更改p:元素实例的内容。

htmlbodyp id='p1'Hello World！/pscript document . GetElementByID(' P1 ')。innerHTML=“新文本！”；/script/body/html本示例更改h1元素：instance的内容。

！DOCTYPE html html body h1 id=' Header ' old Header/h1 script var元素=document . getelementbyid(' Header ')；element.innerHTML=' New Header/脚本/正文/html

示例说明：

上面的HTML文档包含id为“header”的h1元素。我们使用HTML DOM来获取id='header '的元素。JavaScript会更改这个元素(innerHTML)的内容，并更改HTML属性。如果需要更改HTML元素的属性，请使用以下语法：

Document.getelementbyid (id)。属性=新值本示例更改img元素：实例的src属性。

！DOCTYPE html htmlbodyimg id=' image ' src=' http 3360 smiley . gif ' script document . getelementbyid(' image ')。src=' http : landscape . jpg '；/script/body/html示例说明：

上面的HTML文档包含id为“image”的img元素。我们使用HTML DOM来获取id='image '的元素。JavaScript更改此元素的属性(将“smiley.gif”更改为“landscape.jpg”)。