DOM elements Flashcards
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
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
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.
node.attributes
Returns a NamedNodeMap of an element’s attributes
HTMLElementObject.blur()
Removes focus from an element
node.childElementCount
Returns the number of child elements an element has
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.
element.children
Returns a collection of an element’s child element (excluding text and comment nodes)
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
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”
HTMLElementObject.click()
Simulates a mouse-click on an element
element.clientHeight
Returns the viewable height of an element, including padding
element.clientLeft
Returns the width of the left border of an element
element.clientTop
Returns the width of the top border of an element
element.clientWidth
Returns the viewable width of an element, including padding
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
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
node.contains(node)
Returns true if a node is a descendant of a node, otherwise false
HTMLElementObject.contentEditable = true|false
Sets or returns whether the content of an element is editable or not
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.
node.firstChild
Returns the first child node of an element
element.firstElementChild
Returns the first child element of an element (not text or comment node)
HTMLElementObject.focus()
Gives focus to an element
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
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.
element.getElementsByClassName(classname)
Returns a collection of all child elements with the specified class name
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
element.hasAttribute(attributename)
Returns true if an element has the specified attribute, otherwise false
node.hasAttributes()
Returns true if an element has any attributes, otherwise false
node.hasChildNodes()
Returns true if an element has any child nodes, otherwise false
HTMLElementObject.id = id
Sets or returns the value of the id attribute of an element
HTMLElementObject.innerHTML = text
text: Specifies the HTML content of an element
Sets or returns the content of an element
node.insertBefore(newnode, existingnode)
Inserts a new child node before a specified, existing, child node
HTMLElementObject.isContentEditable
Returns true if the content of an element is editable, otherwise false
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)
node.isSameNode(node)
Checks if two elements are the same node
HTMLElementObject.lang = language_code
Sets or returns the value of the lang attribute of an element
node.lastChild
Returns the last child node of an element
element.lastElementChild
Returns the last child element of an element
node.nextSibling
Returns the next node at the same node tree level
node.nextElementSibling
Returns the next element at the same node tree level
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).
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.
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.
node.normalize()
Joins adjacent text nodes and removes empty text nodes in an element
element.offsetHeight
Returns the viewable height of an element, including padding, border and scrollbar but not margin
element.offsetWidth
Returns the viewable width of an element, including padding, border and scrollbar but not margin
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.
object.offsetParent
Returns the offset container of an element
The offsetParent property returns the nearest ancestor that has a position other than static.
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.
node.parentNode
Returns the parent node of an element or null if no parent
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:
node.previousSibling
Returns the previous node at the same node tree level
node.previousElementSibling
Returns the previous element at the same node tree level
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
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
element.removeAttribute(attributename)
Removes a specified attribute from an element
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
node.removeChild(node)
Removes a child node from an element and returns it
node.replaceChild(newnode, oldnode)
Replaces a child node in an element, returns a Node object, representing the replaced node
element.removeEventListener(event, function, ?useCapture)
Removes an event handler that has been attached with the addEventListener() method
element.scrollHeight
Returns the entire height of an element, including padding, but not the border, scrollbar or margin.
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
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
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
element.scrollWidth
Returns the entire width of an element, including padding, but not the border, scrollbar or margin.
element. setAttribute(attributename, attributevalue)
document. getElementsByTagName(“H1”)[0].setAttribute(“class”, “democlass”);
Sets or changes the specified attribute, to the specified value
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
element. style.property = value
document. getElementById(“myH1”).style.color = “red”;
Sets or returns the value of the style attribute of an element
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
element.tagName
Returns the tag name of an element
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.
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)
