Scribd
Upload
24 views19 pages

Dom Node List

The document discusses DOM manipulation techniques like adding, removing and editing elements. It shows how to select elements, create new elements, modify attributes and styles, replace and remove elements from the DOM tree.

Uploaded by

Shaheed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views19 pages

Dom Node List

The document discusses DOM manipulation techniques like adding, removing and editing elements. It shows how to select elements, create new elements, modify attributes and styles, replace and remove elements from the DOM tree.

Uploaded by

Shaheed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Dom node list

Adding span tags inside h1 tag and


checking the results

Removing te span tag content in the webpage and checking behind scene
like given image

<body>
<div class="background">
<h1 id="title" class="heading" >dom le <span style="display:
none;">testksd</span>arning </h1>
<p>Lorem ipsum dolor Lorem ipsum <span>aahsnanjsnnajdnj</span> dtur
adipisicing. sit amet.</p>
</div>
</body>
</ht

Results of above code


The above code is example is
1: title.innerhtml is shows the which have been hidden in the code but
not shows the with detailed tags and prints on the site
2: .textcontet is knows as shows all content without any tags

Using query selectors in real world example


body>
<div class="background">
<h1 id="title" class="heading" >dom le <span style="display:
none;">testksd</span>arning </h1>
<h2>hello js </h2>
<h2>hellojs dom 1</h2>
<h2>learing </h2>

<p>Lorem ipsum dolor Lorem ipsum <span>aahsnanjsnnajdnj</span> dtur


adipisicing. sit amet.</p>
</div>
</body>

Output lets check

Queryselctor selects all tags which want to select if there are multiple
Query selections are like css properties
<input type="password" name="" id="">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>

Here the give below example are like changing the colours and using
query selector as a dom and by the hep of css
Arrays and nodelist are di erent which nodelist doesn’t shows any map
prototype and arrays shows all the prototypes
Shown below
In arrays we will get all prototypes
HOW TO CTREATE NEW ELEMENT IN
DOM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/sc.css">

</head>
<body>
<div class="parent">
<div class="day">monday</div>
<div class="day"> tuesday</div>
<div class="day">wednesday</div>
<div class="day">thursday</div>
</div>
</body>
<script>
const parent=document.querySelector('.parent')
console.log(parent);

</script>
</html>

INVESTIGATION IN CONSOLE ITS


WORKING OR NOT CHECKING

<script>
const parent=document.querySelector('.parent')
console.log(parent);
console.log(parent.children);
console.log(parent.children[1]);
console.log(parent.children[1].innerHTML);

</script>
for (let i = 0; i < parent.children.length; i++) {
console.log(parent.children[i].innerHTML);

parent.children[1].style.color ="orange"
console.log(parent.firstElementChild);
const dayone =document.querySelector('.day')
console.log(dayone);
console.log(dayone.parentElement);
console.log(dayone.nextElementSibling);

console.log("NODES:",parent.childNodes)

here the node list length shows


every break and count space in given
code shows the length
Here let create some div by js but it stores in tne memory which
would not print on the document
<script>
const div = document.createElement('div')
console.log(div);
div.className ="main"
div.id = Math.round(Math.random()*10+1)
div.setAttribute("title","generated title")
div.style.padding ="12px"
div.style.backgroundColor ="green"

</script>
Here lety create by using document creation
const addText = document.createTextNode("shaheed")
div.appendChild(addText)
document.body.appendChild(div)

EDIT AND RMOVE ELEMENTS IN DOM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOMLEARNING</title>
</head>
<body style="background-color: #212121; color: #fff;">
<ul class="language">
<li>Javascript</li>
</ul>
</body>
<script>
function addLanguage(langName){
const li = document.createElement('li');
li.innerHTML = `${langName}`
document.querySelector('.language').appendChild(li)
}
addLanguage("python")
addLanguage("typescript")

function addOptiLanguage(langName){
const li = document.createElement('li');
li.appendChild(document.createTextNode(langName))
document.querySelector('.language').appendChild(li)
}
addOptiLanguage('golang')

//Edit
const secondLang = document.querySelector("li:nth-child(2)")
console.log(secondLang);
//secondLang.innerHTML = "Mojo"
const newli = document.createElement('li')
newli.textContent = "Mojo"
secondLang.replaceWith(newli)

//edit
const firstLang = document.querySelector("li:first-child")
firstLang.outerHTML = '<li>TypeScript</li>'

//remove
const lastLang = document.querySelector('li:last-child')
lastLang.remove()

</script>
</html>

You might also like