Что Такое Текстовый Узел, Его Использование? //документ.createTextNode()

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

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

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

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

1 ответов

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

при установке .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 hieararchy, вы можете просто искать все текстовые узлы. Например, если вы делали текстовый поиск документа, а затем выделение найденного текста, вы, вероятно, будете искать текстовые узлы напрямую.

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

51