Javascript-форум - Как использовать getElementsByClassName при выделении TextRange?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как использовать getElementsByClassName при выделении TextRange? (https://javascript.ru/forum/misc/83808-kak-ispolzovat-getelementsbyclassname-pri-vydelenii-textrange.html)

Как использовать getElementsByClassName при выделении TextRange?

Здравствуйте, читаю статью https://learn.javascript.ru/range-textrange-selection. Здесь приведены несколько примеров использование Range и TextRange. В основном все примеры связаны с getElementById. Как использовать getElementByClassName.

Вот так работает.

var target = document.getElementById('ex5').getElementsByTagName('span')[0];

а так нет.

var target = document.getElementsByClassName('fr-element fr-view').getElementsByTagName('span')[0];

Полностью пример:

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
<div class="fr-element fr-view" style="min-height: 350px;"> 
Снова будем выделять <span>бабулю</span>, на этот раз без поиска.
</div>
<div id="ex5" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
   Снова будем выделять <span>бабулю</span>, на этот раз без поиска.
  </div> 
  <div>
    <input onclick="setSelection()" type="button" value="Выделить бабулю">
  </div>
  <script>
 // 
  
  
    function setSelection() {
       var target = document.getElementById('ex5').getElementsByTagName('span')[0];
      ///var target = document.getElementsByClassName('fr-element fr-view').getElementsByTagName('span')[0];
      //document.getElementByClassName('fr-element fr-view');
      var rng, sel;
      if (document.createRange) {
        rng = document.createRange();
        rng.selectNode(target)
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(rng);
        console.log(rng);
      } else {
        var rng = document.body.createTextRange();
        rng.moveToElementText(target);
        rng.select();
      }
    }
  </script>


</body>

</html>

Цитата:

Сообщение от Katy93

Вот так работает.

так и пишите так же.
var target = document.getElementsByClassName('fr-element fr-view')[0].getElementsByTagName('span')[0];
или так

var target = document.querySelector('.fr-element.fr-view > span');

Цитата:

Сообщение от Katy93 (Сообщение 544237)

Вот так работает.

var target = document.getElementById('ex5').getElementsByTagName('span')[0];

а так нет.

var target = document.getElementsByClassName('fr-element fr-view').getElementsByTagName('span')[0];

document.getElementsByClassName()

Возвращает целую коллекцию элементов. Для работы с ней нужно использовать циклы.

Katy93, как вариант использовать другой метод получения элементов...

const target = document.querySelector('.fr-element fr-view span')

или

const target = document.querySelectorAll('.fr-element fr-view span')

Спасибо, получилось.