DOM (Document Object Modal) in javascript
DOCUMENT.METHOD().PROPERTY:
document.getElementById("demo").innerHTML = "Hello World!";
FIND HTML ELEMENTS by id,tagname,classname and query ,form
- document.getElementById("intro") Find an element by id="intro"
- document.getElementsByTagName("p") All <p> tags
- document.getElementsByClassName("intro") Find all elements by class="intro"
- var x = document.querySelectorAll("p.intro"); //specific selector x[0],x[1]
- var x = document.forms["frm1"];// x.elements[0]; //frm1 is id of form
CHANGE HTML ELEMENTS
element.innerHTML = new html content
ie document.getElementById("p1").innerHTML = "New text!";
element.attribute = new value
ie document.getElementById("myImage").src = "landscape.jpg";
element.style.property =
document.getElementById("p2").style.color = "blue";
element.setAttribute(attribute, value);
ADD OR DELETE ELEMENTS
- document.createElement(element)
- document.removeChild(element)
- document.appendChild(element)
- document.replaceChild(new, old)
- document.write(text);
ADD EVENTS:
document.getElementById(id).onclick = function(){code}
DOCUMENT PROPERTIES
- document.anchors
- document.baseURI
- document.body
- document.cookie
- document.doctype
- document.documentElement //<HTML>
- document.documentMode
- document.documentURI
- document.domain
- document.domConfig
- document.embeds
- document.forms
- document.head
- document.images //<IMG>
- document.implementation
- document.inputEncodin
- document.lastModified
- document.links
- document.readyState
- document.referrer
- document.scripts <SCRIPT>
- document.strictErrorChecking
- document.title
- document.URL
NODES:: every thing in js is like node
var myTitle = document.getElementById("demo").firstChild.nodeValue;
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
GET WHOLE SOURCE CODE:
document.body - The body of the document
document.documentElement - The full document
document.getElementById("id01").nodeName;
NODE TYPES:
document.getElementById("id01").nodeType;
Node Type Example
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2 class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>
NOTES:
- Document IS web page.
- method used to access element,
- property used to access content or change