Структура и свойства содержания
Nodetype
Все узлы имеют типы, и в общей сложности 12 типов узлов.
Кода -копия выглядит следующим образом:
Интерфейс узл {
// Nodetype
const unsigned short element_node = 1;
Const unsigned short attruit_node = 2;
Const unsigned short text_node = 3;
Const unsigned Short CDATA_SECTION_NODE = 4;
const unsigned short entity_reference_node = 5;
Const unsigned short entity_node = 6;
Const unsigned Short Processing_instruction_Node = 7;
Const unsigned short Comment_node = 8;
Const unsigned short document_node = 9;
const unsigned short document_type_node = 10;
Const unsigned short document_fragment_node = 11;
Const unsigned короткая нотация_node = 12;
...
}
Двумя наиболее важными узлами являются узлы элементов (1) и текстовые узлы (3). Остальные редко используются.
Например, при перечислении всех узлов дочерних элементов мы можем итерации над ним и использовать ChildNodes [i] .nodeType! = 1 для обнаружения.
Вот код реализации:
Кода -копия выглядит следующим образом:
<тело>
<div> разрешенные читатели: </div>
<ul>
<li> Джон </li>
<li> Боб </li>
</ul>
<!-Узел комментариев->
<Скрипт>
var childnodes = document.body.childnodes
for (var i = 0; i <childnodes.length; i ++) {
if (Childnodes [i] .nodeType! = 1) Продолжить
Блюдо (Childnodes [i])
}
</script>
</body>
*думать
Как будет подсказка следующего кода:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<тело>
<Скрипт>
Alert (document.body.lastchild.nodeType)
</script>
</body>
</html>
nodename, Tagname
Как NodeName, так и Tagname содержат имя узла.
Для документа
Alert (document.body.nodename) // body
Все имена узлов в HTML будут капитализированы.
Когда NodeName не заглавляется
Эта ситуация встречается редко, если вам любопытно, вы можете прочитать следующее.
Вы, вероятно, уже знаете, что есть два способа для браузеров для анализа: HTML -шаблон и __xml -шаблон. Обычно используется схема HTML, но когда для получения документов XML используется технология xmlhttprequest__, используется схема XML.
Узор XML также используется в Firefox, когда тип контента XHTML документа устанавливается на Xmlish.
В режиме __xml имя узла будет сохранено, чтобы тело или тело могло появиться.
Следовательно, если документ XML -HTML загружается с сервера с помощью технологии Xmlhttprequest__, имя узла будет сохранено.
NodeName и __tagname__ одинаковы для элементов.
Тем не менее, неэлементные узлы также имеют атрибуты NodeName, в которых они имеют специальные значения:
Alert (document.nodename) // #document
Большинство типов узлов не имеют атрибута Tagname, а Tagname узла аннотируется в IE!.
Следовательно, вообще говоря, NodeName является более значимым, чем Tagname. Но Tagname похожа на упрощенную версию, поэтому, когда вы обрабатываете только узлы элементов, вы можете использовать ее.
Innerhtml
Innerhtml является частью стандарта HTML5. Пожалуйста, смотрите ссылку для деталей
Это позволяет доступ к содержимому узла в тексте. В следующем примере будет выведено все содержимое документа и заменить их новым контентом.
Кода -копия выглядит следующим образом:
<тело>
<p> абзац </p>
<div> и div </div>
<Скрипт>
Alert (document.body.innerhtml) // Читать текущее содержимое
document.body.innerhtml = 'yaaahoo!' // заменить содержимое
</script>
</body>
Innerhtml будет содержать эффективный HTML. Но браузеры также могут анализировать деформированные HTML.
Innerhtml может использоваться в любом элементном узле. Это очень, очень полезно.
Innerhtml ловушки
Innerhtml не так просто, как кажется. У него есть некоторые подводные камни, ожидающие новичков, и иногда опытные программисты не могут этого избежать.
Innerhtml __table__ узла в IE только для чтения
В IE Innerhtml только читается в Col, Colgroup, Frameset, Head, HTML, стиле, таблице, Tbody, Tfoot, Thead, Title, TR и других элементах.
В таблице теги в т.е. innerhtml только для чтения, кроме TD.
innerhtml не может быть добавлен
Из структуры утверждения Innerhtml может выполнять операции приложения, такие как:
chatdiv.innerhtml += "<viv> hi <img src = 'smile.gif'/>! </div>"
chatdiv.innerhtml += "Как дела?"
Но что было сделано на самом деле:
1. Старый контент очищается
2. Новый контент проанализирован и вставлен. Контент не был добавлен, он был восстановлен.
Поэтому все изображения и другие ресурсы будут перезагружены после операции +=, включая Smile.gif.
К счастью, есть и другие способы обновления контента, который не использует innerhtml, поэтому не упомянуто выше.
Nodevalue
Innerhtml действителен только для узлов элементов.
Для других типов узлов они используют свойство Nodevalue для получения контента. В следующем примере показано, как это работает на текстовых узлах и узлах комментариев.
Кода -копия выглядит следующим образом:
<тело>
Текст
<!-комментарий->
<Скрипт>
для (var i = 0; i <document.body.childnodes.length; i ++) {
Alert (document.body.childnodes [i] .nodevalue)
}
</script>
</body>
В приведенном выше примере некоторые предупреждения пусты из -за пустых узлов. Обратите внимание, что Nodevalue === NULL для узлов сценария. Это потому, что скрипт - это элемент -узел. Узел элемента, используйте innerhtml.
Суммировать
Nodetype
Тип узла. Самое главное, что элемент узел-1, текстовый узел 3, и он только для чтения.
Nodename/Tagname
Название тега Caps. Для неэлементных узлов NodeName также будет иметь специальные значения, только для чтения.
Innerhtml
Содержание узла элемента может быть записано.
Nodevalue
Содержание текстового узла может быть записано.
Узел DOM имеет некоторые другие атрибуты в соответствии с его типом. Например, входной тег имеет значение и __ проверить __ -атрибуты. Атрибут имеет href и так далее.
Выше приведено в этой статье, надеюсь, вам понравится.