前端面试题目整理_前端面试题目100及最佳答案资源-CSDN文库

需积分: 42 198 浏览量 2018-03-25 12:23:24 上传评论收藏 37KB DOCX 举报

### 前端面试知识点详解 #### 一、Node API 和 DOM 操作 **1.1 节点属性** 1. **Node.nodeName**: 返回节点的名称，例如 `<div>` 的 nodeName 是 `DIV`。 2. **Node.nodeType**: 返回节点类型的整数值。不同类型的节点有特定的数字代码： - `1`: 元素节点（Element Node） - `2`: 属性节点（Attribute Node） - `3`: 文本节点（Text Node） - `4`: CDATA 节点 - `5`: 实体引用节点（Entity Reference Node） - `6`: 实体节点（Entity Node） - `7`: 处理指令节点（Processing Instruction Node） - `8`: 注释节点（Comment Node） - `9`: 文档节点（Document Node） - `10`: 文档类型节点（Document Type Node） - `11`: 文档片段节点（Document Fragment Node） - `12`: Notation 节点 3. **Node.nodeValue**: 返回 Text 或 Comment 节点的文本值。对于其他类型的节点，此属性通常为 `null`。 4. **Node.textContent**: 返回当前节点及其所有后代节点的文本内容。可以读取也可以设置。 5. **Node.baseURI**: 返回当前节点的绝对 URL。 6. **Node.ownerDocument**: 返回当前节点所在的顶层文档对象，即 `document`。 7. **Node.nextSibling**: 返回紧跟在当前节点后面的第一个兄弟节点。 8. **Node.previousSibling**: 返回当前节点前面的、距离最近的一个兄弟节点。 9. **Node.parentNode**: 返回当前节点的父节点。 10. **Node.parentElement**: 返回当前节点的父 Element 节点。 11. **Node.childNodes**: 返回当前节点的所有子节点组成的 `NodeList` 对象。 12. **Node.firstChild**: 返回当前节点的第一个子节点。 13. **Node.lastChild**: 返回当前节点的最后一个子节点。 14. **Node.children**: 返回当前节点的所有 Element 子节点。 15. **Node.firstElementChild**: 返回当前节点的第一个 Element 子节点。 16. **Node.lastElementChild**: 返回当前节点的最后一个 Element 子节点。 17. **Node.childElementCount**: 返回当前节点所有 Element 子节点的数量。 **1.2 节点操作** 1. **Node.appendChild(node)**: 向节点添加最后一个子节点。 2. **Node.hasChildNodes()**: 返回布尔值，表示当前节点是否有子节点。 3. **Node.cloneNode(deep)**: 默认为 `false` (仅克隆节点)，当 `deep` 为 `true` 时克隆节点及其所有后代节点。 4. **Node.insertBefore(newNode, referenceNode)**: 在指定子节点 `referenceNode` 之前插入新的子节点 `newNode`。 5. **Node.removeChild(node)**: 删除节点，在要删除节点的父节点上操作。 6. **Node.replaceChild(newChild, oldChild)**: 替换节点。 7. **Node.contains(node)**: 返回一个布尔值，表示参数节点是否为当前节点的后代节点。 8. **Node.compareDocumentPosition(node)**: 返回一个 7 位的二进制值，表示参数节点和当前节点的关系。 9. **Node.isEqualNode(otherNode)**: 返回布尔值，用于检查两个节点是否相等。 10. **Node.normalize()**: 清理当前节点内部的所有 Text 节点。它会去除空的文本节点，并且将毗邻的文本节点合并成一个。 **1.3 Document 节点属性** 1. **document.doctype**: 返回文档类型声明。 2. **document.documentElement**: 返回当前文档的根节点。 3. **document.defaultView**: 返回 document 对象所在的 window 对象。 4. **document.body**: 返回当前文档的 `<body>` 节点。 5. **document.head**: 返回当前文档的 `<head>` 节点。 6. **document.activeElement**: 返回当前文档中获得焦点的那个元素。 7. **节点集合属性**: - **document.links**: 返回当前文档的所有 `<a>` 元素。 - **document.forms**: 返回页面中所有表单元素。 - **document.images**: 返回页面中所有 `<img>` 元素。 - **document.embeds**: 返回网页中所有 `<embed>` 元素。 - **document.scripts**: 返回当前文档的所有 `<script>` 元素。 - **document.styleSheets**: 返回当前网页的所有样式表。 8. **文档信息属性**: - **document.documentURI**: 表示当前文档的网址。 - **document.URL**: 返回当前文档的网址。 - **document.domain**: 返回当前文档的域名。 - **document.lastModified**: 返回当前文档最后修改的时间戳。 - **document.location**: 返回 location 对象，提供当前文档的 URL 信息。 - **document.referrer**: 返回当前文档的访问来源。 - **document.title**: 返回当前文档的标题。 - **document.characterSet**: 返回渲染当前文档的字符集，如 UTF-8、ISO-8859-1。 - **document.readyState**: 返回当前文档的状态。以上是关于前端开发中常用的 DOM 操作和文档属性的详细解释，这些都是面试时经常被问到的基础知识点，掌握这些内容对于前端工程师来说至关重要。通过理解和运用这些概念，可以更高效地进行 Web 开发工作。

资源推荐

资源详情

资源评论