DOM文档对象模型

每一个HTML文档都被组织成为一个树状结构，每一个HTML文档对应一个树状结构。

DOM数的每一个内容称为节点，节点分为document节点、属性节点和文本节点、注释节点。

节点类型

节点类型常量

常量值

document节点

DOCUMENT_NODE

9

元素节点

ELEMENT_NODE

1

属性节点

ATTRIBUTE_NODE

2

文本节点

TEXT_NODE

3

注释节点

COMMENT_NODE

8

document节点在最顶层，document节点对应整个HTML文档，是操作其他节点的入口。

每一个节点都是一个对应类型的对象。

元素节点

通过DOM对文档执行插入、修改、删除等等操作

获取元素的方法：

  1. document.getElementById
  2. document.getElementsByName
  3. document.getElementsByTagName
  4. document.getElementsByClassName
  5. document.querySelectorAll
  6. document.querySelector

getBoundingClientRect()方法获取元素对于浏览器窗口的位置。

offsetWidth和offsetHeight分别获取元素的宽度和高度【包含边框】。

clientWidth和clientHeight获取元素不包含边框的宽度和高度。

创建元素节点：document.createElement(“节点名”)

创建文本节点：document.createTextNode()

创建属性节点：
document.createAttribute()

innerHTML设置元素节点内容

element.appendChild(‘子节点’)

element.insertBefore(‘新节点’)

element.replaceChild(新节点,旧节点)，替换节点

element.removeChild()，删除节点

DOM克隆节点,cloneNode():

节点对象.cloneNode(true)

其中的参数true，是可选项，如果想克隆子节点，就必须添加传参数true。

form对象常用的属性

属性

描述

action

设置或者返回表单的action属性

elements

表单中所有表单元素的数组，可以通过索引引用其中的表单元素

length

表单元素数量

method

提交方法

name

表单名称

target

表单提交的数据所显示的frame或者窗口

onreset

重置表单的方法

onsubmit

提交表单的方法

表单的方法：

  1. reset()
  2. submit()

document.forms[0],0表示表单的第一个表单元素

document.formName:获取表单的name属性