Detailed Explanation of JavaScript DOM methods.
#javascript #100DaysOfCode
If you find this useful, retweet so that it can help others.
๐งต๐
#javascript #100DaysOfCode
If you find this useful, retweet so that it can help others.
๐งต๐
๐DOM is a way to represent webpage in structured hierarchical way so that it will become easier for programmers & users to glide through document. With DOM, we can easily access & manipulate tags, IDs, classes, Attributes, or Elements using methods provided by Document object.
๐The getElementsByName() method returns collection of all elements of particular document by name. This collection is called node-list (array-like collection) and each element of the node list can be visited with the help of the index.
๐The getElementById() method returns an element that has specified ID, returns null if element doesnโt exist. The element is required to have a unique id, in order to get access quickly, & also that particular id should only be used once in the entire document.
๐The getElementsByTagName() method in HTML returns the collection of all the elements in the document with the given tag name. To extract any info just iterate through all the elements using the length property.
๐The getElementsByClassName() method returns collection of elements with specified class name(s). Elements in a collection can be accessed by index (starts at 0). Method can be called upon any individual element to search for its descendant elements with specified class names.
๐The querySelector() method in HTML is used to return the first element that matches a specified CSS selector (class, id, body, div, h1, h2,โฆ, p, span etc.) in the document. To return all matches use the querySelectorAll() instead.
๐The querySelectorAll() method in HTML is used to return a collection of an elementโs child elements that match a specified CSS selector(s), as a static NodeList.
๐The DOM children method is used to return HTMLcollection of all the child elements of the specified element. The elements in the collection can be accessed by index numbers.
๐The DOM parentElement method is used to returns the parent element of a particular child element. It is a read-only property. parentElement and parentNode method are similar and the only difference is parentElement method returns null if the parent node is not an element.
๐The closest() method of the element interface is used to traverse the element and its parents in the HTML Document Tree until it finds the first node that matches the selector string that is provided. Closest() method returns null if no match is found.
๐The nextElementSibling method is used to return the immediate next element of the specified element, in the same tree level or null if the specified element is the last one in the list. It is a read-only property.
๐The previousElementSibling method in HTML DOM is used to return the previous element of the same level of the given element. If no previous element found on the same level then it returns null. It is a read-only property.
That's all for the thread.
If you find it useful, Like and retweet the first one.
Don't forget to follow.
@codewith_shahid
Thank You โค๏ธ
#css #html #javascript
If you find it useful, Like and retweet the first one.
Don't forget to follow.
@codewith_shahid
Thank You โค๏ธ
#css #html #javascript
Loading suggestions...