Element type html javascript

Node properties: type, tag and contents

In this chapter we’ll see more into what they are and learn their most used properties.

DOM node classes

Each DOM node belongs to the corresponding built-in class.

The root of the hierarchy is EventTarget, that is inherited by Node, and other DOM nodes inherit from it.

Here’s the picture, explanations to follow:

• EventTarget – is the root “abstract” class for everything. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called “events”, we’ll study them later.
• Node – is also an “abstract” class, serving as a base for DOM nodes. It provides the core tree functionality: parentNode , nextSibling , childNodes and so on (they are getters). Objects of Node class are never created. But there are other classes that inherit from it (and so inherit the Node functionality).
• Document, for historical reasons often inherited by HTMLDocument (though the latest spec doesn’t dictate it) – is a document as a whole. The document global object belongs exactly to this class. It serves as an entry point to the DOM.
• CharacterData – an “abstract” class, inherited by:
  • Text – the class corresponding to a text inside elements, e.g. Hello in

    Hello

    .

  • Comment – the class for comments. They are not shown, but each comment becomes a member of DOM.
  • HTMLInputElement – the class for elements,
  • HTMLBodyElement – the class for elements,
  • HTMLAnchorElement – the class for elements,
  • …and so on.

  There are many other tags with their own classes that may have specific properties and methods, while some elements, such as , , do not have any specific properties, so they are instances of HTMLElement class.

  So, the full set of properties and methods of a given node comes as the result of the chain of inheritance.

  For example, let’s consider the DOM object for an element. It belongs to HTMLInputElement class.

  It gets properties and methods as a superposition of (listed in inheritance order):

  • HTMLInputElement – this class provides input-specific properties,
  • HTMLElement – it provides common HTML element methods (and getters/setters),
  • Element – provides generic element methods,
  • Node – provides common DOM node properties,
  • EventTarget – gives the support for events (to be covered),
  • …and finally it inherits from Object , so “plain object” methods like hasOwnProperty are also available.

  To see the DOM node class name, we can recall that an object usually has the constructor property. It references the class constructor, and constructor.name is its name:

  Источник

  Свойства узлов: тип, тег и содержимое

  Теперь давайте более внимательно взглянем на DOM-узлы.

  В этой главе мы подробнее разберём, что они собой представляют и изучим их основные свойства.

  Классы DOM-узлов

  Каждый DOM-узел принадлежит соответствующему встроенному классу.

  Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.

  На рисунке ниже изображены основные классы:

  Существуют следующие классы:

  • EventTarget – это корневой «абстрактный» класс для всего. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.
  • Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: parentNode , nextSibling , childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуются от него (и следовательно наследуют функционал Node ).
  • Document, по историческим причинам часто наследуется HTMLDocument (хотя последняя спецификация этого не навязывает) – это документ в целом. Глобальный объект document принадлежит именно к этому классу. Он служит точкой входа в DOM.
  • CharacterData – «абстрактный» класс. Вот, кем он наследуется:
    • Text – класс, соответствующий тексту внутри элементов. Например, Hello в

      Hello

      .

    • Comment – класс для комментариев. Они не отображаются, но каждый комментарий становится членом DOM.
    • HTMLInputElement – класс для тега ,
    • HTMLBodyElement – класс для тега ,
    • HTMLAnchorElement – класс для тега ,
    • …и т.д.

    Также существует множество других тегов со своими собственными классами, которые могут иметь определенные свойства и методы, в то время как некоторые элементы, такие как , и , не имеют каких-либо определенных свойств, поэтому они являются экземплярами класса HTMLElement .

    Таким образом, полный набор свойств и методов данного узла является результатом цепочки наследования.

    Рассмотрим DOM-объект для тега . Он принадлежит классу HTMLInputElement.

    Он получает свойства и методы из (в порядке наследования):

    • HTMLInputElement – этот класс предоставляет специфичные для элементов формы свойства,
    • HTMLElement – предоставляет общие для HTML-элементов методы (и геттеры/сеттеры),
    • Element – предоставляет типовые методы элемента,
    • Node – предоставляет общие свойства DOM-узлов,
    • EventTarget – обеспечивает поддержку событий (поговорим о них дальше),
    • …и, наконец, он наследует от Object , поэтому доступны также методы «обычного объекта», такие как hasOwnProperty .

    Для того, чтобы узнать имя класса DOM-узла, вспомним, что обычно у объекта есть свойство constructor . Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя:

    Источник

    Javascript DOM Element Type

    The Element type represents an XML or HTML element, providing access to information such as its tag name, children, and attributes.

    An Element node has the following characteristics:

    Item	Value
    nodeType	1
    nodeName	the element’s tag name.
    nodeValue	null
    parentNode	may be a Document or Element.
    childNodes	may be Element, Text, Comment, ProcessingInstruction, CDATASection, or EntityReference.

    An element’s tag name is accessed via the nodeName property or by using the tagName property; both properties return the same value.

    Consider the following element:

    This element can be retrieved and its tag name accessed in the following way:

    let div = document.getElementById("myDiv"); console.log(div.tagName); // "DIV" console.log(div.tagName == div.nodeName); // true 

    The element has a tag name of div and an ID of «myDiv«.

    div.tagName actually outputs «DIV» instead of «div».

    When used with HTML, the tag name is always represented in all uppercase; when used with XML (including XHTML), the tag name always matches the case of the source code.

    If you aren’t sure whether your script will be on an HTML or XML document, it’s best to convert tag names to a common case before comparison, as this example shows:

    if (element.tagName == "div")< // AVOID! Error prone! // do something here > // Preferred - works in all documents if (element.tagName.toLowerCase() == "div")< // do something here >

    This example shows two comparisons against a tagName property.

    The first is quite error prone because it won’t work in HTML documents.

    The second approach, converting the tag name to all lowercase, is preferred because it will work for both HTML and XML documents.

    Related

    demo2s.com | Email: | Demo Source and Support. All rights reserved.

    Источник

    Читайте также:  Упорядочить массив возрастанию java