在文档中查找节点

时间:2018-12-16 11:23:09

标签: javascript html dom element

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

<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元素。

谢谢

1 个答案:

答案 0 :(得分:1)

  

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

然后,anchorNode完全与您从querySelector获得的对象相同。

但是,如果p元素位于文本节点 之内,则需要使用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>