最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Get Attributes of window.getSelection().anchorNode - Stack Overflow

programmeradmin8浏览0评论

window.getSelection().anchorNode returns quite a lot of details about the node where the user clicked to start the selection, but how can I get attributes of that text node, like class, id etc.?

Example:

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

The user selects something of these two spans and I need to know where he started the selection, whether in #word1 or in #word2

window.getSelection().anchorNode returns quite a lot of details about the node where the user clicked to start the selection, but how can I get attributes of that text node, like class, id etc.?

Example:

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

The user selects something of these two spans and I need to know where he started the selection, whether in #word1 or in #word2

Share Improve this question edited Oct 29, 2020 at 14:48 Benny Bottema 11.5k10 gold badges75 silver badges104 bronze badges asked Apr 8, 2018 at 9:32 Örom LoidlÖrom Loidl 3862 silver badges14 bronze badges 4
  • 1 text node has classand id? – xianshenglu Commented Apr 8, 2018 at 9:36
  • A text node can't have a class or id – Asons Commented Apr 8, 2018 at 9:38
  • @xianshenglu I think so, if it is something like <span id="myText" class="grey-text">Something</span> ... – Örom Loidl Commented Apr 8, 2018 at 9:38
  • No, even in this case, the TextNode Something will just be a child of the Span#myText Element. – Kaiido Commented Apr 8, 2018 at 11:04
Add a ment  | 

3 Answers 3

Reset to default 6

guess you need this:window.getSelection().anchorNode.parentNode

window.onclick = function() {
  console.log(window.getSelection().anchorNode.parentNode)
  console.log(window.getSelection().anchorNode.parentNode.className);
  console.log(window.getSelection().anchorNode.parentNode.id)
}
<p class="cls" id="p1">p tag with class="cls" and id="p1",try to select something</p>

Since textNodes do not have any attributes you will have to get the attributes from the element parent. The select event has spotty support so I used the mousedown event and registered the Document Object to listen for it. In order to control where and when you get values from among 100 possibilities (remember the Document Object will be aware of mousedown event on anything but the Window Object), we must establish 2 things:

  1. Event.currentTarget: A property of the Event Object, that represents the element registered to the event. In the Demo e.currentTarget is the Document Object (document.)

  2. Event.target: A property of the Event Object that represents the origin of an event, which is fancy talk for the element that was clicked, changed, hovered over, etc. In the Demo e.target is basically anything in the document.

The following Demo demonstrates a way to get the id and/or classes of a clicked element node.

Demo

Details are mented in Demo

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>

This question has been asked a while ago but I found a way to do this, you can access the attribute by doing the following:

window.getSelection().anchorNode.parentElement.getAttribute('your-attribute-name')

This will get the DOM element that surrounds the selected text and with access to the DOM element you can retrieve it's attributes.

发布评论

评论列表(0)

  1. 暂无评论