Как получить символ после элемента в Javascript или JQuery?

Question

Допустим, у меня есть блок HTML вроде этого:

<div class="text">
    Hello <span class="word">world</span>! This is a test example.
</div>

Как мне получить символ сразу после элемента SPAN "word", который в данном случае является (!) Восклицательным знаком точка?

Answer 1

С vanilla JS вы можете использовать Node.nextSibling, чтобы получить следующий узел, а затем Node.textContent и Node.nodeValue, чтобы получить его значение :

const word = document.querySelector('.word');

console.log(word.nextSibling.nodeValue);

<div class="text">
  Hello <span class="word">world</span>! This is a test example.
</div>

Вы можете легко адаптировать это для работы с jQuery:

const $word = $('.word');

// Simply get the native JS object and access `.nextSibling.nodeValue` on that:
console.log($word.get(0).nextSibling.nodeValue);

<div class="text">
  Hello <span class="word">world</span>! This is a test example.
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Обратите внимание на разницу между Node.nextSibling, который возвращает узлы, и NonDocumentTypeChildNode.nextElementSibling, который возвращает только элементов, поэтому он вернет null, если вы используете его в приведенных выше примерах.