[S4L4] Components 2

Question 1

Was bieten Data Attribute über den DOM?

Answer 1

-Auch ohne Klassen oder IDs auf Nodes des DOMS zuzugreifen und Selections zu machen

Question 2

Wie sieht ein Data Attribute aus?

Answer 2

<div>Lambda School</div>

div[data-school='Lambda']{
    /* CSS Style rules here */
  }

Question 3

Wie greift man auf .dataset Properties des DOMs zu?

Answer 3

<div>Lambda School</div>

 div[data-school='Lambda']{
    /* CSS Style rules here */
  }

const school = document.querySelector('.school');
  const schoolName = school.dataset.school;
  console.log(schoolName); //Lambda

Question 4

Wie benutzt man data attributes über querySelectors?

Answer 4

const schoolElement = document.querySelector(“div[data-school=’Lambda’]”);

Question 5

Mit welchen Schritten geht man vor um

Answer 5

// Step 3: Define our class that will create a new object!
class Link {
  constructor(link) {
    this. link = link;
    // 1,2,3,4
    // console.log(this. link.dataset.tab); 
    this.content = document. querySelector(`.content[data-tab='${this.link.dataset.tab}']`);
    // console.log(this.content); 
    // This is creating a new Content object using the DOM content object
    //console.log(this. content);
    this.content = new Content(this. content);
    //console.log(this. content);

    // this.link. addEventListener('click', this.linkClick. bind(this));
    this.link. addEventListener('click', () => this.linkClick());
  }
  // methods
  linkClick() {
    this.content. toggleContent();
  }
} // link

class Content {
  constructor(content) {
    this. contentTab = content;
  }
  // Methods
  toggleContent() {
    this.contentTab. classList.toggle('change');
  }
}

//Step 1: Get our DOM elements and store them in links
const links = document. querySelectorAll('.link');

// Step 2: Iterate over the NodeList and create a new object
links. forEach(function(link){
  // we are returning our newly created objects here
  return new Link(link);
});

Question 6

Kann man in HTML custon data attributes einfügen?

Answer 6

-Ja, mit

<div class="school">Lambda School</div>

Question 7

Sind custom data attributes in HTML wie hier eingefügt Klassen?

<div>Lambda School</div>

Answer 7

Nein!

-Es sind data attributes

Question 8

Ist die 1 im data attribute data-tab hier ein String oder eine Nummer?

<div>Tab 1</div>

Answer 8

-Ein String!

Question 9

Wozu und wie werden data attributes in HTML verwendet?

Answer 9

• Um die HTML Elemente mit JavaScript anzusprechen

- Sind von der Spezifizität zwischen Klassen (unspezifisch, viele Elemente) und IDs (sehr spezifisch nur ein Element)

Question 10

Wie heißt das folgende data attribute eines HTML Elementes und wie greift man mit JavaScript darauf zu`?

<div>Lambda School</div>

Answer 10

-Das Data Attribut heißt “school”

const school = document.querySelector('.school');
  const schoolName = school.dataset.school;
  console.log(schoolName); //Lambda

Question 11

Womit started jedes data attribut in HTML?

Answer 11

Mit:

data-

Question 12

WIe kann man verschiene HTML Elemente über data attributes miteinander verbinden?

Answer 12

-Indem man ihnen die gleichen data attributes zuweist

      <div class="tab-links">
        <div class="link">Tab 1</div>
        <div class="link">Tab 2</div>
        <div class="link">Tab 3</div>
        <div class="link">Tab 4</div>
      </div>
      <div class="tab-contents">
        <div class="content">Tab 1</div>
        <div class="content">Tab 2</div>
        <div class="content">Tab 3</div>
        <div class="content">Tab 4</div>
      </div>

Question 13

Wie kann man den Zugriff auf data attributes dynamisch über mehrere namen/Zahlen machen?

Answer 13

• Mit String Interpolation

this. content = document.querySelector(.content[data-tab='${this.link.dataset.tab}']);

Question 14

Wie kann man einen Toggle für ein Klassen Object eins DOMs bauen?

Answer 14

class Content {
  constructor(content) {
    this. contentTab = content;
  }
  // Methods
  toggleContent() {
    this. contentTab.classList. toggle('change');
  }
}