对于B/S开发，客户端与服务器端的交互是非常必要的，JavaScript的提出解决了很多问题，AJAX的提出也解决了异步通信的问题，更加为用户着想了。而DOM是其中非常基础的知识，在学习AJAX的同时，我学习了一下DOM的相关操作，这篇重点讲一下HTML DOM的相关内容，其实就是在HTML网页上进行的各种操作。

[DOM]javascript DOM操作_第1张图片

          一，概述： DOM（对象文档模型（Document Object Model）），是W3C组织推荐的处理可扩展置标语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。也就是说，这是表示和处理一个HTML或XML文档的常用方法。DOM技术是用户页面可以动态的变化，从而大大使页面的交互性增强。但是DOM必须通过JavaScript等脚本语言来进行读取，改变HTML、XHTML以及XML等文档。


        简单说就是DOM规定了HTML，XML等的一些规范，使JavaScript可以根基这些规范来进行各种操作。而这些规范我们可以用树来形象的表示：

[DOM]javascript DOM操作_第2张图片


       通过这样的树，我们就可以很快找到我们想要操作的节点，进而进行各种属性，方法，事件等的操作。

 

      二，通过JavaScript对HTML网页内容进行操作：


              1，首先需要我们查找要操作的节点：

a,通过id查找：

   Eg: varx=document.getElementById("name")


b，通过标签名：

Eg:查找ID为name标签下的所有p标签

     varx=document.getElementById("name");
    vary=x.getElementsByTagName("p");


c，通过类名：

 Eg:varx=document.getElementsByClassName("name");

  注意：这种情况在IE5，6，7，8中无效。（网上这么说，等待实验）


 2，修改插好出来的节点的属性，内容，样式等：

       首先看一下常用的HTML DOM属性:

[DOM]javascript DOM操作_第3张图片


        a,改变HTML的属性（注意HTML的属性和HTML DOM属性的区分）：

       Eg:改变元素的src属性：          

 


       b,改变HTML的内容：

        Eg:


      c,改变HTML的样式：

 

总之对于HTML各种的修改需要对HTML的各种属性非常熟悉，通过JavaScript来进行各种修改！


      三，下边看一下关于节点本身的处理：

              首先了解一下节点的相关知识：   

              父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。看这个图：

[DOM]javascript DOM操作_第4张图片


 1，添加新的节点：

[javascript]  view plain copy print ?
  1. "font-size:18px;">    
  2.       
  3.       
  4.       
  5.     "div1">  
  6.     "p1">这是一个段落。

      
  7.     "p2">这是另一个段落。

      
  8.     
  
  •       
  •       
  •       
  •       
  •       
  •   

    •

    2,删除某个节点元素：

    [javascript]  view plain copy print ?
    1. "font-size:18px;">    
    2.       
    3.       
    4.       
    5.     "div1">  
    6.     "p1">这是一个段落。

        
    7.     "p2">这是另一个段落。

        
    8.     
      
  •       
  •       
  •       
  •       
  •       
  •