DOM详解

演讲者：交互开发课题组

内容提纲

  1. DOM概述
  2. DOM节点类型
  3. Document节点
  4. 案例练习

DOM概述

DOM概述

  • 文档对象模型
  • Document Object Model
  • 将网页转为一个 JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）
  • DOM可以理解成网页的编程接口
  • DOM 不属于JavaScript，但是操作 DOM 是 JavaScript 最常见的任务。

节点

  • DOM的最小组成单位
  • 文档的树形结构（DOM树）由各种不同类型的节点组成
  • 每个节点可以看作是文档树的一片叶子

节点类型

  • Document：整个文档树的顶层节点
  • DocumentType：doctype标签（比如<!DOCTYPE html>）
  • Element：网页的各种HTML标签
  • Attribute：网页元素的属性
  • Text：标签之间或标签包含的文本
  • Comment：注释
  • DocumentFragment：文档的片段

节点树

  • 父节点关系（parentNode）：直接的那个上级节点
  • 子节点关系（childNodes）：直接的下级节点
  • 同级节点关系（sibling）：拥有同一个父节点的节点

Node对象的属性

特征相关的属性

  • nodeName 节点名称
  • nodeType 节点类型
  • nodeValue 节点文本值
    • 只有Text节点、Comment节点、XML文档的CDATA节点有文本值，其他类型的节点一律返回null。
  • textContent 当前节点和它的所有后代节点的文本内容
  • baseURI 当前网页的绝对路径

Node对象的属性

nodeName和nodeType

类型 nodeName nodeType
ELEMENT_NODE 大写的HTML元素名 1
ATTRIBUTE_NODE 等同于Attr.name 2
TEXT_NODE #text 3
COMMENT_NODE #comment 8
DOCUMENT_NODE #document 9
DOCUMENT_FRAGMENT_NODE #document-fragment 11
DOCUMENT_TYPE_NODE 等同于DocumentType.name 10

Node对象的属性

相关节点属性

  • ownerDocument 当前节点所在的顶层文档对象，即document对象
  • nextSibling 紧跟在当前节点后面的第一个同级节点
  • previousSibling 当前节点前面的、距离最近的一个同级节点
  • parentNode 当前节点的父节点
  • childNodes 当前节点的所有子节点的 NodeList集合
  • firstChild、lastChild 第一个最后一个子节点

删除空白文本节点

//删除空白文本节点
function cleanWhitespace(element)   
{   
    //遍历子节点
    for(var i=0; i<element.childNodes.length; i++)   
    {   
        var node = element.childNodes[i];
        //如果是文本节点，空节点   
        if(node.nodeType == 3 && !/\S/.test(node.nodeValue))   
        {   
            node.parentNode.removeChild(node);   
        }   
    }   
}

Node对象的方法

  • appendChild 附加节点
  • hasChildNodes 判断是否有子节点
  • cloneNode 克隆节点
  • insertBefore 在某节点前插入子节点
  • removeChild 删除节点
  • replaceChild 替换节点
  • normalize 清理当前节点内部的所有Text节点

document节点

  • 属性
    • 内部节点属性
    • 节点集合属性
    • 文档信息属性
  • 方法
    • 读写相关方法
    • 查找节点方法
    • 生成节点方法
    • 事件相关方法
    • 其他方法

document节点属性

内部节点属性

  • document.doctype
  • document.documentElement
  • document.defaultView
  • document.body
  • document.head
  • document.activeElement 当前文档中获得焦点的那个元素

document节点属性

文档信息属性

  • document.documentURI，document.URL
  • document.domain
  • document.lastModified
  • document.location
  • document.referrer，document.title，document.characterSet
  • document.readyState
  • document.designMode
  • document.implementation
  • document.compatMode
  • document.cookie

解析URL

//解析URL

document节点方法

读写方法

  • document.open()，document.close()
  • document.write()，document.writeln()

document节点方法

查找节点的方法

  • document.querySelector()，document.querySelectorAll()
  • document.getElementsByTagName()
  • document.getElementsByClassName()
  • document.getElementsByName()
  • getElementById()
  • document.elementFromPoint()

生成节点的方法

  • document.createElement()
  • document.createTextNode()
  • document.createAttribute()
  • document.createDocumentFragment()

案例练习

交互开发

旨为前端开发工程师的前端开发课程