Javascript - DOM/for문, function 활용하기

---

목차

1. document.getElementById() 사용

2. for문을 사용하여 css 스타일바꿔보기

3. 과일에 대해 input을 받아 리스트에 추가하기

---

1.document.getElementById() 

console.log(document.getElementById("list").children);
console.log(document.getElementById("list").firstElementChild);

- 아이디 "list" 의 자식들을 찾는 방법이다.

 

const listChildren = document.getElementById("list").children;

console.log(listChildren[0].parentElement);
console.log(listChildren[1].parentElement);

- 아이디 "list"의 자식들을 listChildren으로 정해주고, 자식으로 부모를 찾는 방법이다.

 

 

2. for문을 사용하여 css 스타일 바꿔보기

for (let i = 0; i < listChildren.length; ++i) {
    listChildren[i].style = "border :1px solid black";
    listChildren[i].style.padding = "1rem " + i * 1 + "rem";

  listChildren[i].classList.add("item-border");
  console.log(listChildren[i].classList.contains("item-border"));

  listChildren[i].classList.remove("item-border");
  console.log(listChildren[i].classList.contains("item-border"));
  
  listChildren[i].onclick = function () {
    listChildren[i].classList.toggle("item-border");
  };
}

.item-1 {
  border: 1px solid red;
}

.item-border {
  border: 1px solid blue;
  background-color: black;
  color: white;
}

console

 

 

3. 과일에 대해 input을 받아 리스트에 추가하기

 

function fruitFunc(value) {
  const tempElem = document.createElement("li");
  tempElem.innerHTML = value;
  fruitsList.append(tempElem);
}

const fruits = ["apple", "banana", "melon"];
console.log(fruits);

const fruitsList = document.getElementById("fruits");
const button = document.getElementById("add-fruit");
const addFruit = document.getElementById("name");

for (let i = 0; i < fruits.length; i++) {
  fruitFunc(fruits[i]);
}

button.onclick = function () {
  //li을 만들고 append를 해야해
  //   const tempElem = document.createElement("li");
  //   addFruit.value = "";
  //   tempElem.innerHTML = fruits[i];
  //   fruitsList.append(tempElem);
  fruitFunc(addFruit.value);
};

 

 

4. js runtime (students를 위에 fruit이라고 보면된다)

---

 

★ 오늘의 포인트와 남겨두기 ★

 

※ HTMLCollection
※ for문 좀더 공부하기 

※ function은 이름을 정해두고 저장해두었다가 코드를 가져다 쓴다고 생각하기!!!

    → 함수명(); 호출해서!

※ 전역변수

※ method : 객체내에 함수가 있을때

 

*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!

** 목표에 대해 생각하자!!!!!

* 만들고 싶은것의 흐름을 생각해보기