JavaScript Working With DOM

element.childNodes //returns an array of an element child nodes.

element.firstchild //returns the first child node of an element

element.lastchild //returns the last child node of an element

element.haschildNodes //returns true if an element has any child node other wise false

element.previousSibling // return the previous node at the same tree level.

element.ParentNode // return the parent node at an element

<HTML>

<body>

<P>some other text </P>

</div>

var a = document.getElementById(“demo”);

var arr = a.childNodes;

for(var x = 0; x<arr,length; x++){

arr[x].innerHTML = “new text”;}

</Script>

</body>

</HTML>

Changing Attributes in JavaScript

we can change text element of an element using the inner HTML Property

var el = document.getElementById(“myimg”);

el.src = “apple.png”;

</Script>

WE CAN CHANGE href attribute of a link

<a href = “HTTP://www.boomitechie.com”> somelink</a>

var el = document.getElemensByTagName(“a”);

el[0].herf = “https:www.boomitechie.com”;

</script>

Changing Style: All style attributes can be accessed using the style object of the element.

var x = document.getElementById(“demo”);

x.style.color = “6600FF”;

X.style.with = “100 px”;

</Script>

The code above the text color and width of the div element

Creating Elements

Use the following method to create new nodes:

element.cloneNode()

clones an element and returns the resulting node.

document.CreateElement //create new element node

document.CreateTextNode //create new element node

Example:

var node = document.CreateTextNode(“some new Text”);

element.append child(newNode) // add a new child node to the element as the last child node

element.insertBefore(node1,node2) insert node1 as child before node 2

Example:

<div id = “demo”> some content </div>

var p = document.createElement(“P”);

var node = document.CreateTextNode(“some new text”);

P.appendChild(node);

var div = document.getElementById(“demo”);

div.appendChild(P);

</Script>

Removing Elements: RemoveChild(node)method.

<P id = “P1”> this is paragraph </P>

<P id = “P2”> this is another paragraph </P>

</div>

varParent = document.getElementById(“demo”);

var child = document.getElementById(“P1”);

Parent.removeChild(child);

</Script>

amit verma

Website | + posts

Technical content writer with data scientist, artificial intelligence, programming language, database. He has a bachelor’s degree in IT and a certificate in digital marketing, Digital transformation web development android app development He has written for website like Boomi techie, tech mantra, information hub, Tech all