Question

window.getSelection().anchorNode返回有关用户点击以开始选择的节点的大量详细信息，但如何获取该文本节点的属性，如class，id等？

示例：

<span id="word1">Aaa</span>
<span id="word2">Bbb</span>

用户选择这两个跨度中的某些内容，我需要知道他开始选择的位置，无论是#word1还是#word2

Answer 1

猜你需要这个：window.getSelection().anchorNode.parentNode

＆＃13;

window.onclick = function() {
  console.log(window.getSelection().anchorNode.parentNode)
  console.log(window.getSelection().anchorNode.parentNode.className);
  console.log(window.getSelection().anchorNode.parentNode.id)
}

＆＃13;

<p class="cls" id="p1">p tag with class="cls" and id="p1",try to select something</p>

＆＃13;

Answer 2

由于 textNodes没有任何属性，您必须从元素父级获取属性。 select event有明显的支持，因此我使用了mousedown event并注册了Document Object来监听它。为了控制从100种可能性中获取值的位置和时间（记住文档对象将知道除了Window对象之外的任何事件的mousedown事件），我们必须建立两件事：

Event.currentTarget： 事件对象的属性，表示注册到事件的元素。在演示 e.currentTarget 中是文档对象（document。）
Event.target： 事件对象的一个属性，表示事件的来源，对于被点击的元素，这是一个奇特的谈话，已更改在演示 e.target 基本上是document中的任何内容。

以下演示演示了获取已点击元素节点的ID和/或类的方法。

演示

详情在演示中进行了评论

document.addEventListener('mousedown', showAttr, false);

function showAttr(e) {
  // if the node clicked is NOT document...
  if (e.target !== e.currentTarget) {
    /* if the clicked node has a class attribute...
    || log all of its classes in console
    */
    var tgt = e.target;
    if (tgt.hasAttribute('class')) {
      var cList = tgt.classList;
      console.log('class=' + cList);
    }
    /* if the clicked node has an id...
    || log its id in console
    */
    if (tgt.hasAttribute('id')) {
      console.log('id=' + tgt.id);
    }
  }
  return false;
}

.as-console-wrapper {
  width: 30%;
  margin-left: 70%;
  min-height: 100%;
}

main,
main * {
  outline: 1px solid black
}

<main id='base'>
  <h1 class='mainHeading'>Title</h1>

  <ol class='ordered list'>
    <li class='1'>One</li>
    <li class='2'>Two</li>
    <li class='3'>Three</li>
  </ol>
  Text
  <article id='post31' class='test'>
    <h2 class='postHeading'>Title</h2>
    <p class='content text'>Post content</p>
    article text
  </article>
</main>





</main>

获取window.getSelection（）。anchorNode的属性

2 个答案:

演示