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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

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

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

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

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

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

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