Sunday, 30 September 2018

JavaScript: DOM: Nodes

Document is a collection of nodes.

For example

sample.html
<!DOCTYPE html>

<html>

<head>
    <title>DOM Tree Example</title>
</head>

<body>
    <h1>Simple DOM Tree</h1>

    <p><span>Hello Wolrd</span></p>
</body>

</html>

Above sample.html is internally represented like below.


In the above example, html, head, title, ‘DOM Tree Example’ etc., all are nodes. Based on their properties these are categorized. Let me explain some types of nodes.

Element Nodes
All the html tags (like html, head, p, ul, ol, li etc.,) are element nodes. For example in the above example following are element nodes.
html, head, body, title, h1, p, span are element nodes. An element node can contain other element nodes as children, for example html contain head and body elements as its children.

Text Nodes
Text nodes represent content. In the above example the text between <title>, <h1> and <span> tags represent text node.

Attribute Nodes
Attributes are used to given specific information to an element. For example,

<p title="Introduction To Java" id = "tutorial_1" class="myTutorials">.....</p>

In the above tag, there are 3 attribute nodes.
1.   title
2.   id
3.   class


Previous                                                 Next                                                 Home

No comments:

Post a Comment