html dom与js区别,【JS】 Javascript与HTML DOM的互动 寻路

JS HTML DOM

DOM的全程是Document Object Module，即文档对象模型。一般来说，当一个页面被加载时，浏览器会在内部创建一个当前文档的DOM。就像用python的Etree之类的模块解析xml文件时建立的对象一样，浏览器建立的DOM对象抽象了整个html文件，并且形成了一颗html元素的树。

而JS，就被赋予了和这种DOM互动的能力。也就是说，JS可以通过增删改查DOM来实现动态灵活地改变html内容。比如JS可以做到：更改html元素，更改html元素的属性，更改css，对页面上发生的事件作出反应，增删html元素等等。

■　　改变HTML

JS可以直接改变HTML元素的内容和元素本身。

●  寻找HTML元素

HTML元素是组成html文档的基本单位，所有的操作都应该基于它。在JS中，用document.getElementById(...)方法可以通过ID来定位一个元素，类似的还有document.getElementByTagName("div")这样的方法来通过标签名来定位一个元素以及getElementByClassName的通过类名。此外还有更多的定位方法，这里只是为了后面演示方便先行提一下。

●  改变HTML输出流

就像之前文章中所提到的那样，document.write()方法用来向html输出内容，相当于改变html的输出流。需要注意到，既称改变，就是说没有HTML回整个都变成document.write出来的内容，所以当文档全部加载完成之后再进行write的话会把之前所有内容都清空掉再输出新内容。

●  改变HTML内容 innerHTML属性

对于一个元素对象来说，其拥有属性innerHTML属性，代表了头标签和尾标签之间的内容。通过改变这个属性的值就可以直接改变html中的内容了。

Hello World!

//最终显示的是New Text!因为p的内容被JS改变

●  改变HTML属性

除了内容，属性也是HTML很重要的一个组成部分。在DOM中直接用属性名来表示HTML元素的属性。改变某个属性名的值就直接改变了这个属性的值。比如：

上例中改变了img的src属性，使之指向另一个图片了。

●  改变HTML样式  style属性

JS可以通过DOM来改变html元素的CSS。用到的是元素对象的style属性：

Hello World!

上例中把id是p2的元素的CSS属性color改成了blue。

■　　HTML事件与JS的互动

JS可以对HTML上发生的事件作出反应。DOM的事件有很多：http://www.w3school.com.cn/jsref/dom_obj_event.asp

常用的就有：

onclick　　点击

onload/onunload　　用户进入/离开界面

onmouseover　　鼠标被移动到某元素上方

onselect　　文本被选中

onchange　　输入的内容改变时(比如像input这种标签，当用户敲完键盘离开输入框，光标不在输入框里的时候检测,如果和上一次检测时内容变化则触发此事件)

……

让事件和JS联系起来的一种方式是: 在相关元素的标签内把事件作为一个属性，JS的内容作为这个属性的值写出来。比如这样在按下这个按钮的时候就会跳出提示框了。另外，一般来说，可以把一些JS操作包装到一个函数中去，然后在事件这里写上这个函数就可以了。

*这里牵扯到一个小问题，就是说这个函数内容所在的

请点击该文本

functionchangetext(element)

{

element.innerHTML="谢谢!";

}