DOM 增删改查举例

一 什么是DOM

DOM是HTML与JavaScript相互作用的接口,DOM不属于JavaScript,它是浏览器的一部分.使用HTML DOM ,JavaScript可以访问和更改HTML文档的所有元素.

HTML DOM（文档对象模型）

当网页加载时，浏览器会创建一个名为document的一个对象.

该HTML DOM模型构造对象的树形图：

在使用DOM的情况下,我们能用JavaScript做些什么?

• JavaScript可以更改页面中的所有HTML元素
• JavaScript可以更改页面中的所有HTML属性
• JavaScript可以更改页面中的所有CSS样式
• JavaScript可以删除现有的HTML元素和属性
• JavaScript可以添加新的HTML元素和属性
• JavaScript可以对页面中的所有现有HTML事件做出反应
• JavaScript可以在页面中创建新的HTML事件

二 HTML DOM文档对象

文档对象表示您的网页。
如果要访问HTML页面中的任何元素，则始终始终访问文档对象。

1. 增

方法	功能	用法
createElement(element)	创建元素	用法
appendChild(element)	把创建的元素添加为指定节点最后一个子元素	用法
write(text)	在页面上打印文本	用法
insertBefore(element)	在指定的子节点前面插入新的子节点	用法
createAttribute()	创建 class 属性	用法
createTextNode()	创建文本节点	用法
.classList.add	为 xxx 元素添加 class	用法

2. 删

方法	功能	用法
remove()	删除元素	用法
removeChild()	删除一个元素的子元素	用法

3. 改

方法	功能	用法
cloneNode()	拷贝元素(包括所有属性和值)	用法
replaceChild()	替换子节点	用法
setAttribute()	把指定属性设置或修改为指定的值	用法
.innerHTML	修改元素内容	用法
.attribute	修改元素属性	用法
.style.property=new style	修改元素CSS	用法

4. 查

方法	功能
getElementById()	返回带有指定 ID 的元素
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表 (数组)
getAttribute()	返回指定的属性值
element.childNodes	获取 body 元素的子节点集合 (数组)
getElementsByName()	获取相同名称(name)的元素(数组)
querySelector()	返回文档中匹配指定的选择器组的第一个元素 测试
querySelectorAll()	返回与指定的选择器组匹配的文档中的元素列表