DOM Document Flashcards
(38 cards)
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
Hello World
"); document. close();This is 'MsgWindow'. I am 200px wide and 100px tall!
"); ```
