Commit add81eb

committed

Traversing the DOM 🫡✨

1 parent 4b79d8c commit add81ebCopy full SHA for add81eb

File tree

+55

-0

lines changed

+55

-0

lines changed

Lines changed: 36 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,36 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <meta charset="UTF-8">`
	`6`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`7`	`+ <title>Hello World!</title>`
	`8`	`+</head>`
	`9`	`+`
	`10`	`+<body>`
	`11`	`+`
	`12`	`+ <div class="content">`
	`13`	`+ <div class="firstContentDiv">`
	`14`	`+ <h5>Header is this!</h5>`
	`15`	`+ </div>`
	`16`	`+ <div class="secondContentDiv">`
	`17`	`+ <h2 id="page-title">Head Title</h2>`
	`18`	`+ </div>`
	`19`	`+ <div class="thirdContentDiv">`
	`20`	`+ <p> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer`
	`21`	`+ took a galley of type and scrambled it to make a type specimen book. It has survived not only five`
	`22`	`+ centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was`
	`23`	`+ popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more`
	`24`	`+ recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>`
	`25`	`+ </div>`
	`26`	`+ <div class="fourthContentDiv">`
	`27`	`+ <h5>This is footer</h5>`
	`28`	`+ <h2>Baba papki nam</h2>`
	`29`	`+ </div>`
	`30`	`+ </div>`
	`31`	`+`
	`32`	`+ <script src="./script.js"></script>`
	`33`	`+`
	`34`	`+</body>`
	`35`	`+`
	`36`	`+</html>`

Lines changed: 19 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,19 @@`
	`1`	`+document.write("Traversing the DOM in JavaScript!" + "<br /><br />");`
	`2`	`+`
	`3`	`+/*`
	`4`	`+ What is Traversing the DOM?`
	`5`	`+ - Traversing the DOM (Document Object Model) refers to the process of navigating through the different elements in an HTML or XML document using JavaScript. The DOM is a hierarchical tree-like structure that represents the different elements in a web page, and each element is represented as a node in the tree.`
	`6`	`+`
	`7`	`+*/`
	`8`	`+`
	`9`	`+let myContentDiv = document.getElementsByClassName("content");`
	`10`	`+console.log(myContentDiv);`
	`11`	`+`
	`12`	`+// Navigating content div to inside element. finding tagname h2 inside the content div. This naviagating is Traversing the DOM`
	`13`	`+let myH2 = myContentDiv[0].getElementsByTagName("h2");`
	`14`	`+console.log(myH2);`
	`15`	`+`
	`16`	`+let changedHeader = myH2[0].innerHTML = "Header Title Changed Using JavaScript";`
	`17`	`+`
	`18`	`+let header = document.getElementById("page-title").innerHTML;`
	`19`	`+console.log(header);`

Comments

(0)