Net-informations.com
SiteMap  | About    

Dom Manipulations

The main object is the Document Object , which in turn contains several other child objects. Each and every single element in the document will have a corresponding presence in the DOM tree . The document object is a built-in object that has many properties and methods that we can use to access and modify websites.

Create a DOM element

In order to create new elements in the DOM, it provides a generic method createElement() , that takes as an argument an HTML tag name, and returns a plain DOM node of the specified type.

Above JavaScript program first create an LI node, then it crate a textnode for displaying text and then it append the text node to new LI element and finally the new node is append to the existing "days".

insertBefore(element, targetNode)

The Node.insertBefore() method inserts a node before the reference node as a child of a specified parent node. If the given child is a reference to an existing node in the document, insertBefore() moves it from its current position to the new position.

appendChild(element)

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position.

Modifying Node

You can modify existing elements in the DOM by changing their properties, content, style or even moving them completely from one place in the DOM to another.

Modify content

The Element property innerHTML is used to get or set a string representing serialized HTML describing the element's descendants. It does not return any HTML markup . When set the content with this method, it will erases all content within the node and inserts the supplied text.

Modifying Styles

The HTMLElement.style property is used to get as well as set the inline style of an element. While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.

Removing Nodes

Similar to modifying DOM , it also allows us to delete the target nodes. The removeChild() method delete the targetnode from the parent node.









net-informations.com (C) 2018    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.