What is each of the "data types" of the DOM?

Asked

Viewed 164 times

4

I’m studying about the GIFT and I came up with a question regarding his data types, which are:

  • document
  • element
  • nodeList
  • node
  • attribute
  • namedNodeMap

I didn’t really understand what each type of data represents in document, so I would like to have my doubt clarified.

Doubt

What are each of these types of data listed above belonging to the GIFT? What are they for?

If possible, I would like examples in JS illustrating each of them.

javascript dom

  • I don’t really understand why exactly these types of data, what is not lacking in DOM is interface. It is not clear where you want to go, and at the same time the question is a little wide. Trying to give a situated, the document (document) is made of us (nodes). This includes the HTML elements (each being one element or subclass), all text within HTML tags, including whitespace, and tag attributes. So element and attribute are subtypes of node. Nodelists the name already says, are lists of nodes. namedNodeMap are attribute sets.

  • @bfavaretto think it best to edit to "what is each type" instead of "purpose", I wanted to express this.

  • All right, but it’s kind of an arbitrary list of types. That’s what I find odd about the question. Let’s see if anyone responds by detailing, I’m unfortunately running out of time.

  • @bfavaretto did not understand what you meant by "a somewhat arbitrary list of types", which could be?

  • Because the DOM is composed of a much larger list of types. What is the reason you choose just these to ask?

  • @bfavaretto seem to me to be the most common to learn from the start. But you can ask a question for each type, what do you think?

  • Leave it at that, I think it has no ideal format in this case.

Show 2 more comments

1 answer

1

Given the html below I will explain the concepts:

<html lang="pt-br">
<head>
  <title>Document Title</title>
</head>
<body>
  <div id="divPai">
    <h1>Lista exemplo</h1>
    <ul>
      <li>Item 01</li>
      <li>Item 01</li>
      <li>Item 01</li>
      <li>Item 01</li>
      <li>Item 01</li>
    </ul>
  </div>
</body>
</html>

1. document Document is an object that every html page has. It’s like there’s a tag <document></document> involving the entire html page as it is essential, and used to carry with it important information from the page and all its content. And for you to be able to access some properties of html you need to go through it. View documentation

Example: console.log(document.title) in this case will return the "Document Title" which is the content of the tag title above. You can display all objects inside the document giving a console.log on it.

2. element and node To explain the element I will also talk about node. node is a generic nomenclature given to the elements within the hierarchy of the DOM. The document, document.title is also a Node, but can also be elements such as <h1>or a <input />. Already element is a specific type of node, usually are the elements within the tag body of your html.

Example: If you all elements li page just use document.getElementsByTagName('LI') and this code will return a nodeList or HTMLCollection with all LI elements inside.

3. nodeList To https://developer.mozilla.org/en-US/docs/Web/API/NodeList or Htmlcollection is a list as well as a Array, but it is worth noting that it is not an array. These two concepts carry a list of elements that are linked to the DOM of the page, thus giving the possibility to manipulate a list of elements at once

4. attribute attributes are the properties that a element has. Tags img will have src, <a> will have href, <div>s may have class or id and so on.

Example: Use document.getElementById('divPai').attributes to access the div element with id divPai will return a NamedNodeMap. However I can directly access the attribute id using document.getElementById('divPai').id in this case will return "divPai".

5. NamedNodeMap In my opinion it is the most confusing as it is similar an array, and also nodeList but has an internal structure of object but explaining NamedNodeMap although having Node in the name has nothing to do with it, it is only using to return a list of attributes of a element. Is that he’s a list. View documentation of this guy!

Ultimately all these concepts are used together to manipulate the DOM. I hope to have clarified.

Browser other questions tagged javascript dom

You are not signed in. Login or sign up in order to post.