javascript常用DomAPI总结资源-CSDN文库

需积分: 33 103 浏览量 2017-07-28 08:55:07 上传评论收藏 29KB DOCX 举报

### JavaScript DOM API 总结 #### 一、概述 JavaScript 的 Document Object Model (DOM) API 是一种用于 HTML 和 XML 文档的标准编程接口。通过 DOM API，开发者能够动态地访问、更新文档的内容、结构和样式。本文将对原生 JavaScript 中常用的 DOM 节点相关 API 进行详细总结。 #### 二、节点属性与方法 ##### 1. Node 节点属性 - **Node.nodeName**: 返回节点名称，只读。 - **Node.nodeType**: 返回节点类型的常数值，只读。 - **Node.nodeValue**: 返回 Text 或 Comment 节点的文本值，只读。 - **Node.textContent**: 返回当前节点和它的所有后代节点的文本内容，可读写。 - **Node.baseURI**: 返回当前网页的绝对路径。 - **Node.ownerDocument**: 返回当前节点所在的顶层文档对象，即 document。 - **Node.nextSibling**: 返回紧跟在当前节点后面的第一个兄弟节点。 - **Node.previousSibling**: 返回当前节点前面的、距离最近的一个兄弟节点。 - **Node.parentNode**: 返回当前节点的父节点。 - **Node.parentElement**: 返回当前节点的父 Element 节点。 - **Node.childNodes**: 返回当前节点的所有子节点。 - **Node.firstChild**: 返回当前节点的第一个子节点。 - **Node.lastChild**: 返回当前节点的最后一个子节点。 - **Node.children**: 返回指定节点的所有 Element 子节点。 - **Node.firstElementChild**: 返回当前节点的第一个 Element 子节点。 - **Node.lastElementChild**: 返回当前节点的最后一个 Element 子节点。 - **Node.childElementCount**: 返回当前节点所有 Element 子节点的数目。 ##### 2. Node 节点方法 - **Node.appendChild(node)**: 向节点添加最后一个子节点。 - **Node.hasChildNodes()**: 返回布尔值，表示当前节点是否有子节点。 - **Node.cloneNode(true)**: 默认为 false（克隆节点），true（克隆节点及其属性，以及后代）。 - **Node.insertBefore(newNode, oldNode)**: 在指定子节点之前插入新的子节点。 - **Node.removeChild(node)**: 删除节点，在要删除节点的父节点上操作。 - **Node.replaceChild(newChild, oldChild)**: 替换节点。 - **Node.contains(node)**: 返回一个布尔值，表示参数节点是否为当前节点的后代节点。 - **Node.compareDocumentPosition(node)**: 返回一个 7 个比特位的二进制值，表示参数节点和当前节点的关系。 - **Node.isEqualNode(node)**: 返回布尔值，用于检查两个节点是否相等。 - **Node.normalize()**: 用于清理当前节点内部的所有 Text 节点。它会去除空的文本节点，并且将毗邻的文本节点合并成一个。 ##### 3. ChildNode 接口 - **Node.remove()**: 用于删除当前节点。 - **Node.before()**: 将指定的节点插入到当前节点之前。 - **Node.after()**: 将指定的节点插入到当前节点之后。 - **Node.replaceWith()**: 用新的节点替换当前节点。 ##### 4. Document 节点 - **document.doctype**: 返回文档类型定义。 - **document.documentElement**: 返回当前文档的根节点。 - **document.defaultView**: 返回 document 对象所在的 window 对象。 - **document.body**: 返回当前文档的 `<body>` 节点。 - **document.head**: 返回当前文档的 `<head>` 节点。 - **document.activeElement**: 返回当前文档中获得焦点的那个元素。 ##### 5. 节点集合属性 - **document.links**: 返回当前文档的所有 `<a>` 元素。 - **document.forms**: 返回页面中所有表单元素。 - **document.images**: 返回页面中所有图片元素。 - **document.embeds**: 返回网页中所有嵌入对象。 - **document.scripts**: 返回当前文档的所有脚本。 - **document.styleSheets**: 返回当前网页的所有样式表。 ##### 6. 文档信息属性 - **document.documentURI**: 表示当前文档的网址。 - **document.URL**: 返回当前文档的网址。 - **document.domain**: 返回当前文档的域名。 - **document.lastModified**: 返回当前文档最后修改的时间戳。 - **document.location**: 返回 location 对象，提供当前文档的 URL 信息。 - **document.referrer**: 返回引用当前文档的 URL。 #### 三、总结以上总结了原生 JavaScript 中 DOM 相关 API 的核心部分，包括节点属性、节点方法、文档属性等。掌握这些 API 可以帮助开发者更加灵活地操作网页元素，实现丰富的交互效果。在实际开发过程中，根据需求选择合适的 API 能够提高代码效率和可维护性。

资源推荐

资源详情

资源评论