Здравствуйте, читаю статью
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>