Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

DOM Manipulation

memorize.ai (lvl 286)

(0)

39 cards

()

Section 1

Preview this deck

removing an element from a page

Front

1 / 39

Web Dev

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (39)

Section 1

(39 cards)

removing an element from a page

Front

heroes.removeChild(aquaman);

Back

removing a class via classList

Front

wonderWoman.classList.remove('hero')

Back

return a live node list of all elements that have the class name that is supplied as an argument

Front

document.getElementByClassName('class');

Back

replacing one node with another

Front

const h1 = document.getElementById('title'); const oldText = h1.firstChild; const newText = document.createTextNode('Justice League of ➥ America'); The Document Object Model 243 h1.replaceChild(newText,oldText);

Back

appending a text node to an element

Front

flash.appendChild(flashText);

Back

nodeName

Front

returns the name of the node object: body.nodeName; <<"BODY"

Back

contains method

Front

checks to see if an element has a particular class: wonderWoman.classList.contains('hero');

Back

Updated CSS of an element

Front

const heroes = document.getElementById('roster'); const superman = heroes.children[0]; superman.style.border = "red 2px solid"; << "red 2px solid"

Back

setting an attribute

Front

wonderWoman.setAttribute('class','cool');

Back

method that allows you to use CSS notation to find the first element in the document that matches that matches a CSS selector provided as an argument.

Front

document.querySelector()'

Back

adding a class via classList

Front

wonderWoman.classList.add('warrior');

Back

adding a text node via textContent

Front

const flash = document.createElement('li'); flash.textContent = 'Flash';

Back

returning a reference to the element with the unique id attribute specified

Front

document.getElementById('id');

Back

returns the value of the attribute provided as an argument

Front

wonderWoman.getAttribute('class');

Back

add a class if an element doesn't have it already, and remove the class if it does have it. It returns true if the class was added and false if it was removed

Front

wonderWoman.classList.toggle('hero');

Back

creating an element

Front

const flash = document.createElement('li');

Back

innerHTML

Front

returns all the child elements of an element as a string of HTML

Back

returning a node list of all images in a document

Front

document.images

Back

nodeType

Front

checks to see what kind of object the selected item is: body.nodeType; <<1

Back

document.forms

Front

returns a node list of all the forms in a document

Back

how do you turn a node list into an array?

Front

const imageArray = Array.from(document.images); or const imageArray = [...document.images];

Back

placing an element in between two existing elements

Front

The insertBefore() method will place a new element before another element in the markup. It's important to note that this method is called on the parent node. It takes two parameters: the first is the new node to be added, and the second is the node that you want it to go before (it's helpful to think that the order of the parameters is the order they will appear in the markup). heroes.insertBefore(aquaman,wonderWoman)

Back

The children property definition and syntax

Front

only returns any element nodes that are children of that node, so will ignore any text nodes. heroes.children // this will only contain list items << HTMLCollection [<li class="hero">, <li ➥ id="bats">, <li class="hero">, <li ➥ class="hero">] (4) heroes.children.length << 3

Back

Accessing the body element

Front

const body = document.body;

Back

classList

Front

list of all classes on an element

Back

creating a text node

Front

const flashText = document.createTextNode('Flash');

Back

child nodes property definition and syntax

Front

list of all the nodes that are children of the node concerned const heroes = document.getElementById('roster'); heroes.childNodes << NodeList [#text " ", <li class="hero">, #text " ", <li id="bats">, #text " ", <li class="hero">, #text " ", <li class="hero">, #text "

Back

node

Front

Anything on a webpage. Can be tags, text inside tags, tag attributes, etc.

Back

className property definition and syntax

Front

allows the class of an element to be found or set directly: wonderWoman.className; wonderWoman.className = 'hero';

Back

document.links

Front

returns a node list of all <a> elements and <area> elements that have an href attribute

Back

returns the previous adjacent node

Front

wonderWoman.previousSibling

Back

returns the parent node of an element

Front

const wonderWoman = document.querySelector('ul#roster ➥ li:last-child'); wonderWoman.parentNode << <ul id='roster'>...</ul>

Back

how is background-color written

Front

camelCase: superman.style.backgroundColor = 'blue';

Back

returns the next adjacent node of the same parent.

Front

wonderWoman.nextSibling

Back

returns the last child of a node

Front

heroes.lastChild

Back

return a live node list of all the elements with the tag name that is provided as an argument.

Front

document.getElementByTagName('li');

Back

document.anchors

Front

returns a node list of all <a> elements that have a name attribute.

Back

returns the text content of an element as a string

Front

wonderWoman.textContent

Back

returns the first child of a node

Front

heroes.firstChild

Back