Today we'll learn about How Dom Works and why this is necessary to know about.
DOM stands for Document Object Model. In the world of web, all HTML webpages are referred to as documents.
How is a DOM created?
DOM contains a bunch of nodes where each node represents an HTML element. The tag always comes at the top and hence is called the root node. The rest of the nodes come under it and hence are called children nodes. The nodes present at the bottom are called leaves and are usually filled with elements’ attributes, values and events.
Firts we will see how we can can call the html element in js file and insert a child-node into the parentnode
<!-- put this into your html body tag.-->
<div id="id" ">
Div Element
</div>
const app = document.getElementById("id");
const div = document.createElement('div');
console.log(app,div)
You see that the both things in the console printed but not in the UI. Because the second Div is hanging we haven't done anything yet.
const app = document.getElementById("id");
const div = document.createElement('div');
//We append the child Element into the parent Div, With this appednChild Systax
app.appendChild(div)
console.log(app)
After Inserting the child in Parent div your developer tool will look like the below Image.
output
Another approach we can take to insert our element into the web page .
We are continueing with previous code
const app = document.getElementById("id");
app.innerHTML = `
<h1>JavaScript DOM</h1>
<div> Replace Me </div>
`
**output**
The change we'll see in the webpage.
Finish, Right ?
Nope . . We haven't finished yet. We will replace the text that inside the div with "I have been Replaced" text.
This Time we need call a div from the webpage,that will replace the text with new text.
const app = document.getElementById("id");
app.innerHTML = `
<h1>JavaScript DOM</h1>
<div> Replace Me </div>
`
// calling the div from html
const div = app.querySelector('div');
// creating a new h1 tag where we'll put the text
const newDiv = document.createElement('h1');
// Now we append the Text, in the h1 tag.
newDiv.innerText = 'I have been Replaced'
// we replace the old div with the newDiv
div.replaceWith(newDiv)
if you follow the steps your output will be look like the below image
output
Now we will render the list of element in the UI.
What is createDocumnetFragment ?
createDocumnetFragment : DocumentFragments are DOM Node objects which are never part of the main DOM tree. The usual use case is to create the document fragment, append elements to the document fragment and then append the document fragment to the DOM tree. In the DOM tree, the document fragment is replaced by all its children.
app.innerHTML = `
<h1>JavaScript DOM</h1>
<ul id="list">Replace Me </ul>
`
// the array we will be rendering
const data = ['Earth', 'Fire', 'Water'];
// after appending the document fragment is replaced by all its children.
const fragMent = document.createDocumentFragment();
//through iterating the element from dataArray we are creating
data.forEach(item => {
// adding class and inserting the text in between
const li = document.createElement('li');
li.className = 'list-item';
li.innerText = item;
// appending
fragMent.append(li)
})
// last we call the id from the web page and inserting the
element into the ul tag.
const ulFromid = document.getElementById('list');
ulFromid.append(fragMent);
If you do the same ,all the array elements will be rendering in the UI.
output
const app = document.getElementById("id");
app.innerHTML = `
<h1>JavaScript DOM</h1>
<ul id="list">Replace Me </ul>
`
// the array we will be rendering
const data = ['Earth', 'Fire', 'Water'];
// after appending the document fragment is replaced by all its children.
const fragMent = document.createDocumentFragment();
//through iterating the element from dataArray we are creating
data.forEach(item => {
// adding class and inserting the text in between
const li = document.createElement('li');
li.className = 'list-item';
li.innerText = item;
// appending
fragMent.append(li)
})
// last we call the id from the web page and inserting the element into the ul tag.
const ulFromid = document.getElementById('list');
ulFromid.append(fragMent);
// The list element you've create inside ul you can call it also
// you're querying the ul tag with #id selector and it's child element.
const list = document.querySelector('#list');
// After having the <ul></ul> tag and it's element you can acces the child element
// If you want the first child
console.log(list.firstElementChild)
// If you want the last child
console.log(list.lastElementChild)
/* @list.children[index]
* @You_can_call_the_child_element_with index also */
Output
Calling The parentElement and Parent Nodes
const app = document.getElementById("id");
app.innerHTML = `
<h1>JavaScript DOM</h1>
<div class="list">Replace Me </div>
const item = document.querySelector('.list');
// you can query your parentNode
console.log(item.parentNode)
// you can query your parentElement also
console.log(item.parentElement.parentElement)
Output
If you find it help,let me know it the commnet below.
I'm new to blog writing any short suggestions will be helpful
Latest comments (0)