Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Javascript is a Language > DOM elements > Flashcards

DOM elements Flashcards

1
Q

HTMLElementObject.accessKey = character

character: Specifies the shortcut key to activate/focus the element
document. getElementById(“myAnchor”).accessKey = “w”;

A

Sets or returns the accesskey attribute of an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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

A

Attaches an event handler to the specified element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

node.appendChild(node)

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

node.attributes

A

Returns a NamedNodeMap of an element’s attributes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

HTMLElementObject.blur()

A

Removes focus from an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

node.childElementCount

A

Returns the number of child elements an element has

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

element.childNodes

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

element.children

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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
A

Returns the class name(s) of an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

HTMLElementObject.className = class

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

HTMLElementObject.click()

A

Simulates a mouse-click on an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

element.clientHeight

A

Returns the viewable height of an element, including padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

element.clientLeft

A

Returns the width of the left border of an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

element.clientTop

A

Returns the width of the top border of an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

element.clientWidth

A

Returns the viewable width of an element, including padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

Clones an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

Compares the document position of two elements

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

node.contains(node)

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

HTMLElementObject.contentEditable = true|false

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

HTMLElementObject.dir = “ltr|rtl|auto”

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

node.firstChild

A

Returns the first child node of an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

element.firstElementChild

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

HTMLElementObject.focus()

A

Gives focus to an element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

element.getAttribute(attributename)

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

Returns the specified attribute value of an element node

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

element.getAttributeNode(attributename)

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

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

element.getElementsByClassName(classname)

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

element.getElementsByTagName(tagname)

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

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

element.hasAttribute(attributename)

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

node.hasAttributes()

A

Returns true if an element has any attributes, otherwise false

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

node.hasChildNodes()

A

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

31
Q

HTMLElementObject.id = id

A

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

32
Q

HTMLElementObject.innerHTML = text

text: Specifies the HTML content of an element

A

Sets or returns the content of an element

33
Q

node.insertBefore(newnode, existingnode)

A

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

34
Q

HTMLElementObject.isContentEditable

A

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

35
Q

node.isEqualNode(node)

A

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
Q

node.isSameNode(node)

A

Checks if two elements are the same node

37
Q

HTMLElementObject.lang = language_code

A

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

38
Q

node.lastChild

A

Returns the last child node of an element

39
Q

element.lastElementChild

A

Returns the last child element of an element

40
Q

node.nextSibling

A

Returns the next node at the same node tree level

41
Q

node.nextElementSibling

A

Returns the next element at the same node tree level

42
Q

node.nodeName

A

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
Q

node.nodeType

A

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
Q

node.nodeValue = value

A

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
Q

node.normalize()

A

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

46
Q

element.offsetHeight

A

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

47
Q

element.offsetWidth

A

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

48
Q

object.offsetLeft

A

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
Q

object.offsetParent

A

Returns the offset container of an element

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

50
Q

object.offsetTop

A

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
Q

node.parentNode

A

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

52
Q

node.parentElement

A

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
Q

node.previousSibling

A

Returns the previous node at the same node tree level

54
Q

node.previousElementSibling

A

Returns the previous element at the same node tree level

55
Q

element.querySelector(CSS selectors)

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

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

56
Q

element.querySelectorAll(CSS selectors)

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

A

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

57
Q

element.removeAttribute(attributename)

A

Removes a specified attribute from an element

58
Q

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.

A

Removes a specified attribute node, and returns the removed node

59
Q

node.removeChild(node)

A

Removes a child node from an element and returns it

60
Q

node.replaceChild(newnode, oldnode)

A

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

61
Q

element.removeEventListener(event, function, ?useCapture)

A

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

62
Q

element.scrollHeight

A

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

63
Q

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.

A

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

64
Q

element.scrollLeft = pixels

A

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
Q

element.scrollTop = pixels

A

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
Q

element.scrollWidth

A

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

67
Q

element. setAttribute(attributename, attributevalue)

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

A

Sets or changes the specified attribute, to the specified value

68
Q

element.setAttributeNode(attributenode)

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

A

Sets or changes the specified attribute node

69
Q

element. style.property = value

document. getElementById(“myH1”).style.color = “red”;

A

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

70
Q

HTMLElementObject.tabIndex = number

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

A

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

71
Q

element.tagName

A

Returns the tag name of an element

72
Q

node.textContent = text

A

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
Q

HTMLElementObject.title = text

text: A tooltip text for an element

A

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

Javascript is a Language (7 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions