本文共 2026 字，大约阅读时间需要 6 分钟。

• DOM： Document Object Model 文档对象模型
  • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
• W3C DOM 标准被分为 3 个不同的部分：
  • 核心 DOM - 针对任何结构化文档的标准模型
    • Document： 文档对象
    • Element： 元素对象
    • Attribute： 属性对象
    • Text： 文本对象
    • Comment: 注释对象
    • Node： 节点对象，其他5个的父对象
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

• Document：文档对象
• 1.创建(获取)： 在html dom模型中可以使用window对象来获取。
  • window.document
  • document
• 2.方法：
  • 1.获取 Element 对象：
    • getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一。
    • getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。
    • getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组。
    • getElementsByName() : 根据name属性值获取元素对象们。返回值是一个数组。
  • 2.创建其他DOM对象：
    • createAttribute(name)
    • createComment()
    • createElement() 创建新的元素节点。
    • createTextNode()创建新的文本节点。
• 示例：

    
           
   
    div1
   
    
   
    div2
   
        
   
    div3
   
        
   
    div4
   
    
   
    div5
   
                

• Element：元素对象
• 1.获取/创建： 通过document来获取和创建.
• 2.方法：
  • removeAttribute()：删除属性
  • setAttribute()：设置属性
• 示例：

    
           连接        

• Node：节点对象，其他5个的父对象
  • 特点： 所有dom对象都可以被认为是一个节点.
• 方法：
  • CRUD dom树：
    • appendChild()：向节点的子节点列表的结尾添加新的子节点。
    • removeChild() ：删除（并返回）当前节点的指定子节点。
    • replaceChild()：用新节点替换一个子节点。
• 属性：
  • parentNode : 返回节点的父节点。
• 示例：

    
           
   
   
   
   
       
   
        
    
     div2
    
        div1    
   
    删除子节点    添加子节点    
       

    
           
   
    
        
        
        
    
   
   
        
     学生信息表
    
        
     
              
编号
              
姓名
              
性别
              
操作
         
         
              
1
              
hehe
              
男
              
删除
         
         
              
2
              
xww
              
男
              
删除
         
         
              
3
              
jianjie
              
?
              
删除
         
    
   

• HTML DOM
• 1.标签体的设置和获取： innerHTML
• 2.使用 html元素对象的属性
• 3.控制元素样式
  • (1).使用元素的style属性来设置;
  • (2).提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
• 示例：

    
       
   
        innerHTML
   
   
        innerHTML控制样式1
   
   
        innerHTML控制样式2
   

转载地址：http://hzgwz.baihongyu.com/