Что такое текстовый узел, его использование? //document.createTextNode()

Question

Так что я постепенно заменял большую часть моего нормального кода jQuery на нативный Javascript, и я столкнулся с document.createTextNode() и соответствующая документация MDN. После прочтения я немного запутался, что такое текстовый узел.

Я понимаю, что это может быть использовано для размещения текста внутри divДа, но я уверен, что в этом есть нечто большее, чем просто "использовать его, чтобы поместить слова в элементы". Глядя на это, кажется, что текстовый узел также может ссылаться на текст атрибутов.

Может кто-нибудь дать немного больше определения того, что такое текстовый узел и для чего он используется? Есть ли практическое применение для этого, кроме базовых вещей, как это?

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);

Answer 1

Весь просматриваемый HTML-текст на странице (кроме текста в элементах формы или пользовательских встроенных объектов) находится в текстовых узлах. Страница состоит из нескольких различных типов узлов (вы можете увидеть список различных типов узлов здесь: https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType), некоторые из которых могут иметь дочерние узлы, а некоторые из них не могут. Например, div - это узел ELEMENT, который может содержать дочерние узлы. Эти дочерние узлы могут быть другими узлами ELEMENT или они могут быть узлами TEXT, узлами COMMENT или узлами других типов.

Когда вы устанавливаете .innerHTML Свойство узла элемента, оно создает соответствующие узлы и делает их дочерними узлами элемента, для которого установлено свойство innerHTML. Если есть текст в innerHTML Вы устанавливаете, тогда текстовые узлы будут созданы, чтобы держать это.

DOCUMENT_NODE, ELEMENT_NODE а также TEXT_NODE являются наиболее распространенными типами узлов и находятся на каждой странице, которая имеет текст.

В вашем примере кода:

var div = document.createElement('div');
var text = document.createTextNode('Y HALO THAR');
div.appendChild(text);

Это создаст один текстовый узел и поместит его в созданный вами div. Он генерирует ту же структуру DOM, что и эта:

var div = document.createElement('div');
div.innerHTML = 'Y HALO THAR';

В последнем случае система создает для вас текстовый узел.

---

В простом программировании на javascript (jQuery защищает разработчиков от узлов, которые не являются типом ELEMENT_NODE), вы будете встречать текстовые узлы каждый раз, когда вы будете проходить дочерние узлы элемента, в котором есть текст. Вам нужно будет проверить .nodeType каждого ребенка, чтобы знать, является ли это другой элемент или текстовый узел или некоторый другой тип узла.

---

В общем, не так много причин для непосредственного управления текстовыми узлами, так как вы часто можете использовать более высокий уровень .innerHTML собственность проще. Но, чтобы дать вам представление, вот несколько причин, по которым вы можете иметь дело непосредственно с текстовыми узлами:

1. Вы хотите изменить некоторый текст, не затрагивая ни один из элементов вокруг него. .innerHTML создает все новые элементы для затронутых элементов, что убивает все обработчики событий, которые могли быть установлены на них, но устанавливая .nodeValue на текстовом узле не вызывает воссоздания каких-либо элементов.

2. Если вы хотите найти только текст в документе без какой-либо результирующей разметки HTML и точно знать, где находится каждый фрагмент текста в иерархии DOM, вы можете просто найти все текстовые узлы. Например, если вы выполняете текстовый поиск документа и затем выделяете найденный текст, вы, вероятно, будете искать текстовые узлы напрямую.

3. Вы хотите отображать некоторый текст без каких-либо угроз безопасности, поскольку он может содержать другую разметку, которую браузер будет анализировать и интерпретировать, если вы используете .innerHTML, Итак, вы создаете текстовый узел и устанавливаете значение его текста, и браузер не будет вставлять в него HTML. Современные браузеры также могут использовать .textContent свойство элемента вместо .innerHTML решить эту проблему тоже.

Answer 2

innerTextполучить и установить содержимое как простой текст, кодировать и декодировать. когда innerHTML получить и установить содержимое в формате HTML.

var div = document.createElement('div');
div.innerText = 'Y HALO THAR';