javascript(二):DOM

DOM简介

• 是什么:当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）;构造为对象的树
  
• 有什么用: 通过DOM，来访问html文档的所有元素，创建动态的html:
  1. 改变页面中的所有 HTML 元素
  2. 改变页面中的所有 HTML 属性
  3. 改变页面中的所有 CSS 样式
  4. 对页面中的所有事件做出反应

查找html元素

三种方法:通过id；通过标签；通过类名

1. 通过id
   var x=document.getElementById("intro");
2. 通过标签
   本例查找 id="main" 的元素，然后查找 "main" 中的所有 p 元素：

   
       
       
   
        
        
   
         
         var x=document.getElementById("main");
        
        
        
        
   
         
         var y=x.getElementsByTagName("p");
        
        
       
       

3. 通过类名

   
       
       
   
        
        
   
         
         var x-document.getElementsByClassName("intro")
        
        
       
       

改变html元素

1. 改变html输出流
   document.write(Date());
2. 改变html内容
   document.getElementById(id).innerHTML=new HTML text
3. 改变html属性
   document.getElementById(id).attribute=new value

改变html样式

document.getElementById(id).style.property=new style

响应事件

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

1. onclick事件:
   <button onclick="displayDate()">Try it</button>
2. onchange事件:
   常结合对输入字段的验证来使用
   <input type="text" id="fname" onchange="upperCase()">
3. onmouseover和onmouseout事件:
   在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
4. onmousedown和onmouseup事件:
   当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

• EventListener
  element.addEventListener(event, function, useCapture);
  第一个参数是事件的类型 (如 "click" 或 "mousedown").
  第二个参数是事件触发后调用的函数。
  第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的(默认false，冒泡)。

参考

HTML DOM教程