在文档中查找节点答案

【问题标题】：Find node in Document在文档中查找节点
【发布时间】：2018-12-16 11:23:08
【问题描述】：

我通过document.getSelection().anchorNode 获得了一个节点，我想将其视为一个元素，就好像它是由查询选择器获取的一样。假设我的节点是一个包含字符串 hello world 的 p 元素

<p>hello world</p>

节点出现在此处的 DOM 中：

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="/master.css" />
    </head>
    <body>
        <p>hello world</p>
    </body>
</html>

我想从文档中获取<p> 元素。但是，一个看起来相同的节点可能会出现多次，我想获取该节点来自的 HTML 元素。

谢谢

【问题讨论】：

你说的是什么意思？“我想将其视为一个元素，就好像它是由查询选择器获取的一样”？如果节点是您示例中的 p 元素，则它与您从 querySelector 获得的对象完全相同。
document.getSelection().anchorNode instanceof HTMLElement === false
那么它不是 p 元素。它可能是其中的一个文本节点。
那为什么父节点的原型与 HTMLElement 的原型不匹配呢？
你做了什么？？？它正在工作！

标签： javascript html dom element

【解决方案1】：

假设我的节点是一个包含字符串 hello world 的 p 元素

那么anchorNode 将完全与您从querySelector 获得的对象相同。

但如果是p 元素内中的Text 节点，则您需要使用anchorNode.parentElement 来访问p 元素。

现场示例：

var lastNode = null;
setInterval(function() {
  var selection = window.getSelection();
  var node = (selection && selection.anchorNode) || null;
  if (node === lastNode) {
    return;
  }
  lastNode = node;
  if (!node) {
    console.log("(No selection)");
  } else {
    var result = "Node name is " + node.nodeName;
    if (node.nodeType === 3) { // Text
      console.log(result, "parent element:", node.parentElement);
    } else {
      console.log(result);
    }
  }
}, 250);

Select some text, an analysis of <code>window.getSelection().anchorNode</code>'s result will appear in the console.
<p>hello world</p>

【讨论】：