DOM Document Flashcards
document.activeElement
Returns the currently focused element in the document
document. addEventListener(event, function, ?useCapture)
event: A String that specifies the name of the event. (Note: Do not use the “on” prefix. For example, use “click” instead of “onclick”.)
function: Specifies the function to run when the event occurs.
When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the “click” event belongs to the MouseEvent object.
useCapture: A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase. true - The event handler is executed in the capturing phase. false- Default. The event handler is executed in the bubbling phase
Ex:
document.addEventListener(“click”, function(){
document.getElementById(“demo”).innerHTML = “Hello World”;
});
Attaches an event handler to the document
document.adoptNode(node)
Adopts a node from another document
node.baseURI
var x = document.baseURI;
Returns the absolute base URI of a document
document.body
Sets or returns the document’s body (the element)
document.close()
ex:
document. open();
document. write(“<h1>Hello World</h1>”);
document. close();
Closes the output stream previously opened with document.open()
document.cookie
ex:
document.cookie=”username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;
Sets or returns all name/value pairs of cookies in the current document
document.createAttribute(attributename)
ex:
var h1 = document.getElementsByTagName(“H1”)[0];
var att = document.createAttribute(“class”);
att.value = “democlass”;
h1.setAttributeNode(att);
Note: Often, you will want to use the element.setAttribute() method instead of the createAttribute() method.
Creates an attribute node
document.createComment(text)
ex:
var c = document.createComment("My personal comments");
document.body.appendChild(c);
Creates a Comment node with the specified text
document.createDocumentFragment()
var d = document.createDocumentFragment();
d. appendChild(document.getElementsByTagName(“LI”)[0]);
d. childNodes[0].childNodes[0].nodeValue = “Milk”;
document. getElementsByTagName(“UL”)[0].appendChild(d);
from -Coffee -Tea to -Tea -Milk
Creates an empty DocumentFragment node, useful when you want to extract parts of your document, change, add, or delete, some of the content, and insert it back to your document.
document.createElement(nodename)
ex:
var btn = document.createElement(“BUTTON”);
var t = document.createTextNode(“CLICK ME”);
btn.appendChild(t);
document.body.appendChild(btn);
Creates an Element node
document.createTextNode(text)
var h = document.createElement("H1") // Create a <h1> element
var t = document.createTextNode("Hello World"); // Create a text node
h.appendChild(t);</h1>
Creates a Text node
document.documentMode
Returns the mode used by the browser to render the document in IE
document.documentURI
can be used on any document types, whereas URL can only be used on HTML documents.
Sets or returns the location of the document
document.domain
Returns the domain name of the server that loaded the document
document.embeds
.length
[index]
item(index)
namedItem(id)
Returns a collection of all elements the document
document.forms
.length
[index]
item(index)
namedItem(id)
Returns a collection of all elements in the document
document. getElementById(elementID)
document. getElementById(“demo”);
Returns the element that has the ID attribute with the specified value
document. getElementsByClassName(classname)
ex: var x = document.getElementsByClassName(“example color”);
Returns a NodeList containing all elements with the specified class name
document.getElementsByTagName(tagname)
var x = document.getElementsByTagName("LI");
"*" returns all elements in document
Returns a NodeList containing all elements with the specified tag name
document.hasFocus()
Returns a Boolean value indicating whether the document has focus
document.head
Returns the element of the document
document.images
Returns a collection of all <img></img> elements in the document
document. importNode(node, ?deep)
deep: If set to false, only the node itself is imported, if set to true, all child nodes (descendants) are also imported
Tip: Use the document.adoptNode() method to remove and import a node from another document.
Tip: Use the element.cloneNode() method to copy a node from the current document.
Imports a node from another document
Clones the node
document.lastModified
Returns the date and time the document was last modified
document.links
.length
[index]
item(index)
namedItem(id)
Returns a collection of all <a> and elements in the document that have a href attribute</a>
document.normalize()
Removes empty Text nodes, and joins adjacent nodes
document.open(?MIMEtype, ?replace)
MIMEtype: The type of document you are writing to. Default value is “text/html”
replace: If set, the history entry for the new document inherits the history entry from the document which opened this document
ex:
document. open();
document. write(“<h1>Hello World</h1>”);
document. close();
Opens an HTML output stream to collect output from document.write() or document.writeln() methods. Once all the writes are performed, the document.close() method causes any output written to the output stream to be displayed.
document. querySelector(CSS selectors)
document. querySelector(“.example”);
For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See “More Examples”).
Returns the first element that matches a specified CSS selector(s) in the document
document.querySelectorAll(CSS selectors)
var x = document.querySelectorAll(“p.example”);
Returns a static NodeList containing all elements that matches a specified CSS selector(s) in the document
document.readyState
One of five values:
uninitialized - Has not started loading yet
loading - Is loading
loaded - Has been loaded
interactive - Has loaded enough and the user can interact with it
complete - Fully loaded
Returns the (loading) status of the document
document.referrer
Returns the URL of the document that loaded the current document
document.removeEventListener(event, function, useCapture)
Removes an event handler from the document (that has been attached with the addEventListener() method)
document.scripts
Returns a collection of elements in the document
document.title
Sets or returns the title of the document
document.URL
Returns the full URL of the HTML document
document.write(exp1, exp2, exp3, …)
var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
Writes HTML expressions or JavaScript code to a document
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
document.writeln(exp1, exp2, exp3, …)
writeln() method is identical to the document.write() method, with the addition of writing a newline character after each statement.
Same as write(), but adds a newline character after each statement
