javascript DOM模型

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

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

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

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素：var x=document.getElementById("intro");
• 通过标签名找到 HTML 元素：var y=x.getElementsByTagName("p");
• 通过类名找到 HTML 元素：

DOM HTML

改变 HTML 输出流

document.write() 可用于直接向 HTML 输出流写内容

改变 HTML 内容

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

document.getElementById(id).innerHTML=new HTML、

改变 HTML 属性
  
  

   
   
document.getElementById(id).attribute=new value
   
   
例：document.getElementById("image").src="2.jpg";
   
   
DOM HTML
改变 HTML 样式
    
    

     
     
document.getElementById(id).style.property=new style
     
     
例：document.getElementById("p2").style.color="blue";
     
     
tips：“”不要忘记
    
    
    
    

     
     
DOM 事件
    
    
    
    

     
     
HTML 事件属性：
    
    
    
    

     
     如需向 HTML 元素分配 事件，您可以使用事件属性。
    
    
    
    

     
     
<button οnclick="displayDate()">点击这里</button>
     
     
使用 HTML DOM 来分配事件
      
      

       
       
实例
       
       
向 button 元素分配 onclick 事件：
       
       
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>
       
       
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
例：<input type="text" id="fname" οnchange="upperCase()">
离开输入框之后，字母变大写
onfocus事件
        
        

         
         输入时，文本框变色
        
        
        
        

         
         例：<input type="text" οnfοcus="myFunction(this)">
        
        
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
DOM 节点
        
        

         
         
创建新的 HTML 元素
        
        
        
        

         
         例：
        
        
        
        

         
         <div id="div1">
        
        
        
        

         
         <p id="p1">这是一个段落</p>
        
        
        
        

         
         <p id="p2">这是另一个段落</p>
        
        
        
        

         
         </div>
        
        
<script>
var para=document.createElement("p");//创建新的段落para
var node=document.createTextNode("这是新段落。");//创建新的文本节点node
para.appendChild(node);//向para中添加文本节点

var element=document.getElementById("div1");//获取已有的元素
element.appendChild(para);//向已有元素追加新元素para
</script>
删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
实例
         
         

          
          
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");//获取父元素
var child=document.getElementById("p1");//找到需要删除的元素
parent.removeChild(child);
</script>
          
          
更常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素
          
          
var child=document.getElementById("p1");
child.parentNode.removeChild(child);