Flashcards
Section 6 / The DOM
Cards in this deck (14)
- 1- What is the DOM ? - What roles have the head/body/p and div ?- It’s created by the browser when a HTML document is loaded.
It’s a hierarchical tree of nodes.
- Head and body are element nodes ; title p and div are text nodes. - 2hello, world lorem ipsum this is an error message this is another error message - How to select the first paragraph JS will find ? - How to select only the p with the class error ? - How to select only the div with the error class ? - How to get all the p ? + consoling the third paragraph + all of them- const para = document.querySelector('p');
- const para = document.querySelector('.error');
- const para = document.querySelector('div.error');
- const paras = document.querySelectorAll('p');
+
console.log(paras[2]);
+
paras.forEach(para => {
console.log(para);
}) - 3- How to get an element by its ID (id) ? - How to get all the elements of a class ? - How to get elements by their tag names ? - What do we get when we get all the elements by class or by tag name ?- const title = document.getElementById('page-title'); // Pas besoin du #
- const errors = document.getElementsByClassName('error');
- const paras = document.getElementsByTagName('p');
- HTML collections that we can't use for each on => we have to transform it in an array - 4The DOM hello, world lorem ipsum this is an error message this is the content - To change the text of the first paragraph : - To add some text to the first paragraph : - To change the HTML :- const para = document.querySelector('p');
para.innerText = 'tralalabidou !';
- para.innerText += 'tralalabidou !';
- const content = document.querySelector('.content');
console.log(content.innerHTML);
content.innerHTML = 'This is a new h2
'; - 5Faire apparaître l'array const people = ['mario', 'luigi', 'yoshi']; dans la div content :const content = document.querySelector('.content');
people.forEach(person => {
content.innerHTML += `${person}
`;
});
ou
people.forEach(people => {
content.innerHTML += `${people}
`;
}); - 6The DOM An amazing link ! Lorem ipsum Changer le lien grâce à JSconst link = document.querySelector('a');
link.setAttribute('href', 'https://www.thenetninja.co.uk'); // D'abord ce qu'on veut remplacer puis la nouvelle valeur qu'on veut mettre
link.innerText = 'TheNet Ninja Website'; - 7const mssg = document.querySelector('p'); - Avoir la classe de p - Changer la classe de p à success. - changer le style- console.log(mssg.getAttribute('class'));
- mssg.setAttribute('class', 'success');
- mssg.setAttribute('style', 'color : green'); - 8- difference between : title.setAttribute('style', 'margin: 50px'); & title.style.margin = '50px' - If there is a '-' in a property => - To remove a property =>The first one completely overrides the HTML
The second one coexists with it
=> We have to use camelCase
=> title.style.margin = ''; - 9- To log out the list of an element classes : - Adding a class in JS : - Removing a class : - Adding & removing a class :- console.log(content.classList);
- content.classList.add('error'); (The class will only be displayed by the inspector)
- content.classList.remove('error');
- title.classList.toggle('test'); // Rajoute la classe test
title.classList.toggle('test'); // Retire la classe test - 10The DOM article title Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. written by your dear friend. We want to select all elements inside the article to give them a class :const article = document.querySelector('article'); // We only get a HTML collection that we want into an array //
Array.from(article.children).forEach(child => {
child.classList.add('article-element');
}); // Transforms in array - 11- How to get the parent, next & previous sibling ? - Chaining :- console.log(title.parentElement);
console.log(title.nextElementSibling);
console.log(title.previousElementSibling);
-console.log(title.nextElementSibling.parentElement.children); - 12Todos Buy milk Read a book Play the guitar Pay the bills : Click me - We want to react to a user clicking the button : - How to get the task we clicked on : - To line-trough the tasks clicked on : -How to add 'something new' when the button is clicked : - Another way to do :- const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('you clicked me');
});
- const items = document.querySelectorAll('li');
items.forEach(item => {
item.addEventListener('click', e => {
// console.log(e);
console.log(e.target);
console.log(item); // does the same as above
})
})
Loging E.target tells us which li has been clicked.
- const items = document.querySelectorAll('li');
items.forEach(item => {
item.addEventListener('click', e => {
e.target.style.textDecoration = 'line-through';
});
});
- const ul = document.querySelector('ul');
button.addEventListener('click', () => {
ul.innerHTML += 'something new
';
});
- const button = document.querySelector('button');
const ul = document.querySelector('ul');
button.addEventListener('click', () => {
const li = document.createElement('li');
li.textContent = 'haha';
ul.append(li); // ou ul.prepend(li); si on veut les nouvelles tâches au dessus
}); - 13How to delete something.const ul = document.querySelector('ul');
ul.remove(); - 14Reprendre Page 20
Information
- Description
- vaze JS Flashcards on Section 6 / The DOM, created by dadou siplancin on 07/12/2021.
- Created by
- dadou siplancin · Dec 2021
- Updated
- Dec 9, 2021
- Views
- 1
- Rating