Объектная модель документа (DOM) - это интерфейс, который обрабатывает документ HTML или XML как древовидную структуру, где каждый узел является объектом документа. DOM также предоставляет набор методов для запроса дерева, изменения структуры и стиля.
В DOM также используется термин элемент : который очень похож на узел. Итак, в чем разница между узлом DOM и элементом? Давайте выясним!
Узел DOM
Ключом к пониманию разницы между узлом и элементом является понимание того, что такое узел.
С более высокой точки зрения, документ DOM состоит из иерархии узлов. Каждый узел может иметь родителя и / или потомков.
Давайте посмотрим на следующий HTML-документ:
Документ содержит следующую иерархию узлов:
<html>это узел в дереве документа. У него 2 дочерних элемента: <head>и <body>узлы.
<body>также является узлом, имеющим 3 дочерних элемента: комментарий <!-- Page Body -->, заголовок <h2>и абзац <p>. Родителем <body>узла является <html>узел.
Теги в HTML-документе представляют собой узел, что интересно, так это то, что обычный текст также является узлом. Узел абзаца <p>имеет 1 дочерний элемент: текстовый узел "Thank you for visiting my web page!".
Типы узлов
Как отличить эти разные типы узлов? Ответ кроется в интерфейсе узла DOM , особенно в Node.nodeTypeсвойстве.
Node.nodeType может иметь одно из следующих значений, представляющих тип узла:
- Node.ELEMENT_NODE
- Node.ATTRIBUTE_NODE
- Node.TEXT_NODE
- Node.CDATA_SECTION_NODE
- Node.PROCESSING_INSTRUCTION_NODE
- Node.COMMENT_NODE
- Node.DOCUMENT_NODE
- Node.DOCUMENT_TYPE_NODE
- Node.DOCUMENT_FRAGMENT_NODE
- Node.NOTATION_NODE
Константы значимо указывают тип узла: например,
Node.ELEMENT_NODE представляет узел элемента,
Node.TEXT_NODE представляет текстовый узел,
Node.DOCUMENT_NODE узел документа и так далее.
Например, выделим узел абзаца и посмотрим на его nodeType свойство:
Как и ожидалось, paragraph.nodeType имеет значение Node.ELEMENT_NODE, указывающее, что абзац является элементом.
Абзац также содержит текстовый узел:
Существует тип узла, который представляет все дерево узлов документа - Node.DOCUMENT_NODE:
Элемент DOM
После того, как вы хорошо поняли, что такое узел DOM, теперь пора различать узел и элемент DOM.
Если вы освоите термин node , то ответ очевиден: элемент - это узел определенного типа - element ( Node.ELEMENT_NODE). Наряду с такими типами, как документ, комментарий, текст и т. Д.
Проще говоря, элемент - это узел, который записывается с помощью тега в документе HTML. <html>, <head>, <title>, <body>, <h2>, <p>Все элементы , так как они представлены теги.
Тип документа, комментарий, текстовые узлы не являются элементами, потому что они не записаны с тегами:
Node является конструктором узла и HTML Element конструктором элемента в JavaScript DOM. Абзац, будучи узлом и элементом, является экземпляром обоих Node и HTML Element:
Проще говоря, элемент - это подтип узла, так же как кошка - подтип животного.
Резюме
Документ DOM - это иерархический набор узлов. Каждый узел может иметь родителя и / или потомков.
Понять разницу между узлом DOM и элементом легко, если вы понимаете, что такое узел.
У узлов есть типы, и тип элемента является одним из них. Элемент представлен тегом в документе HTML.