DOM Document Flashcards Preview

Javascript is a Language > DOM Document > Flashcards

Flashcards in DOM Document Deck (38):
1

document.activeElement

Returns the currently focused element in the document

2

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

3

document.adoptNode(node)

Adopts a node from another document

4

node.baseURI

var x = document.baseURI;

Returns the absolute base URI of a document

5

document.body

Sets or returns the document's body (the element)

6

document.close()

ex:
document.open();
document.write("

Hello World

");
document.close();

Closes the output stream previously opened with document.open()

7

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

8

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

9

document.createComment(text)

ex:
var c = document.createComment("My personal comments");
document.body.appendChild(c);

Creates a Comment node with the specified text

10

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.

11

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

12

document.createTextNode(text)

var h = document.createElement("H1") // Create a

element
var t = document.createTextNode("Hello World"); // Create a text node
h.appendChild(t);

Creates a Text node

13

document.documentMode

Returns the mode used by the browser to render the document in IE

14

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

15

document.domain

Returns the domain name of the server that loaded the document

16

document.embeds

.length
[index]
item(index)
namedItem(id)

Returns a collection of all elements the document

17

document.forms

.length
[index]
item(index)
namedItem(id)

Returns a collection of all elements in the document

18

document.getElementById(elementID)

document.getElementById("demo");

Returns the element that has the ID attribute with the specified value

19

document.getElementsByClassName(classname)

ex: var x = document.getElementsByClassName("example color");

Returns a NodeList containing all elements with the specified class name

20

document.getElementsByTagName(tagname)

var x = document.getElementsByTagName("LI");
"*" returns all elements in document

Returns a NodeList containing all elements with the specified tag name

21

document.hasFocus()

Returns a Boolean value indicating whether the document has focus

22

document.head

Returns the element of the document

23

document.images

Returns a collection of all elements in the document

24

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

25

document.lastModified

Returns the date and time the document was last modified

26

document.links

.length
[index]
item(index)
namedItem(id)

27

document.normalize()

Removes empty Text nodes, and joins adjacent nodes

28

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("

Hello World

");
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.

29

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

30

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

31

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

32

document.referrer

Returns the URL of the document that loaded the current document

33

document.removeEventListener(event, function, useCapture)

Removes an event handler from the document (that has been attached with the addEventListener() method)

34

document.scripts

Returns a collection of elements in the document

35

document.title

Sets or returns the title of the document

36

document.URL

Returns the full URL of the HTML document

37

document.write(exp1, exp2, exp3, ...)

var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write("

This is 'MsgWindow'. I am 200px wide and 100px tall!

");

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.

38

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