DOM elements

Question 1

HTMLElementObject.accessKey = character

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

Answer 1

Sets or returns the accesskey attribute of an element

Question 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

Answer 2

Attaches an event handler to the specified element

Question 3

node.appendChild(node)

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

Answer 3

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.

Question 4

node.attributes

Answer 4

Returns a NamedNodeMap of an element’s attributes

Question 5

HTMLElementObject.blur()

Answer 5

Removes focus from an element

Question 6

node.childElementCount

Answer 6

Returns the number of child elements an element has

Question 7

element.childNodes

Answer 7

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.

Question 8

element.children

Answer 8

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

Question 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

Answer 9

Returns the class name(s) of an element

Question 10

HTMLElementObject.className = class

Answer 10

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

Question 11

HTMLElementObject.click()

Answer 11

Simulates a mouse-click on an element

Question 12

element.clientHeight

Answer 12

Returns the viewable height of an element, including padding

Question 13

element.clientLeft

Answer 13

Returns the width of the left border of an element

Question 14

element.clientTop

Answer 14

Returns the width of the top border of an element

Question 15

element.clientWidth

Answer 15

Returns the viewable width of an element, including padding

Question 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

Answer 16

Clones an element

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

Answer 17

Compares the document position of two elements

Question 18

node.contains(node)

Answer 18

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

Question 19

HTMLElementObject.contentEditable = true|false

Answer 19

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

Question 20

HTMLElementObject.dir = “ltr|rtl|auto”

Answer 20

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.

Question 21

node.firstChild

Answer 21

Returns the first child node of an element

Question 22

element.firstElementChild

Answer 22

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

Question 23

HTMLElementObject.focus()

Answer 23

Gives focus to an element

Question 24

element.getAttribute(attributename)

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

Answer 24

Returns the specified attribute value of an element node

Question 25

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

Answer 25

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.

Question 26

element.getElementsByClassName(classname)

Answer 26

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

Question 27

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

Answer 27

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

Question 28

element.hasAttribute(attributename)

Answer 28

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

Question 29

node.hasAttributes()

Answer 29

Returns true if an element has any attributes, otherwise false

Question 30

node.hasChildNodes()

Answer 30

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

Question 31

HTMLElementObject.id = id

Answer 31

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

Question 32

HTMLElementObject.innerHTML = text text: Specifies the HTML content of an element

Answer 32

Sets or returns the content of an element

Question 33

node.insertBefore(newnode, existingnode)

Answer 33

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

Question 34

HTMLElementObject.isContentEditable

Answer 34

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

Question 35

node.isEqualNode(node)

Answer 35

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)

Question 36

node.isSameNode(node)

Answer 36

Checks if two elements are the same node

Question 37

HTMLElementObject.lang = language_code

Answer 37

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

Question 38

node.lastChild

Answer 38

Returns the last child node of an element

Question 39

element.lastElementChild

Answer 39

Returns the last child element of an element

Question 40

node.nextSibling

Answer 40

Returns the next node at the same node tree level

Question 41

node.nextElementSibling

Answer 41

Returns the next element at the same node tree level

Question 42

node.nodeName

Answer 42

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

Question 43

node.nodeType

Answer 43

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.

Question 44

node.nodeValue = value

Answer 44

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.

Question 45

node.normalize()

Answer 45

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

Question 46

element.offsetHeight

Answer 46

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

Question 47

element.offsetWidth

Answer 47

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

Question 48

object.offsetLeft

Answer 48

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.

Question 49

object.offsetParent

Answer 49

Returns the offset container of an element The offsetParent property returns the nearest ancestor that has a position other than static.

Question 50

object.offsetTop

Answer 50

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.

Question 51

node.parentNode

Answer 51

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

Question 52

node.parentElement

Answer 52

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:

Question 53

node.previousSibling

Answer 53

Returns the previous node at the same node tree level

Question 54

node.previousElementSibling

Answer 54

Returns the previous element at the same node tree level

Question 55

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

Answer 55

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

Question 56

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

Answer 56

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

Question 57

element.removeAttribute(attributename)

Answer 57

Removes a specified attribute from an element

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

Answer 58

Removes a specified attribute node, and returns the removed node

Question 59

node.removeChild(node)

Answer 59

Removes a child node from an element and returns it

Question 60

node.replaceChild(newnode, oldnode)

Answer 60

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

Question 61

element.removeEventListener(event, function, ?useCapture)

Answer 61

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

Question 62

element.scrollHeight

Answer 62

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

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

Answer 63

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

Question 64

element.scrollLeft = pixels

Answer 64

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

Question 65

element.scrollTop = pixels

Answer 65

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

Question 66

element.scrollWidth

Answer 66

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

Question 67

element. setAttribute(attributename, attributevalue) | document. getElementsByTagName("H1")[0].setAttribute("class", "democlass");

Answer 67

Sets or changes the specified attribute, to the specified value

Question 68

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

Answer 68

Sets or changes the specified attribute node

Question 69

element. style.property = value | document. getElementById("myH1").style.color = "red";

Answer 69

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

Question 70

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

Answer 70

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

Question 71

element.tagName

Answer 71

Returns the tag name of an element

Question 72

node.textContent = text

Answer 72

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.

Question 73

HTMLElementObject.title = text text: A tooltip text for an element

Answer 73

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