DOM properties and one method

Since the DOM consists of different types of objects, which propertiesA slot for one of the values bundled in an object. apply to a particular object depend on the type of object it is.

Properties of the document node

The document nodeA node In the DOM for the whole document. plays a special role, as the rootA node without a parent. of the tree. There are several properties specific to the document node, as listed below.

Name	Meaning
documentElement	the html elementA part of the content of a web page.
head	the head elementAn HTML element that gives information about the page, tag name <code>head</code>.
body	the body elementAn HTML element that contains all the content of the page, tag name <code>body</code>.

Properties of all nodes

The objects for all nodes have the following propertiesA slot for one of the values bundled in an object.: nodeType, nodeName, and nodeValue.

As we will look at only some of the types of nodes in detail, only some of the values of the properties are listed below.

Node type	nodeType	nodeName	nodeValue
element node	1	tag nameThe characters used in a tag for a particular element. in upper case	null
attribute node	2	attributeExtra information added to an element. name	attributeExtra information added to an element. value
text node	3	the string "#text"	text content

Using the DOM

Since repeatedly accessing the DOM can be very time-consuming, it is advisable to extract information once and store it in a variable for further processing to reduce the number of accesses.

In using the canvas we introduced the method .getElementById(), which returns the element with the IDAn attribute used to refer to a single element. equal to the input string. Be careful to use an upper-case I and a lower-case d - making them both upper-case is an easy mistake to make.

Using the method we introduced, we would use the following steps to store object with the ID special in a variable and then to access the variable rather than repeatedly access the tree:

var specialNode = document.getElementById("special");
console.log(specialNode.nodeType);
console.log(specialNode.nodeName);
console.log(specialNode.nodeValue);