あるtextにonmouseoverしたらそのtextのelement情報を取得する方法

以下のようなテキストからonmouseoverでイベントを取得してあるtextにマウスを当てた時、該当テキストの情報を取得したいです。

<span id="test" style="font-weight:bold;">sed ullamcorper id,</span> eleifend in quam. Nulla facilisi. Aliquam vitae orci arcu. Aenean a nulla volutpat ante ultrices euismod

document.onmouseover = function(){
  
};

上記のテキストでは

<span id="test" style="font-weight:bold;">sed ullamcorper id,</span>

この部分にマウスを当てた時、今当ててるテキストのelement情報を取得してconsole.logに表示したいです。
もし参考にできる情報がありましたら教えていただければ大変助かります。

以前はテキストをhighlightした時、選択されたtxtのelement情報を取得する方として以下のようなメソッドを使いました。

window.getSelection().anchorNode.parentNode

上記のような方法と似た感じで取得する方法がありましたらご教示いただけますか。

yambejp

2018/03/07 00:29

「テキストのelement情報」とは何でしょう？具体的に何が表示される想定ですか？

Kimsehwa

2018/03/07 07:25

getSelectionのようにマウスを当てるだけで当てたテキストの値が表示すればと思いました。sed ullamcorper idにマウスを当てると「sed ullamcorper id」という値が取得できることを想定してます。

行動規範の内容に同意します

回答1件

ベストアンサー

有効範囲をどこまでとりたいかによりますね
たとえばspanだけでいいのか、他のタグまで参照したいのかなど仕様によります
参考：

javascript
1
2<html>
3<head>
4<script>
5document.addEventListener('mouseover',function(e){
6  var t=e.target;
7  if(t.nodeName=="SPAN" || t.nodeName=="BODY"){
8    console.log(t.textContent);
9  }
10});
11</script>
12</head>
13<body>
14<span id="test" style="font-weight:bold;">sed <span>ullamcorper</span> id,</span> eleifend in quam. Nulla facilisi. Aliquam vitae orci arcu. Aenean a nulla volutpat ante ultrices euismod
15</body>
16</html>