Html Tag | Table O Contents

The html tag is the highest ranking Object within the Document Object Model …

Note. The Flammarion Logo Badge in the page header above is an .svg image file set to the dimensions of 5% width, auto height, and zoom. Go ahead and test the zoom-out feature by hovering over the badge to engage the expansion of the image.

Html Box-node

Hint. The html tag is the highest ranking object within the Document Object Model, or DOM.

The html tag, or …


<html>...</html>

The DOM is derived from the many and varied tags and text found nested inside a single page of Html.

For example, the head tag, or


<head>...</head>

Is nested within the html tag, or


<html>...</html>

Along with the body tag, or


<body>...</body>

As follows,


<html>
  <head>...</head>
  <body>...</body>
</html>

Obfuscation

So, if we are presented with a Box-node by the DOM after the browser parses your page of Html …

How then are we to find …

Or,

And,

Global Variable

Inside the DOM, the Global Variable takes on the name of Document.

The Global Variable through the name of Document grants us access to the DOM Objects now representing the many and varied tags and text parsed from the underlying page of Html.

For example,

The now Document has a documentElement property that refers to the DOM Object that now represents the html tag.

In addition, the now Document also provides access to the now separate properties of head and body, both now representing the DOM Objects derived from the parsing of the head and body tags over at the single page of Html.

Got it?

The DOM Root

The root of the parsed Html page, as represented by the new DOM is the new document.documentElement property.

The document.documentElement property points to the DOM Object now representing the original html tag over at the now parsed single page of Html.

Node Properties

In addition, each new Object node within the newly constructed DOM has a nodeType property that can be accessed.

The nodeType property returns a numeral representing which type of node the target node is of when queried.

Constant type

The constant type of node is represented by the numeral one (1).

All regular elements of the DOM tree return the numeral one (1) …

And, are therefore of the constant type of node.

The Document Object property document.ELEMENT_NODE represents the constant type of node, or constant property.

Leaf Type

All text nodes (leaves) of the Document Object return the numeral three (3) when queried by the document.TEXT_NODE property.

Comment type

All comment nodes (leaves) of the Document Object return the numeral three (8) when queried by the document.Comment_NODE property.

Parent nodes

Every node in the DOM tree possesses a parentNode property from which the parent or containing node of the target node may be derived.

Elemental Nodes

All elemental or Type numeral one (1) nodes of the DOM Object also possess a childNodes property that can be accessed.

Child Nodes

Every Type numeral one (1) or elemental node in the DOM tree possesses a childNodes property from which the array-like object holding its children may be queried.

The childNodes property represents an array-like Object itself complete with a length property.

However, as a kind of the NodeList type, the childNodes property cannot be sliced as a regular array can be sliced through the slice method.

Nor can the childNodes property be accessed by the regular array method of forEach.

Array-like, yes.

But, not actually a full, regular array with the full compliment of properties and methods available to a regular array.

First Child

Note. The value returned by the firstChild method is null when querying a node sin niños, or without children.

Similarly, the value returned by the previousSibling method is also null when querying a primera niño, or first child node.

Last Child

Note. The value returned by the lastChild method is null when querying a node sin niños, or without children.

Similarly, the value returned by the nextSibling method is also null when querying a proxima niño final, or next child last node.

Document Body

As the spaces between tags over at the original single page of Html convert to empty strings "" when parsed by the browser to create the original DOM …

Querying the Object elements of the new DOM by tag name is a more efficient procedure than attempting to pin point which child node where houses that one leaf node there.

For example, if you wish to extract the href portion of a hyperlink that was embedded in the original single page of Html …

That has since been been magically transported via the browser parse function over to the new DOM Object, or quasi-array …

By establishing a global variable named link and assigning the result of a procedure designed to point to all of the tags of the a, or anchor clan now resident in the DOM via the hyperlink quasi-array Object …

And, then zeroing in (literally) through the index feature of the array-like structure now representing the targeted href leaves …

You may return an array-like DOM Object that houses all of the hyperlinks that are descendants (either first as direct children, or secondly as indirect grand-children) of the index zero, or [0] hyperlink.

Finally, to render the result to the Javascript console, a friendly console.log invokation with the argument (link.href) attached will return the href portion you seek, as follows:


var link = document.body.getElementsByTagName("a")[0];
console.log(link.href)

Note. All elemental nodes possess a getElementsByTagName property in the form of a method that collects all targeted designated elements.

In this case the getElementsByTagName method collects all designated elements of the a, or anchor tag clan.

Brackets Time

Now that we have a snippet of code to work with, let us now traverse over to our trusty instance of the Brackets IDE to see how our snippet renders.

After opening our src folder via the file, open folder selection of the Brackets IDE main menu …

And, subsequently engaging the Live Preview feature of the Brackets IDE …

We now see a rendering of our underlying single page of Html.

Open up the Chrome browser tools and navigate to the Sources, Snippets tab of the main menu.

Last Subtitle

More to come …

Note. The above synopsis was derived from an article written by Marijn Haverbeke [1].

  1. Eloquent Javascript by Marijn Haverbeke. Published by © 2012 Syncfusion.com.

Support

Please support the co-workers who aggregate the Source Links for our projects.

Patreon

Like what you see in this project? If so, then support the authors and machine-elves who aggregate the source links and pages for our projects via Patreon.