I am unable to understand the concept of getElementById() method in the course video. Could anyone Please solve this queries.
Hi @yogamalinirajendran ,
Suppose you have two paragraphs in your HTML code
<p> Para 1 </p> <p id="para2"> Para 2 </p>
and you want to change the content of paragraph 2 then we will get paragraph two by their id name.
and you can change or get the value of paragraph 2.
document. getElementById("para2").innerHTML = "Paragraph 2 changed";
Do let me know in case you need further assistance.
Thank you…But would you pls explain in detail. Because I need a clear idea about it.
Id is an attribute that a developer can use to identify an element in the html file.Unlike class attribute it is unique to a html element in a html file.
Now we can use this Id attribute as a reference to that particular html element.
consider this example,
<body> <h1 id="myHeader">Header with the id myHeader</h1> <h1 >Header without any id</h1> </body
This method works on the document object and returns the element having the id specified as an argument(If there are none it returns NULL):
document.getElementById("myHeader") returns the element with myHeader id
Then we can work on it, like if you want to change whats inside that h1 tag , then,
document. getElementById("myHeader").innerHTML = "Whatever you want to write";
Or you want to change its color:
document. getElementById("myHeader").style.color = "red";
ElementID is an unique ID associated with the element present in a html file. Whenever you want to fetch that “Element” you just use getElementByID() attribute. This helps in easy recognition in huge files.
Think of it as an object with a bar code. every barcode has a unique number associated with that product/object.
We use getElementById() to find a paragraph tag by using the id. We can change the content of a particular paragraph tag using document.getElementById(). To get the content of html element we use innerHTML. and set the content that has to be changed.
In the picture you can see two paragraphs with id1 and id 2 . We have given document. getElementById(2).innerHTML=“New text in the paragraph” . So the text where the paragraph id is 2 changes to “New text in the paragraph”. Whereas the first paragraph remains same. We can see the outputs as:
Hope it helped!
Is there any use of it inside the HTML code? Or is it just to make changes in the code from outside the code using the console. Because if the code is accessible to the user then the changes can be made directly right?
Of course, there is! The whole internet is filled with DOM. Most of the websites are based on DOM itself. The buttons you see even on this page are using them as well.
Yes, even the user can make changes and use it from the console. But does not mean you’ll type it on the console to execute the function on the buttons. That is not what a regular non-technical user would do. The console is majorly used for debugging.
And even if the changes were made from the console, it does not change the original file. Refreshing the page will load all its original files. (in case it is not any event trigger or a dynamic page)
Let me know if you need more clarification on this.
in the events section while using the onkeyup event the innerHTML value is changed from “text” to text here the text is a variable for storing the value we type in the box or it is something else?
If it is under " these inverted commas ", it is most likely a string.
So, you can either use a variable to to store the string. Like,
string = "This is a string"
Next, while using the DOM, you can choose to use the variable or the string to initiate the change. Like,
document.getElementById("ID OF THE TEXT BOX").innerHTML = string;
document.getElementById("ID OF THE TEXT BOX").innerHTML = "This is a String";
thankyou very much for this quick response as I was not expecting it this quick as my experience in online training so far!