回顾文档对象模型 (DOM)（四）

一、URL

接口用于解析，构造，规范化和编码 URLs。 它通过提供允许您轻松阅读和修改URL组件的属性来工作。 通常，通过在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。 然后，您可以轻松读取URL的已解析组成部分或对URL进行更改。

const url = new URL(url [, base])

url
是一个表示绝对或相对 URL 的 DOMString。如果url 是相对 URL，则会将 base 用作基准 URL。如果 url 是绝对URL，则无论参数url是否存在，都将被忽略。
base 可选
是一个表示基准 URL 的 DOMString，在 url 是相对 URL 时，它才会起效。如果未指定，则默认为 ‘’。

let m = 'https://developer.mozilla.org';
let a = new URL("/", m);                                // => 'https://developer.mozilla.org/'
let b = new URL(m);                                     // => 'https://developer.mozilla.org/'

        new URL('en-US/docs', b);                      // => 'https://developer.mozilla.org/en-US/docs'
let d = new URL('/en-US/docs', b);                     // => 'https://developer.mozilla.org/en-US/docs'
        new URL('/en-US/docs', d);                     // => 'https://developer.mozilla.org/en-US/docs'
        new URL('/en-US/docs', a);                     // => 'https://developer.mozilla.org/en-US/docs'
        
        new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
                                                       // => 'https://developer.mozilla.org/en-US/docs'
                                                       
        new URL('/en-US/docs', '');                    // Raises a TypeError exception as '' is not a valid URL
        new URL('/en-US/docs');                        // Raises a TypeError exception as '/en-US/docs' is not a valid URL
        new URL('http://www.example.com', );           // => 'http://www.example.com/'
        new URL('http://www.example.com', b);          // => 'http://www.example.com/'

        new URL("//foo.com", "https://example.com")    // => 'https://foo.com' (see relative URLs)

hash 包含’#'的USVString，后跟URL的片段标识符。
host 一个USVString，其中包含域（即主机名），后跟（如果指定了端口）“：”和URL的端口。
hostname包含 URL 域名的 USVString。
href包含完整 URL 的 USVString。
origin 只读返回一个包含协议名、域名和端口号的 USVString。
password包含在域名前面指定的密码的 USVString 。
pathname 以 ‘/’ 起头紧跟着 URL 文件路径的 DOMString。
port 包含 URL 端口号的 USVString。
protocol 包含 URL 协议名的 USVString，末尾带 ‘:’。
search 一个USVString ，指示URL的参数字符串； 如果提供了任何参数，则此字符串包括所有参数，并以开头的“？”开头 字符。
searchParams 只读 URLSearchParams对象，可用于访问search中找到的各个查询参数。
username 包含在域名前面指定的用户名的 USVString。

var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
var result = url.protocol; // Returns:"https:"

URL.createObjectURL()

静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

URL.revokeObjectURL()

静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。

 var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }

二、Range

接口表示一个包含节点与文本节点的一部分的文档片段。
可以用 Document 对象的 Document.createRange 方法创建 Range，也可以用 Selection 对象的 getRangeAt 方法获取 Range。另外，还可以通过 Document 对象的构造函数 Range() 来得到 Range。

document.createRange() 返回一个 Range 对象。

var range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

（1）属性
Range.collapsed 只读
返回一个表示 Range 的起始位置和终止位置是否相同的布尔值。
Range.commonAncestorContainer 只读
返回完整包含 startContainer 和 endContainer 的、最深一级的节点。
Range.endContainer 只读
返回包含 Range 终点的节点。
Range.endOffset 只读
返回一个表示 Range 终点在 endContainer 中的位置的数字。
Range.startContainer 只读
返回包含 Range 开始的节点。
Range.startOffset 只读
返回一个表示 Range 起点在 startContainer 中的位置的数字

var range = document.createRange();

range.setStart(startNode,startOffset); 
range.setEnd(endNode,endOffset);
endRangeNode = range.endContainer;

（2）定位方法

Range.setStart()
设置 Range 的起点。
Range.setEnd()
设置 Range 的终点。
Range.setStartBefore()
以其它节点为基准，设置 Range 的起点。
Range.setStartAfter()
以其它节点为基准，设置 Range 的起点。
Range.setEndBefore()
以其它节点为基准，设置 Range 的终点。
Range.setEndAfter()
以其它节点为基准，设置 Range 的终点。
Range.selectNode()
使 Range 包含某个节点及其内容。
Range.selectNodeContents()
使 Range 包含某个节点的内容。
Range.collapse()
将 Range 折叠至其端点（boundary points，起止点，指起点或终点，下同）之一。

（3）编辑方法

Range.cloneContents()
返回一个包含 Range 中所有节点的文档片段。
Range.deleteContents()
从文档中移除 Range 包含的内容。
Range.extractContents()
把 Range 的内容从文档树移动到一个文档片段中。
Range.insertNode()
在 Range 的起点处插入一个节点。
Range.surroundContents()
将 Range 的内容移动到一个新的节点中。

（4）其他方法

Range.compareBoundaryPoints()
比较两个 Range 的端点。
Range.cloneRange()
返回拥有和原 Range 相同的端点的克隆 Range 对象。
Range.detach()
将 Range 从使用状态中释放，改善性能。
Range.toString()
把 Range 的内容作为字符串返回。

range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);

三、Text

文本接口表示 Element or Attr的文本内容。如果元素的内容中没有标记，则它只有一个子级实现包含元素文本的文本。但是，如果元素包含标记，它将被解析为构成其子元素的信息项和文本节点。

（1）该Text.wholeText只读属性返回Text逻辑上相邻的节点的所有文本。文本按文档顺序连接。这允许指定任何文本节点并获取所有相邻文本作为单个字符串。

assert(para.firstChild.wholeText == "Thru-hiking is great!    However, ");

（2）Text.splitText() 方法可以根据指定的偏移量将一个 Text 节点分割成前后两个独立的兄弟节点。

const  p = document.getElementById('p');

// 将 <p> 的内容读取为一个文本节点
const foobar = p.firstChild;

// 将原来的文本节点分割成为内容分别为 foo 和 bar 的两个文本节点
const bar = foobar.splitText(3);

// 创建一个包含了内容为 ' new content ' 的文本节点的 <u> 元素
const u = document.createElement('u');
u.appendChild(document.createTextNode(' new content '));

// 将 <u> 元素插入到后一个文本节点 'bar' 的前面
p.insertBefore(u, bar);

// 现在，HTML 结构就变成了 <p id="p">foo <span>span contents</span> bar</p>

四、TreeWalker

对象用于表示文档子树中的节点和它们的位置。
TreeWalker 可以使用 Document.createTreeWalker() 方法创建。

document.createTreeWalker() 方法，能创建并返回一个 TreeWalker 对象。

treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);

root
是遍历这个 TreeWalker 的根节点(root Node)。通常这是文档的一个元素。
whatToShow 可选
一个无符号长整型，表示一个整合自 NodeFilter 常量属性的位掩码。这是筛选特定类型节点的便捷方式。默认为 0xFFFFFFFF，表示 SHOW_ALL 常量。
filter 可选
一个可选的 NodeFilter，即一个具有 acceptNode 方法的对象，此方法被 TreeWalker 调用以决定是否接受已通过 whatToShow 检查的节点。
entityReferenceExpansion 可选
一个 Boolean 标识，指示当丢弃一个 EntityReference 时是否同时丢弃其子树。

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
  false
);

var nodeList = [];
var currentNode = treeWalker.currentNode;

while(currentNode) {
  nodeList.push(currentNode);
  currentNode = treeWalker.nextNode();
}

treeWalker.currentNode;

var treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
    false
);
root = treeWalker.currentNode; // the root element as it is the first element!

treeWalker.filter;

var treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
    false
);
nodeFilter = treeWalker.filter; // document.body in this case

TreeWalker.root;

var treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
    false
);
root = treeWalker.root; // document.body in this case

treeWalker.firstChild;

var treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
    false
);
var node = treeWalker.firstChild();

5、Worker