JavaScript CreateElement Summary: in this tutorial, you will learn how to use the JavaScript document.createElement() to create a new HTML element and attach it to the DOM tree. To create an HTML element, you use the document.createElement() method: let element = document.createElement(htmlTag); Code language: JavaScript (javascript) The document.createElement() accepts an HTML tag name and returns…
Read more
JavasScript Siblings Summary: in this tutorial, you will learn how to select the next siblings, previous siblings, and all siblings of an element. Let’s say you have the following list of items: <ul id=”menu”> <li>Home</li> <li>Products</li> <li class=”current”>Customer Support</li> <li>Careers</li> <li>Investors</li> <li>News</li> <li>About Us</li> </ul> Code language: HTML, XML (xml) Get the next siblings To…
Read more
Getting Child Elements of a Node in JavaScript Summary: in this tutorial, you will learn how to get the first child element, last child element, and all children of a specified element. Suppose that you have the following HTML fragment: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>JS Get Child Elements</title> </head> <body> <ul id=”menu”> <li…
Read more
JavaScript Get the Parent Element parentNode Summary: in this tutorial, you will learn how to get the parent node of an element by using the JavaScript parentNode attribute of the Node object. Introduction to parentNode attribute To get the parent node of a specified node in the DOM tree, you use the parentNode property: let…
Read more
JavaScript querySelector Summary: in this tutorial, you will learn how to use the JavaScript querySelector() and querySelectorAll() to find elements based on CSS selectors. Introduction to JavaScript querySelector() and querySelectorAll() methods The querySelector() is a method of the Element interface. The querySelector() method allows you to select the first element that matches one or more…
Read more
JavaScript getElementsByClassName Summary: in this tutorial, you will learn how to use the getElementsByClassName() method to select elements by class name. Introduction to the getElementsByClassName() method The getElementsByClassName() method returns an array-like of objects of the child elements with a specified class name. The getElementsByClassName() method is available on the document element or any other…
Read more
JavaScript getElementsByTagName Summary: in this tutorial, you will learn how to use the JavaScript getElementsByTagName() to select elements with a given tag name. Introduction to JavaScript getElementsByTagName() method The getElementsByTagName() is a method of the document object or a specific DOM element. The getElementsByTagName() method accepts a tag name and returns a live HTMLCollection of…
Read more
JavaScript getElementsByName Summary: in this tutorial, you will learn how to use the JavaScript getElementsByName() method to get elements with a given name in a document. Introduction to JavaScript getElementsByName() method Every element on an HTML document may have a name attribute: <input type=”radio” name=”language” value=”JavaScript”> Code language: HTML, XML (xml) Unlike the id attribute,…
Read more
JavaScript getElementById Summary: in this tutorial, you will learn how to use the JavaScript getElementById() to select an element by a specified id. Introduction to JavaScript getElementById() method The document.getElementById() method returns an Element object that represents an HTML element with an id that matches a specified string. If the document has no element with…
Read more
Document Object Model in JavaScript Summary: in this tutorial, you will learn about the Document Object Model in JavaScript. What is Document Object Model (DOM) The Document Object Model (DOM) is an application programming interface (API) for manipulating HTML documents. The DOM represents an HTML document as a tree of nodes. The DOM provides functions…
Read more