DOM 增删改查举例
2017-04-17 本文已影响0人
流光号船长
一 什么是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() | 返回与指定的选择器组匹配的文档中的元素列表 |
