js-dom

DOM的概述

DOM（document object model）文档对象模型，顾名思义他就是用于操作对应的文档的，也就是操作你写的html文档。DOM是一个遵从文档流的语句。所以他是同步机制。

DOM的分类

1.document dom操作中最大的对象(表示当前操作的html文档)

2.element 元素对象 (表示的是对应的标签元素)

3.attribute 元素对象(表示的所有的html标签里面的属性)

4.text文本对象 (表示在html代码里的所有文本)

document (文档对象)（*）

方法

获取 通过对应的标识来获取element元素

document.getElementById() //通过id名来获取

document.getElementByTagname()//通过标签名获取

document.getElementsByClassName 通过类名获取 （HTMLCollection）

document.getElementsByName 通过name属性获取 （NodeList）

document.querySelector 通过选择器获取第一个 （Element）

document.querySelectorAll 通过选择器获取所有（NodeList）

创建的相关方法 创建对应的节点对象

document.createElement 创建元素节点

document.creatAttribute 创建属性节点

document.creatTextNode 创建文本节点

属性

获取属于文档的相关内容

document.body获取body

document.html获取html

document.forms获取forms

这些元素可以直接点出来

Element 元素对象（*）

方法

获取的方法（在元素里面获取元素）（跟对应的document的获取元素方法一致）

element.getElementById()
element.getElementsByClassName()
element.getElementsByName()
element.getElementsByTagName()
element.querySelector()

添加的方法 （在元素里面添加元素 或者是添加text 添加到对应的元素中去）

追加到末尾的方法

append(追加多个)

appendchild(追加一个,只支持node对象)

插入到某个子元素之前

insertBefore 插入元素到某个子元素之前(参数1 需要传入的元素.参数2子元素)

删除方法

remove 删除自身

removeChild删除自身下面的子元素

修改方法

replaceChild 一对一替换

replaceChildren 替换所有的元素 变成你传入的(传入的参数)

克隆的方法

cloneNode

属性操作的相关方法 (对于所有的属性都可以进行操作)

获取属性 getAttribute(attrName)

设置属性 setAttribute(attrName,attrValue)

删除属性 removeAttribute(attrName)

属性

基础属性

id属性 (获取/设置id值)

cllassName(获取/设置属性名)

style属性(获取对应的样式/设置对应的样式)

title属性(获取/设置title属性)

tagName属性(只读属性)

innerHTML属性(显示的html内容 编译对应的html代码)

innerText属性(显示文本 不能编译html的代码)

节点相关属性（只读属性）

• previousElementSibling 前面的元素

• nextElementSibling 后面的元素

• parentElement 父元素

• children 子元素集合 （HTMLCollection）

Node

DOM中的节点分类

元素节点 element

属性节点 attributeNode

文本节点 textNode

节点相关的属性

节点划分的属性 （*）

nodeName 节点名

nodeType 节点类型

nodeValue 节点值

节点相关的方法 （*）

• replaceChild 替换子节点

• appendChild 添加子节点

• removeChild 删除子节点

• insertBefore 插入节点到子节点前面

• cloneNode 克隆节点

• replaceChildren 替换所有子节点

• append 添加多个子节点

• remove 移除自己及所有的子节点

操作属性节点的方法

• setAttributeNode （属性节点 Attribute对象）

• getAttributeNode （返回的是一个属性节点 Attribute）

• removeAttributeNode （根据对应的属性节点删除）