Column Object The Column object represents an HTML <col> element. Access a Column Object You can access a <col> element by using getElementById(): Example var x = document.getElementById(“myCol”); Try it Yourself » Create a Column Object You can create a <col> element by using the document.createElement() method: var x = document.createElement(“COL”); Column Object Properties Property Description span […]
The navigator object contains information about the browser. Note: There is no public standard that applies to the navigator object, but all major browsers support it. Navigator Object Properties Property Description appCodeName Returns the code name of the browser appName Returns the name of the browser appVersion Returns the version information of the browser cookieEnabled Determines […]
An HTMLCollection object is an array-like list of HTML elements. Methods like the getElementsByTagName() returns an HTMLCollection. Properties and Methods The following properties and methods can be used on a HTMLCollection object: Property / Method Description item() Returns the element at the specified index in an HTMLCollection length Returns the number of elements in an […]
The history object contains the URLs visited by the user (within a browser window). The history object is part of the window object and is accessed through the window.history property. Note: There is no public standard that applies to the history object, but all major browsers support it. History Object Properties Property Description length Returns the […]
When an HTML document is loaded into a web browser, it becomes a document object. The document object is the root node of the HTML document. Document Object Properties and Methods The following properties and methods can be used on HTML documents: Property / Method Description activeElement Returns the currently focused element in the document addEventListener() […]
The Attr Object In the HTML DOM, the Attr object represents an HTML attribute. An HTML attribute always belongs to an HTML element. The NamedNodeMap Object In the HTML DOM, the NamedNodeMap object represents an unordered collection of an elements attribute nodes. Nodes in a NamedNodeMap can be accessed by name or by index (number). Properties and Methods Property […]
Bold Object The Bold object represents an HTML <b> element. Access a Bold Object You can access a <b> element by using getElementById(): Example var x = document.getElementById(“myB”); Try it Yourself » Create a Bold Object You can create a <b> element by using the document.createElement() method: Example var x = document.createElement(“B”); Try it Yourself » Standard […]
Audio Object The Audio Object is new in HTML5. The Audio object represents an HTML <audio> element. Note: The <audio> element is not supported in Internet Explorer 8 and earlier versions. Access an Audio Object You can access an <audio> element by using getElementById(): Example var x = document.getElementById(“myAudio”); Try it Yourself » Create an Audio Object […]
In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element. Properties and Methods The following properties and methods can be used on all HTML elements: Property / Method Description accessKey Sets or returns the accesskey attribute of an element addEventListener() Attaches an event handler to the […]
Style object The Style object represents an individual style statement. Style Object Properties The “CSS” column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3). Property Description CSS alignContent Sets or returns the alignment between the lines inside a flexible container when the items do not use all available space 3 […]
The HTML DOM NodeList Object A NodeList object is a list (collection) of nodes extracted from a document. A NodeList object is almost the same as an HTMLCollection object. Some (older) browsers return a NodeList object instead of an HTMLCollection for methods like getElementsByClassName(). All browsers return a NodeList object for the property childNodes. Most browsers return a NodeList […]
The HTMLCollection Object The getElementsByTagName() method returns an HTMLCollection object. An HTMLCollection object is an array-like list (collection) of HTML elements. The following code selects all <p> elements in a document: Example var x = document.getElementsByTagName(“p”); The elements in the collection can be accessed by an index number. To access the second <p> element you can write: y […]
Adding and Removing Nodes (HTML Elements) Creating New HTML Elements (Nodes) To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element. Example <div id=”div1″> <p id=”p1″>This is a paragraph.</p> <p id=”p2″>This is another paragraph.</p> </div><script> var para = document.createElement(“p”); var node = document.createTextNode(“This is new.”); […]
With the HTML DOM, you can navigate the node tree using node relationships. DOM Nodes According to the W3C HTML DOM standard, everything in an HTML document is a node: The entire document is a document node Every HTML element is an element node The text inside HTML elements are text nodes Every HTML attribute […]
The addEventListener() method Example Add an event listener that fires when a user clicks a button: document.getElementById(“myBtn”).addEventListener(“click”, displayDate); Try it Yourself » The addEventListener() method attaches an event handler to the specified element. The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to […]
HTML DOM allows JavaScript to react to HTML events: Reacting to Events A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute: onclick=JavaScript Examples of HTML events: When a […]
Learn to create HTML animations using JavaScript. A Basic Web Page To demonstrate how to create HTML animations with JavaScript, we will use a simple web page: Example <!DOCTYPE html> <html> <body><h1>My First JavaScript Animation</h1><div id=”animation”>My animation will go here</div></body> </html> Try it Yourself » Create an Animation Container All animations should be relative to a container […]
The HTML DOM allows JavaScript to change the style of HTML elements. Changing HTML Style To change the style of an HTML element, use this syntax: document.getElementById(id).style.property = new style The following example changes the style of a <p> element: Example <html> <body><p id=”p2″>Hello World!</p><script> document.getElementById(“p2”).style.color = “blue”; </script> <p>The paragraph above was changed by a script.</p> </body> </html> Try […]
The HTML DOM allows JavaScript to change the content of HTML elements. Changing the HTML Output Stream JavaScript can create dynamic HTML content: Date: Sun Oct 14 2018 14:15:06 GMT+0500 (Pakistan Standard Time) In JavaScript, document.write() can be used to write directly to the HTML output stream: Example <!DOCTYPE html> <html> <body><script> document.write(Date()); </script></body> </html> Try it […]
This page teaches you how to find and access HTML elements in an HTML page. Finding HTML Elements Often, with JavaScript, you want to manipulate HTML elements. To do so, you have to find the elements first. There are a couple of ways to do this: Finding HTML elements by id Finding HTML elements by […]
