JavaScript - Document

Ace your homework & exams now with Quizwiz!

Element-only Navigation

Manipulate element nodes that represent tags and form the structure of the page. Text or comment nodes not included. Example: - children - firstElementChild - lastElementChild - previousElementSibling - nextElementSibling - parentElement

Host Environment

Provides own objects and functions additional to the core language. Examples are web browsers and servers.

Document Object Model (DOM)

Represents all page content as objects that can be modified. Describes the document structure, manipulations and events.

elem.querySelectorAll(css)

Returns all elements inside elem matching the given CSS selector.

elem.querySelector(css)

Returns the first element for the given CSS selector.

Node Navigation

Set of properties that help in navigation: - parentNode - childNodes - firstChild - lastChild - previousSibling - nextSibling

text nodes

The text inside elements. It contains only a string. It may not have children and is always a leaf of the tree.

outerHTML

contains the full HTML of the element. That's like innerHTML plus the element itself.

navigator object

provides background information about the browser and the OS. Its most widely known properties are navigator.userAgent and navigator.platform

nodeType

provides one more, "old-fashioned" way to get the "type" of a DOM node.

Browser Object Model (BOM)

represents additional objects provided by the browser (host environment) for working with everything except the document.

console.log(elem)

shows the element DOM tree

console.dir(elem)

shows the element as a DOM object, good to explore its properties

HTMLAnchorElement

the class for <a> elements

HTMLBodyElement

the class for <body> elements

HTMLInputElement

the class for <input> elements

Siblings

Are nodes that are children of the same parent.

elem.closest(css)

Looks the nearest ancestor that matches the CSS-selector.

Important Reminders for DOM Collection:

- We can use for..of to iterate over it - Array methods won't work, because it's not an array - Are read-only - Are live - reflect the current state of DOM - Don't use for..in to loop over collections

The Topmost Tree Nodes

- document.documentElement - document.body - document.head

Types of nodes that is often used

1. document 2. element nodes 3. text nodes 4. comments

Collection

A special array-like iterable object.

Descendants

All elements that are nested in the given one, including children, their children and so on.

Styles (Chrome Developer Tools)

Allows us to see CSS applied to the current element rule by rule, including built-in rules. Almost everything can be edited in-place, including the dimensions/margins/padding

Array.from()

Create a "real" array from the collection, if we want array methods.

elem.matches(css)

Does not look for anything, it merely checks if elem matches the given CSS-selector. It returns true or false.

Child/Children Nodes

Elements that are nested exactly in the selected node.

Ancestors

Form the chain of parents from the element to the top.

document.getElementById(id)

Get the element with an id attribute no matter where it is.

childNodes

Is a collection that lists all child nodes, including text nodes.

document object

Is the main entry point to the page. Allows for us to change or create anything on the page using it.

Window

The "root" object. It is a global object for JavaScript code and it represents the "browser window" and provides method to control it.

Computed (Chrome Developer Tools)

To see CSS applied to the element by property

Event Listeners (Chrome Developer Tools)

To see event listeners attached to DOM elements

navigator.userAgent

about the current browser

navigator.platform

about the platform (windows/linux/mac)

innerHTML

allows to get the HTML inside the element as a string.

Node

an "abstract" class, serving as a base for DOM nodes. It provides the core tree functionality.Objects of Node class are never created. But there are concrete node classes that inherit from it, namely: text, element and comment nodes.

element nodes

are HTML tags and form the tree structure. html is the root, then head and body are its children.

Autocorrection

if the browser encounters malformed HTML, it automatically corrects it when making the DOM

Element

is a base class for DOM elements. It provides element-level navigation and searching methods. The Element class serves as a base for more specific classes: SVGElement, XMLElement and HTMLElement.

HTMLElement

is finally the basic class for all HTML elements. It is inherited by concrete HTML elements.

EventTarget

is the root "abstract" class. Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events".


Related study sets

Metrix Learning CompTIA A+ 220-1102 Review Questions

View Set

Grammar Unit 4- Identifying Types of Phrases

View Set

English 3 Study Guide Crucible Act 1

View Set

Chapter 5 International Business test 1

View Set