DOM elements Flashcards Preview

Javascript is a Language > DOM elements > Flashcards

Flashcards in DOM elements Deck (73):
1

HTMLElementObject.accessKey = character

character: Specifies the shortcut key to activate/focus the element

document.getElementById("myAnchor").accessKey = "w";

Sets or returns the accesskey attribute of an element

2

element.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.
Possible values:
true - The event handler is executed in the capturing phase
false- Default. The event handler is executed in the bubbling phase

Attaches an event handler to the specified element

3

node.appendChild(node)

ex:
var node = document.createElement("LI");
var textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

Adds a new child node, to an element, as the last child node. Tip: If you want to create a new paragraph, with text, remember to create the text as a Text node which you append to the paragraph, then append the paragraph to the document.

4

node.attributes

Returns a NamedNodeMap of an element's attributes

5

HTMLElementObject.blur()

Removes focus from an element

6

node.childElementCount

Returns the number of child elements an element has

7

element.childNodes

Returns a collection of an element's child nodes (including text and comment nodes)

Tip: To return a collection of a node's element nodes (excluding text and comment nodes), use the children property.

8

element.children

Returns a collection of an element's child element (excluding text and comment nodes)

9

element.classList

.add - adds class name to element if not found
.contains(class) - returns boolean
.item(index) - returns class name at index
.remove(class1, class2...) removes class(es), if nonexistent, no error
.toggle(class, ?true|false) - adds or removes depending on if there; true/false forces add/remove

Returns the class name(s) of an element

10

HTMLElementObject.className = class

Sets or returns the value of the class attribute of an element. To apply multiple classes, separate them with spaces, like "test demo"

11

HTMLElementObject.click()

Simulates a mouse-click on an element

12

element.clientHeight

Returns the viewable height of an element, including padding

13

element.clientLeft

Returns the width of the left border of an element

14

element.clientTop

Returns the width of the top border of an element

15

element.clientWidth

Returns the viewable width of an element, including padding

16

node.cloneNode(?deep)

deep: Specifies whether all descendants of the node should be cloned.
true - Clone the node, its attributes, and its descendants
false - Default. Clone only the node and its attributes

Clones an element

17

node.compareDocumentPosition(node)

The possible return values would specify:

1: No relationship, the two nodes do not belong to the same document.

2: The first node (p1) is positioned after the second node (p2).

4: The first node (p1) is positioned before the second node (p2).

8: The first node (p1) is positioned inside the second node (p2).

16: The second node (p2) is positioned inside the first node (p1).

32: No relationship, or the two nodes are two attributes on the same element.

Note: The return value could also be a combination of values. I.e. the return value 20 means that p2 is inside p1 (16) AND p1 is positioned before p2 (4).

Compares the document position of two elements

18

node.contains(node)

Returns true if a node is a descendant of a node, otherwise false

19

HTMLElementObject.contentEditable = true|false

Sets or returns whether the content of an element is editable or not

20

HTMLElementObject.dir = "ltr|rtl|auto"

Sets or returns the value of the dir attribute of an element. The dir attribute specifies the text-direction (reading order) of the element's content.

21

node.firstChild

Returns the first child node of an element

22

element.firstElementChild

Returns the first child element of an element (not text or comment node)

23

HTMLElementObject.focus()

Gives focus to an element

24

element.getAttribute(attributename)

var x = document.getElementsByTagName("H1")[0].getAttribute("class");
var x = document.getElementById("myAnchor").getAttribute("target");

Returns the specified attribute value of an element node

25

element.getAttributeNode(attributename)

ex:
var elmnt = document.getElementsByTagName("H1")[0];
var attr = elmnt.getAttributeNode("class").value;

Returns the specified attribute node

Tip: Use the attribute.value property to return the value of the attribute node.

Tip: Use the getAttribute() method if you just want to return the attribute value.

26

element.getElementsByClassName(classname)

Returns a collection of all child elements with the specified class name

27

element.getElementsByTagName(tagname)

ex:
var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";

Returns a collection of all child elements with the specified tag name

28

element.hasAttribute(attributename)

Returns true if an element has the specified attribute, otherwise false

29

node.hasAttributes()

Returns true if an element has any attributes, otherwise false

30

node.hasChildNodes()

Returns true if an element has any child nodes, otherwise false

31

HTMLElementObject.id = id

Sets or returns the value of the id attribute of an element

32

HTMLElementObject.innerHTML = text

text: Specifies the HTML content of an element

Sets or returns the content of an element

33

node.insertBefore(newnode, existingnode)

Inserts a new child node before a specified, existing, child node

34

HTMLElementObject.isContentEditable

Returns true if the content of an element is editable, otherwise false

35

node.isEqualNode(node)

Checks if two elements are equal

Two nodes are equal if all the following conditions are true:

They have the same Node Type
They have the same nodeName, NodeValue, localName, nameSpaceURI and prefix
They have the same childNodes with all the descendants
They have the same attributes and attribute values (the attributes does not have be in the same order)

36

node.isSameNode(node)

Checks if two elements are the same node

37

HTMLElementObject.lang = language_code

Sets or returns the value of the lang attribute of an element

38

node.lastChild

Returns the last child node of an element

39

element.lastElementChild

Returns the last child element of an element

40

node.nextSibling

Returns the next node at the same node tree level

41

node.nextElementSibling

Returns the next element at the same node tree level

42

node.nodeName

Returns the name of a node

If the node is an element node, the nodeName property will return the tag name.

If the node is an attribute node, the nodeName property will return the name of the attribute.

For other node types, the nodeName property will return different names for different node types.

Tip: You can also use the tagName property to return the tag name of an element. The difference is that tagName only return tag names, while nodeName returns the name of all nodes (tags, attributes, text, comments).

43

node.nodeType

Returns the node type of a node

If the node is an element node, the nodeType property will return 1.

If the node is an attribute node, the nodeType property will return 2.

If the node is a text node, the nodeType property will return 3.

If the node is a comment node, the nodeType property will return 8.

44

node.nodeValue = value

Sets or returns the value of a node

The nodeValue property sets or returns the node value of the specified node.

If the node is an element node, the nodeValue property will return null.

Note: If you want to return the text of an element, remember that text is always inside a Text node, and you will have to return the Text node's node value (element.childNodes[0].nodeValue).

For other node types, the nodeValue property will return different values for different node types.

Tip: An alternative to the nodeValue property can be the textContent property.

45

node.normalize()

Joins adjacent text nodes and removes empty text nodes in an element

46

element.offsetHeight

Returns the viewable height of an element, including padding, border and scrollbar but not margin

47

element.offsetWidth

Returns the viewable width of an element, including padding, border and scrollbar but not margin

48

object.offsetLeft

Returns the horizontal offset position of an element

The returned value includes:

the left position, and margin of the element
the left padding, scrollbar and border of the offsetParent element
Note: The offsetParent element is the nearest ancestor that has a position other than static.

49

object.offsetParent

Returns the offset container of an element

The offsetParent property returns the nearest ancestor that has a position other than static.

50

object.offsetTop

Returns the vertical offset position of an element

The returned value includes:

the top position, and margin of the element
the top padding, scrollbar and border of the offsetParent element
Note: The offsetParent element is the nearest ancestor that has a position other than static.

51

node.parentNode

Returns the parent node of an element or null if no parent

52

node.parentElement

Returns the parent element node of an element

The difference between parentElement and parentNode, is that parentElement returns null if the parent node is not an element node:

53

node.previousSibling

Returns the previous node at the same node tree level

54

node.previousElementSibling

Returns the previous element at the same node tree level

55

element.querySelector(CSS selectors)

ex:
var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Returns the first child element that matches a specified CSS selector(s) of an element

56

element.querySelectorAll(CSS selectors)

var x = document.getElementById("myDIV").querySelectorAll("p");

Returns all child elements that matches a specified CSS selector(s) of an element

57

element.removeAttribute(attributename)

Removes a specified attribute from an element

58

element.removeAttributeNode(attributenode)

The difference between this method and the removeAttribute() method, is that the removeAttribute() method removes the attribute with the specified name, while this method removes the specified Attr object. The result will be the same. Also, the removeAttribute() method has no return value, while this method returns the removed attribute, as an Attr object.

Removes a specified attribute node, and returns the removed node

59

node.removeChild(node)

Removes a child node from an element and returns it

60

node.replaceChild(newnode, oldnode)

Replaces a child node in an element, returns a Node object, representing the replaced node

61

element.removeEventListener(event, function, ?useCapture)

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

62

element.scrollHeight

Returns the entire height of an element, including padding, but not the border, scrollbar or margin.

63

element.scrollIntoView(alignTo)

alignTo: A boolean value that indicates the type of the align:
true - the top of the element will be aligned to the top of the visible area of the scrollable ancestor
false - the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.

If omitted, it will scroll to the top of the element.

Note: Depending on the layout of other elements, some elements may not be scrolled completely to the top or to the bottom.

Scrolls the specified element into the visible area of the browser window

64

element.scrollLeft = pixels

Sets or returns the number of pixels an element's content is scrolled horizontally

Special notes:
If the number is a negative value, the number is set to "0"
If the element cannot be scrolled, the number is set to "0"
If the number is greater than the maximum allowed scroll amount, the number is set to the maximum number

65

element.scrollTop = pixels

Sets or returns the number of pixels an element's content is scrolled vertically

Special notes:
If the number is a negative value, the number is set to "0"
If the element cannot be scrolled, the number is set to "0"
If the number is greater than the maximum allowed scroll amount, the number is set to the maximum number

66

element.scrollWidth

Returns the entire width of an element, including padding, but not the border, scrollbar or margin.

67

element.setAttribute(attributename, attributevalue)

document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");

Sets or changes the specified attribute, to the specified value

68

element.setAttributeNode(attributenode)

ex:
var h1 = document.getElementsByTagName("H1")[0];
var att = document.createAttribute("class");
att.value = "democlass";
h1.setAttributeNode(att);

Sets or changes the specified attribute node

69

element.style.property = value

document.getElementById("myH1").style.color = "red";

Sets or returns the value of the style attribute of an element

70

HTMLElementObject.tabIndex = number

document.getElementById("myAnchor1").tabIndex = "3";
document.getElementById("myAnchor2").tabIndex = "2";
document.getElementById("myAnchor3").tabIndex = "1";

Sets or returns the value of the tabindex attribute of an element

71

element.tagName

Returns the tag name of an element

72

node.textContent = text

Sets or returns the textual content of a node and its descendants

If you set the textContent property, any child nodes are removed and replaced by a single Text node containing the specified string.

73

HTMLElementObject.title = text

text: A tooltip text for an element

Sets or returns the value of the title attribute of an element (often used in tool tip)