JavaScript HTML DOM

四、JavaScript HTML DOM

      当一个HTML文档被加载时，浏览器会创建页面的文档对象模型DOM(Document Object Model)，此模型被构造为对象的树。

      通过可编程的对象模型，JavaScript能够创建动态的HTML，即JS能改变HTML页面中的所有元素，所有属性，所有CSS样式，以及对所有事件做出反应。

1.查找HTML元素

      通常要操作一个HTML元素，首先要找到该元素，有三种方法：通过id，通过标签名，通过类名。其中通过id查找元素的方法最为简单，var x=document.getElementById("intro")，如果未找到元素，x将包含null。通过标签查找元素的方法如下var x=document.getElementById("main"); var y=x.getElementsByTagName("p")。

2.改变HTML元素

      JS能够创建动态的HTML内容，document.write()能够直接向HTML输出流写内容。   

      如需改变HTML元素的内容，可以使用document.getElementById(id).innerHTML=new HTML语句。 

      如需改变HTML元素的属性，可以使用document.getElementById(id).attribute=new value语句。

      如需改变HTML元素的样式，可以使用document.getElementById(id).style.property=new style语句。通过visibility属性可以改变元素的可见性。

3.对事件做出反应

      JS可以对HTML中的事件做出反应，HTML中事件的例子如：当用户点击鼠标时、当网页加载时、当图像加载时、当鼠标移到元素上时、当输入字段被改变时、当提交HTML表单时、当用户触发按键时等。

      如需向HTML元素分配事件，可以使用事件属性，比如向button元素分配onclick事件等。onload和onunload事件会在用户进入和离开页面时被触发，可用于处理cookies。onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。

4.添加和删除HTML元素

      如需向HTML添加新元素，必须首先创建一个新元素，并向其添加元素节点，再向一个已有的元素追加新元素。var para=document.createElement("p");var node=document.createTextNode("这是新段落。");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para)。若要删除HTML元素，需要首先获得该元素的父元素，再删除子元素，var child=document.getElementById("p1"); child.parentNode.removeChild(child);