一.DOM概述

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型” （Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删 内容）

浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节 点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点 和最终的树状结构，都有规范的对外接口

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说， DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方 面，JavaScript 也是最常用于 DOM 操作的语言

节点：

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

节点的类型有七种：

Document：整个文档树的顶层节点

DocumentType：doctype标签

Element：网页的各种HTML标签

Attribute：网页元素的属性（比如class="right"）

Text：标签之间或标签包含的文本

Comment：注释

DocumentFragment：文档的片段

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结 构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是 顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍 生出一个金字塔结构，倒过来就像一棵树

除了根节点，其他节点都有三种层级关系：

父节点关系（parentNode）：直接的那个上级节点

子节点关系（childNodes）：直接的下级节点

同级节点关系（sibling）：拥有同一个父节点的节点

Node.nodeType属性

文档节点（document）：9，对应常量

Node.DOCUMENT_NODE

元素节点（element）：1，对应常量Node.ELEMENT_NODE

属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE

文本节点（text）：3，对应常量Node.TEXT_NODE

文档片断节点（DocumentFragment）：11，对应常量 Node.DOCUMENT_FRAGMENT_NODE

二.document对象_获取元素方法

• document.getElementsByTagName()

  搜索 HTML 标签名，返回符合条件的元 素。它的返回值是一个类似数组对象（HTMLCollection 实例），可以实 时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个 空集。

  注意：如果参数为"*"，则返回文档中全部HTML元素！

• document.getElementsByClassName()

  返回一个类似数组的对象 （ HTMLCollection 实例），包括了所有 class 名字符合指定条件的元素， 元素的变化实时反映在返回结果中。

  注意：参数可以是多个，用空格分开，例如：'box bar'。

• document.getElementsByName()

  用于选择拥有 name 属性的 HTML 元素（比 如

  , , ) 等），返回一个类似数组的的对象 （ NodeList 实例)，因为 name 属性相同的元素可能不止一个

• document.getElementById()

  返回匹配指定 id 属性的元素节点。如果没有 发现匹配的节点，则返回 null

• document.querySelector()

  接受一个 CSS 选择器作为参数，返回匹配该选 择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹 配的节点。如果没有发现匹配的节点，则返回 null

• document.querySelectorAll()

  document.querySelectorAll 方法与 querySelector 用法类似，区别是返回一个 NodeList 对象，包含所有匹配给定选择器的节点

实例：

    
    
    
    


    
你好哇！
    
Hello!
    
    
哈哈哈
    

    
hh
    

三.document对象_创建元素

• document.createElement()

  用来生成元素节点，并返回该节点

• document.createTextNode()

  用来生成文本节点（ Text 实例），并返回该节 点。它的参数是文本节点的内容

• document.createAttribute()

  生成一个新的属性节点（ Attr 实例），并返回 它

• appendChild()

  将内容或子元素方法容器中去！

• setAttributeNode()

  设置属性节点！

实例：

    
    
    
    


    
导航