一 什么是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() | 返回与指定的选择器组匹配的文档中的元素列表 |
网友评论