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

10.9 DOM 概述

DOM（Document Object Model，文档对象模型）是将标记语言文档的各个组成部分封装为对象，允许通过这些对象对文档进行创建、读取、更新和删除（CRUD）操作。W3C DOM 标准被分为三个部分：核心 DOM、XML DOM 和 HTML DOM。

核心 DOM 是对任何结构化文档的标准模型，主要包括以下核心对象：

• Document：文档对象，代表整个文档。
• Element：元素对象，代表文档中的标签。
• Attribute：属性对象，代表标签的属性。
• Text：文本对象，代表标签中的文本内容。
• Comment：注释对象，代表标签中的注释。
• Node：节点对象，其他5个对象的父对象。

10.10 DOM_Document 对象

Document 对象是 DOM 中的核心对象，代表整个 HTML 文档。在 HTML DOM 中，可以通过 window.document 或 document 获取文档对象。

创建（获取）Document 对象

• window.document：通过窗口对象获取文档对象。
• document：直接引用文档对象。

Document 对象的方法

• 获取元素对象：

  • getElementById()：根据 id 属性值获取元素对象。
  • getElementsByTagName()：根据标签名称获取所有元素对象。
  • getElementsByClassName()：根据 class 属性值获取所有元素对象。
  • getElementsByName()：根据 name 属性值获取所有元素对象。

• 创建 DOM 对象：

  • createAttribute(name)：创建新的属性对象。
  • createComment()：创建新的注释对象。
  • createElement(name)：创建新元素对象。
  • createTextNode(text)：创建新文本对象。

示例

10.11 DOM_Element 对象

Element 对象是 DOM 中的重要对象，代表 HTML 标签。可以通过 document 对象获取或创建元素对象。

Element 对象的方法

• 属性操作：
  • removeAttribute(name)：删除指定属性。
  • setAttribute(name, value)：设置指定属性的值。

示例

链接

10.12 DOM_Node 对象

Node 对象 是 DOM 中的基石，所有 DOM 对象都是 Node 的子对象。Node 对象的主要特点是可以通过父节点（parentNode）和子节点（children）进行 DOM 操作。

Node 对象的方法

• CRUD 操作：
  • appendChild(node)：向节点的子节点列表末尾添加新子节点。
  • removeChild(node)：删除当前节点的指定子节点。
  • replaceChild(newNode, oldNode)：用新节点替换旧节点。

示例

   
   
删除子节点添加子节点

10.13 DOM_Node 案例：动态表格

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

10.14 HTML DOM

HTML DOM 是基于 HTML 文档的 DOM 模型，主要用于对 HTML 元素进行操作。常见的操作包括：

示例

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