Javascript Document Flashcards
(66 cards)
is the root “abstract” class for everything.
Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called “events”, we’ll study them later.
Event Target
is also an “abstract” class, serving as a base for DOM nodes.
It provides the core tree functionality: parentNode, nextSibling, childNodes and so on (they are getters). Objects of Node class are never created. But there are other classes that inherit from it (and so inherit the Node functionality).
Node
The document global object belongs exactly to this class. It serves as an entry point to the DOM.
Document
an “abstract” class, inherited by:
Text – the class corresponding to a text inside elements, e.g. Hello in <p>Hello</p>.
Comment – the class for comments. They are not shown, but each comment becomes a member of DOM.
Character Data
is the base class for DOM elements.
It provides element-level navigation like nextElementSibling, children and searching methods like getElementsByTagName, querySelector.
Element
is the basic class for all HTML elements. We’ll work with it most of the time.
It is inherited by concrete HTML elements:
HTMLInputElement – the class for <input></input> elements,
HTMLBodyElement – the class for <body> elements,
HTMLAnchorElement – the class for <a> elements,</a>
HTMLElement
alert( document.body instanceof HTMLBodyElement ); // true
alert( document.body instanceof HTMLElement ); // true
alert( document.body instanceof Element ); // true
alert( document.body instanceof Node ); // true
alert( document.body instanceof EventTarget ); // true
instanceOf
property provides one more, “old-fashioned” way to get the “type” of a DOM node.
nodeType
let elem = document.body;
// let’s examine: what type of node is in elem?
alert(elem.nodeType); // 1 => element
// and its first child is…
alert(elem.firstChild.nodeType); // 3 => text
// for the document object, the type is 9
alert( document.nodeType ); // 9
Given a DOM node, we can read its _____ from _______ or tagName properties:
nodeName, tagName
alert( document.body.nodeName ); // BODY
alert( document.body.tagName ); // BODY
For instance, let’s compare tagName and nodeName for the document and a comment node:
<script>
// for comment
alert( document.body.firstChild.tagName ); // undefined (not an element)
alert( document.body.firstChild.nodeName ); // #comment
// for document
alert( document.tagName ); // undefined (not an element)
alert( document.nodeName ); // #document
</script>property allows to get the HTML inside the element as a string.
innerHTML
alert( document.body.innerHTML ); // read the current contents
document.body.innerHTML = ‘The new BODY!’; // replace it
“innerHTML+=” does a full overwrite
true
In other words, innerHTML+= does this:
The old contents is removed.
The new innerHTML is written instead (a concatenation of the old and the new one).
property contains the full HTML of the element. That’s like innerHTML plus the element itself.
outerHTML
Beware: unlike innerHTML, writing to outerHTML does not change the element. Instead, it replaces it in the DOM.
True
The outerHTML assignment does not modify the DOM element (the object referenced by, in this case, the variable ‘div’), but removes it from the DOM and inserts the ___ _____ in its place.
new HTML
property is only valid for element nodes.
innerHTML
Other node types, such as text nodes, have their counterpart: _____ and ____ properties
data
provides access to the text inside the element: only text, minus all <tags>.</tags>
textContent
specifies whether the element is visible or not.
“hidden” attribute
DOM nodes are regular JavaScript objects. We can alter them.
True
For instance, let’s create a new property in document.body
document.body.myData = {
name: ‘Caesar’,
title: ‘Imperator’
};
alert(document.body.myData.title); // Imperator
We can add a method as well:
document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of “this” in the method is document.body)
So when an element has id or another standard attribute, the corresponding property gets created. But that doesn’t happen if the attribute is ____-_______
non-standard
-
Key Links
-
Subjects
-
Company
-
Find Us
-
