最近有基于 GatsbyJS 搭建一款开发者文档，深感其强大；其中，在做本地全文检索时，即便用了 GatsbyJS 生态的一些插件，但对于结果的展示，还是费了不少工具来优化；为求其体验尽可能与业界一致甚至更好，用了大量 Web APIs，来优化交互效果；考虑到 Web APIs 实在是多，在此做个记录，以便能后续可以持续学习、沉淀。
Node.contains()，返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。这在动态操作页面内容时，非常有用；浏览器的支持也不错，具体参见如下示例：
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
isInPage(document.querySelector(`#layout .table-of-contents`))
scrollIntoView 方法，会滚动元素的父容器，使被调用 scrollIntoView()的 元素对用户可见。这在用户操控时，非常有用；比如，最近在做文档内部检索，结果页跳转时，可以将涉及搜索关键字的内容，借助 scrollIntoView 方法，滚动到可视区域（顶端对齐，或底部对齐，可依靠参数来指定），使得用户能快速发现。其使用示例如下：
const element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML() 方法。
Note: 如果一个 <div>, <span>, 或 <noembed> 节点有一个文本子节点，该节点包含字符 (&), (<), 或(>), innerHTML 将这些字符分别返回为 &, < 和 > 。使用 Node.textContent 可获取一个这些文本节点内容的正确副本。
该方法在替换网页部分内容，非常有用；最近在处理网页全文检索时，就是采用 innerHTML 方法，来将文本内容，添加高亮标记，具体使用示例如下：
const keyword = '倾城之链'
const dom = document.querySelector(`#layout`)
dom.innerHTML = this.transformContent(dom.innerHTML, keyword)
transformContent(content, keyword) {
return content.replace(new RegExp(keyword, 'ig'), this.wrapKeywordWithMark(keyword))
}
wrapKeywordWithMark(keyword) {
return `<mark class="mark-highlight-keywork">${keyword}</mark>`
}
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串（URLSearchParams 时直接挂载在 window 对象）。此特性在 Web Worker 中可用。其使用示例如下：
如果一个页面的 URL 是 https://example.com/?name=nicejade&age=18 ，你可以这样解析参数 “name” 和 “age”:
let params = new URLSearchParams(document.location.search.substring(1));
let name = params.get("name"); // is the string "nicejade"
let age = parseInt(params.get("age"), 10); // is the number 18
// 查找一个不存在的键名则返回 `<strong>null</strong>`:
let address = params.get("address"); // null
您可能感兴趣的文章
