Scribd
Upload
79 views

Building Interactive Websites With JavaScript - JavaScript and The DOM Cheatsheet - Codecademy

The DOM represents an HTML document as a tree structure, with nodes corresponding to elements. The DOM allows JavaScript to access and modify the document. Nodes have properties like parentNode that represent their position in the tree. Elements have attributes that can be accessed through the DOM. Common methods like getElementById, querySelector, and createElement allow selecting, creating, and manipulating nodes. Styles can be changed by modifying an element's style property.

Uploaded by

Christopher Salim
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
79 views

Building Interactive Websites With JavaScript - JavaScript and The DOM Cheatsheet - Codecademy

The DOM represents an HTML document as a tree structure, with nodes corresponding to elements. The DOM allows JavaScript to access and modify the document. Nodes have properties like parentNode that represent their position in the tree. Elements have attributes that can be accessed through the DOM. Common methods like getElementById, querySelector, and createElement allow selecting, creating, and manipulating nodes. Styles can be changed by modifying an element's style property.

Uploaded by

Christopher Salim
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Cheatsheets / Building Interactive Websites with JavaScript

JavaScript and the DOM


Nodes in DOM tree
A node in the DOM tree is the intersection of two
branches containing data. Nodes can represent HTML
elements, text, attributes, etc. The root node is the top-
most node of the tree. The illustration shows a
representation of a DOM containing di erent types of
node.

HTML DOM
The DOM is an interface between scripting languages and
a web page’s structure. The browser creates a Document
Object Model or DOM for each of the webpage it renders.
The DOM allows scripting languages to access and modify
a web page. With the help of DOM, JavaScript gets the
ability to create dynamic HTML.

Accessing HTML attributes in DOM


The DOM nodes of type Element allow access to the same
attributes available to HTML elements. For instance, for <h1 id="heading">Welcome!</h1>
the given HTML element, the id attribute will be
accessible through the DOM.

The Document Object Model


The Document Object Model, or DOM is a representation
of a document (like an HTML page) as a group of objects.
While it is often used to represent HTML documents, and
most web browsers use JavaScript interfaces to the DOM,
it is language agnostic as a model.
The DOM is tree-like and heirarchical, meaning that there
is a single top-level object, and other objects descend
from it in a branching structure.
DOM parent-child relationship
The parent-child relationship observed in the DOM is
re ected in the HTML nesting syntax. <body>
Elements that are nested inside the opening and closing <p>first child</p>
tag of another element are the children of that element <p>second child</p>
in the DOM. </body>
In the code block, the two <p> tags are children of the
<body> , and the <body> is the parent of both <p> tags.

DOM Element Attributes


DOM Nodes of type Element provide access to attributes
of those elements declared in HTML markup. For <p id="intro">Welcome to my website</p>
instance, if an HTML tag has attributes like id or class <script>
or src , those attributes can be accessed through the const paragraph =
DOM.
document.querySelector('p');
console.log(paragraph.id) // "intro"
</scrip>

The element.parentNode Property


The .parentNode property of an element can be used to
return a reference to its direct parent node. .parentNode <div id="parent">
can be used on any node. <p id ="first-child">Some child text</p>
<p id ="second-child">Some more child
text</p>
</div>
<script>
const firstChild =
document.getElementById('first-child');
firstChild.parentNode; // reference to
the parent element
</script>

The JavaScript document.createElement() Method


The document.createElement() method creates and
returns a reference to a new Element Node with the const newButton
speci ed tag name. = document.createElement("button");
document.createElement() does not actually add the new
element to the DOM, it must be attached with a method
such as element.appendChild() .
element.InnerHTML
The element.innerHTML property can be used to access
the HTML markup that makes up an element’s contents. <box>
element.innerHTML can be used to access the current <p>Hello there!</p>
value of an element’s contents or to reassign them. </box>

<script>
const box = document.querySelector('p');
// Outputs '<p>Hello there!</p>':
console.log(box.innerHTML)
// Reassigns the value:
box.innerHTML = '<p>Goodbye</p>'
</script>

JavaScript document.getElementById() Method


The document.getElementById() method returns the
element that has the id attribute with the speci ed // To save a reference to the element with
value. id 'demo':
document.getElementById() returns null if no elements const demoElement =
with the speci ed ID exists.
document.getElementById('demo');
An ID should be unique within a page. However, if more
than one element with the speci ed ID exists, the
.getElementById() method returns the rst element in
the source code.

The JavaScript .querySelector() Method


The .querySelector() method selects the rst
child/descendant element that matches its selector // Select the first <div>
argument. const firstDiv
It can be invoked on the document object to search the = document.querySelector('div');
entire document or on a single element instance to
search that element’s descendants.
// Select the first .button element inside
.main-navigation
const navMenu
= document.getElementById('main-
navigation');
const firstButtonChild
= navMenu.querySelector('.button');

The document.body Object


document.body returns a reference to the contents of the
<body> HTML element of a document/HTML page. The
<body> element contains all the visible contents of the
page.
JavaScript element.onclick property
The element.onclick property can be used to set a
function to run when an element is clicked. For instance, let element
the given code block will add an <li> element each time = document.getElementById('addItem');
the element with ID addItem is clicked by the user. element.onclick = function() {
let newElement
= document.createElement('li');
document.getElementById('list').appendCh
ild(newElement);
};

JavaScript element.appendChild() method.


The parentElement.appendChild(childElement) method
appends an element as the last child of the parent. var node1 = document.createElement('li');
In the given code block, a newly created <li> element document.getElementById('list').appendChil
will be appended as the last child of the HTML element d(node1);
with the ID list .

Changing CSS in Javascript with element.style.


The element.style property can be used to access or set
the CSS style rules of an element. To do so, values are let blueElement
assigned to the attributes of element.style . In the = document.getElementById('colorful-
example code, blueElement contains the HTML elements element');
with the ID colorful-element . By setting the
blueElement.style.backgroundColor
backgroundColor attribute of the style property to
= 'blue';
blue, the CSS property background-color becomes blue.
Also note that, if the CSS property contains a hyphen,
such as font-family or background-color , Camel Case
notation is used in Javascript for the attribute name, so
background-color becomes backgroundColor .

You might also like