diff --git a/src/index.js b/src/index.js index fc28923..5178fa0 100644 --- a/src/index.js +++ b/src/index.js @@ -4,49 +4,72 @@ // Select the following single elements from the div.card // A- finding across the entire DOM -const header = null -const logoTitle = null -const firstCard = null +const header = document.querySelector("header") + +const logoTitle = document.querySelector('#logoTitle') + +const firstCard = document.querySelector('.card') +console.log(firstCard) // B- finding within one particular element -const imageFirstCard = null -const titleFirstCard = null -const subtitleFirstCard = null -const textFirstCard = null +const imageFirstCard = firstCard.querySelector('img') + +const titleFirstCard =firstCard.querySelector('.card-title') + +const subtitleFirstCard = firstCard.querySelector('.card-subtitle') + +const textFirstCard = firstCard.querySelector('.card-text') // C- traversing with dot notation -const link1FirstCard = null -const link2FirstCard = null +const link1FirstCard = textFirstCard.nextElementSibling +const link2FirstCard = link1FirstCard.nextElementSibling // 👉 2- Finding collections of elements in the DOM // A- Find all the anchor tags inside the nav element +const anchorTags = document.querySelectorAll('nav a') // B- Loop over the links and console.log their text content +anchorTags.forEach(anchor =>console.log(anchor.textContent)) // C- Turn the collection of links into a real array +const realArrayOfanchorTags = Array.from(anchorTags) +console.log(realArrayOfanchorTags) // D- Use .filter to find the anchor tag with the textContent of "Home" - - +const homeAnchor = realArrayOfanchorTags.filter(anchor=> anchor.textContent === "Home") +console.log(homeAnchor) // 👉 3- Changing an element's text content // A- Change the cat-related content into dog-related content +logoTitle.textContent = "Moo Cow" +subtitleFirstCard.textContent = "Lovely Cat" // B- Have the students research online the difference between textContent and innerText +/*textContent returns the text content of all elements, while innerText returns the content of all elements, +except for