Common DOM methods in Java Script

Below is the lists of few common DOM methods that can be used on most elements in a document. As DOM gives us generic access to the element, their attributes, styles defined in a given document.

1. getElementById(object_id) : This method is used to access a object with its ID, The only thing we should keep in mind that before calling this method the target object should be created on the DOM  tree, Otherwise error will be thrown.

syntax: <div style=”background-color:black”></div>
document.getElementById(“myId”)

2 appendChild(node): Inserts the specified node or object at the end of the current container object. A frequently used method for dynamically appending a new element or text to the document.

3 insertBefore(newElement, targetElement): This inserts a node before the target node to the same Parent Node.

syntax : document.getElementById(“myId”).insertBefore(newCild, andTheOldTargetChild)

4 insertAfter(newElement, targetElement): This inserts a node after the target node to the same Parent Node.

syntax: document.getElementById(“myId”).insertBefore(newCild, andTheOldTargetChild)

5 removeChild(childreference) : This method is used to remove a child from a Given Parent Node.

syntax : document.getElementById(“myId”).removeChild(childId);

6 getAttribute(attributeName): Returns the value of the attribute named attribute of the current node.

document.getElementById(“myId”).getAttribute(“style=”)

7 getElementsByClassName: This method is very useful and widely used some of the known JS lib frameworks. This method return the reference of all the objects who has the same CSS class name assigned. It will return an array collection.

var arr[]=document.getElementById(“myId”).getElementsByClassName(“subMenus”)

8 getElementsByTagName(tagName): This method is having same nature of the above with only a difference that it sends the list of collection by TAG name.

var tags[]=document.getElementsByTagName(“a”) //returns all anchor tags list on page

9 hasAttribute(attributename): This method is used to verify the if a particular attribute has been defined for a given Node.

if (document.getElementById(“myId”).hasAttribute(“style”)){

//returns true;

}

10 setAttribute(attributename, value, [iecaseflag]): As the name said we can use this method to set attribute on a given node. and before assigning use the “hasAttributes” method.

Syntax: document.getElementById(“myId”).setAttribute(“valign”)=”center”

11 removeAttribute(attributename): As a name suggest this is used to remove a attribute.

syntax: document.getElementById(“myId”).removeAttribute(“style”);

12 innerHTML Property : The easiest way to get or modify the content of an element is by using the innerHTML property. innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browsers. The innerHTML property is useful for returning or replacing the content of HTML elements (including <html> and <body>), it can also be used to view the source of a page that has been dynamically modified.

Hope This helps.


Thanks
R Vashi

2 thoughts on “Common DOM methods in Java Script

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s