createElement, setAttribute etc. Flashcards
How would you get the attribute of the ‘first list’?
<ul>
<li>First Link</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>
const first = document.querySelector(‘.first’);
const classValue = first.getAttribute(‘class’)
Then console.log
How would you set all <li> elements and give them an attribute of class=”list-item”?
<ul>
<li>First Link</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>
const list4 = document.getElementById(“fourth-item”);
list4.setAttribute(‘class’, ‘fourth’);
console.log(list4)
How can we check what class name this div has?
<div></div>
const divName = document.querySelector(“#first-div”);
const theName = divName.className;
console.log(theName);
Describe what is happening here:
const element = document.getElementById(“myElement”);
console.log(element.className); // Get the current classes
element.className = “class1 class2”;
What is the problem with using this?
className:
className property allows you to get or set the value of the class attribute as a string.
When you set className, it overwrites the existing classes on the element.
You can set multiple classes by separating them with spaces in the string.
If you use link.className = “red”
then link.className=”blue”
It will not add another, it will replace it.
What does classList do?
const element = document.getElementById(“myElement”);
console.log(element.classList); // Get the current classes
element.classList.add(“class1”); // Add a class
element.classList.remove(“class2”); // Remove a class
element.classList.toggle(“class3”); // Toggle a class
classList:
classList property provides an interface to manipulate the classes of an element as a collection (DOMTokenList).
It offers several methods such as add(), remove(), toggle(), contains(), and replace().
With classList, you can add or remove classes individually without affecting other classes on the element.
How would you add two classes to the first ‘li’ to this code?
<ul>
<li>First Link</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>
const element = document.getElementById(“myElement”);
element.classList.add(‘class1’, ‘class2’);
console.log(element)
Set the text Content of the first ‘li’ as ELLO:
<ul>
<li>First Link</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
</ul>
const element = document.getElementById(“myElement”);
element.textContent=”ELLO”;
console.log(element)
Add two classes to the first ‘li’ element to make it red and underlined using this css:
.color {
background-color: red;
}
.underline {
text-decoration: underline;
}
element.classList.add(‘color’, ‘underline’);
What does replaceChild() do?
It targets the parent first, then the original child element, then replaces it with a new element
What are the parameters for replaceChild()?
parentElement.replaceChild(oldChildElement, newChildElement)
Why is it not ideal to use getElementsbyClassName?
It returns a collection of elements, not one. Better to use querySelector.
<body>
<div>DIV</div>
</body>
Why won’t the first two variables work?
const parentElement = document.getElementsByClassName(“parentElement”);
const myOriginalChildDiv = document.getElementsByClassName(‘myOriginalChildDiv’);
They need to specify the index, ‘0’;
const parentElement = document.getElementsByClassName(“parentElement”);
const myOriginalChildDiv = document.getElementsByClassName(‘myOriginalChildDiv’);
OR use querySelector to select one element.
const parentElement = document.getElementsByClassName(“parentElement”)[0];
const myOriginalChildDiv = document.getElementsByClassName(‘myOriginalChildDiv’)[0];
What does .append() or prepend() do?
append():
The append() method appends content or elements as the last child of an element.
E.g
Number 2 (ORIGINAL)
Other child
Number 1 (DYNAMICALLY APPENDED)
prepend():
inserts content or elements as the first child of an element.
Number 1 (NEW ELEMENT FIRST CHILD)
Number 2 (ORIGINAL)
Other child
