[JavaScript] DOM

The standard way to access the element of the web document is DOM. In web pages, the “document” object is a gateway to all other elements.

 

1. DOM

The Document Object Model (DOM) is a way of representing and interacting with objects in HTML and XML documents.

The “document” object has the following entry methods to DOM:

  • getElementById(id) : returns element with the specified id
  • getElementsByTagName(tag) : returns an array of elements with a specified tag
  • createTextNode(text) : create a node for a text value
  • createElement(tag) : create a new element
  • createAttribute(name) : create a new element

 

2. Nodes

Each element or value is called a node in the DOM.

Each node has the following methods :

  • appendChild(item) : adds a new child node at the end
  • insertBefore(newItem, existingChild) : adds a new child node before the existing child node
  • removeChild(item) : removes a child node
  • replaceChild(newItem, oldItem) : replaces a child node
  • hasChildNodes() : whether a node has any child nodes
  • hasAttributes() :  whether a node has any attributes
var greet1 = document.createElement("p");
greet1.innerHTML = "World";
document.getElementById("div1").appendChild(greet1);

var greet2 = document.createElement("p");
greet2.innerHTML = "Hello";
document.getElementById("div1").insertBefore(greet2, greet1);

The “node” provides navigation properties :

  • attributes : a collection of attributes
  • firstChild : the first child node
  • lastChild :  the last child node
  • nextSibling : the next node in the same level
  • previousSibling : the previous node in the same level
  • parentNode : the parent node

Once you reach the target node, you can get the information about the node.

  • nodeName : the name of the node
  • nodeType : element (1), attribute (2), text (3) …
  • nodeValue : the value of the node
  • textContent : the textual content of the node

3. Elements

Each element (tag) is represented by an “element” object and you can manipulate attributes through it.

  • hasAttribute(name) : checks if the element has the specified attribute
  • getAttribute(name) : returns the value of the attribute with the specified name
  • setAttribute(name, value) : sets the specified attribute to the specified value
  • removeAttribute(name) : removes the specified attribute

Also, the “element” object has the “tagName” property to get the name of the tag.

var btn = document.createElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("value", "Submit");
document.getElementById("div1").appendChild(btn);

 

4. Styles

The “style” object represents an individual style statement and can be accessed from the “document” or “element” object.

Most style properties are from CSS. CSS uses “” between words but style properties combine world as a camelcase. For example, “background-color” becomes “style.backgroundColor“.

var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "100px";
div1.style.backgroundColor = "Red";

 

5. Adding/Modifying Text

If you want to add or modify the text in DOM, make sure even text is a node in DOM. The document object provides the “createTextNode()” method to create a text node.

var paragraph = document.createElement("p");
var text = document.createTextNode("Hello, World");
paragraph.appendChild(text);
document.getElementById("div1").appendChild(paragraph);

If you want to modify the existing text, you need to get the container element first and then get the first child node.

<h1 id="title">Title</h1>

To change the text of the <h1> element, you need to navigate to the text node of the element.

var header1 = document.getElementById("title");
header1.firstChild.nodeValue = "New Title";

DOM3 provides the new “textContent” property to access the text content directly from the container node.

var header1 = document.getElementById("title");
header1.textContent = "New Title1";

Note that the “innerHTML” is not a standard way to access the content in an element.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s