HTML DOM
W3C Tutorial about the HTML DOM
https://www.w3schools.com/js/js_htmldom.asp
Finding
|
document.getElementById(id) |
Find an element by element id |
|
document.getElementsByTagName(name) |
Find elements by tag name |
|
document.getElementsByClassName(name) |
Find elements by class name |
Changing
|
element.innerHTML = new html content |
Change the inner HTML of an element |
|
element.attribute = new value |
Change the attribute value of an HTML element |
|
element.setAttribute(attribute, value) |
Change the attribute value of an HTML element |
|
element.style.property = new style |
Change the style of an HTML element |
Adding and Deleting
|
document.createElement(element) |
Create an HTML element |
|
document.removeChild(element) |
Remove an HTML element |
|
document.appendChild(element) |
Add an HTML element |
|
document.replaceChild(element) |
Replace an HTML element |
|
document.write(text) |
Write into the HTML output stream |
Adding Event Handlers
|
document.getElementById(id).onclick = function(){code} |
Adding event handler code to an onclick event |
Finding HTML Objects
|
document.anchors |
Returns all <a> elements that have a name attribute |
1 |
|
document.applets |
Returns all <applet> elements (Deprecated in HTML5) |
1 |
|
document.baseURI |
Returns the absolute base URI of the document |
3 |
|
document.body |
Returns the <body> element |
1 |
|
document.cookie |
Returns the document's cookie |
1 |
|
document.doctype |
Returns the document's doctype |
3 |
|
document.documentElement |
Returns the <html> element |
3 |
|
document.documentMode |
Returns the mode used by the browser |
3 |
|
document.documentURI |
Returns the URI of the document |
3 |
|
document.domain |
Returns the domain name of the document server |
1 |
|
document.domConfig |
Obsolete. Returns the DOM configuration |
3 |
|
document.embeds |
Returns all <embed> elements |
3 |
|
document.forms |
Returns all <form> elements |
1 |
|
document.head |
Returns the <head> element |
3 |
|
document.images |
Returns all <img> elements |
1 |
|
document.implementation |
Returns the DOM implementation |
3 |
|
document.inputEncoding |
Returns the document's encoding (character set) |
3 |
|
document.lastModified |
Returns the date and time the document was updated |
3 |
|
document.links |
Returns all <area> and <a> elements that have a href attribute |
1 |
|
document.readyState |
Returns the (loading) status of the document |
3 |
|
document.referrer |
Returns the URI of the referrer (the linking document) |
1 |
|
document.scripts |
Returns all <script> elements |
3 |
|
document.strictErrorChecking |
Returns if error checking is enforced |
3 |
|
document.title |
Returns the <title> element |
1 |
|
document.URL |
Returns the complete URL of the document |
1 |
Finding HTML Elemets
id / tag name / class name / CSS selectors / object collections
var myElement = document.getElementById("intro");
var x = document.getElementsByTagName("p");
var x = document.getElementsByClassName("intro");
var x = document.querySelectorAll("p.intro");
HTML Objects and Object collections available:
- document.anchors
- document.body
- document.documentElement
- document.embeds
- document.forms
- document.head
- document.images
- document.links
- document.scripts
- document.title
Created with the Personal Edition of HelpNDoc: Easy to use tool to create HTML Help files and Help web sites