JavaScript/DAY 36 _ 23.10.13 (4) 썸네일형 리스트형 Element의 생성 / 삭제 / 추가 // 1. 생성 : createElement★★★ // --> 문법 : document.createElement("tagname"); // --> 하지만 이렇게 정의한것만으로는 아무일도 일어나지 않아. // --> 이걸 어디다 붙일건지가 중요!!!! function test1(){ // 1-1. 생성 const createLi = document.createElement("li"); const createBtn = document.createElement("button"); // 1-2. 정보변경 createLi.innerText = "li추가중"; createBtn.innerText = "이것이 버튼추가"; // 1-3. 스타일변경 createLi.classList.add("fs-2", "text-da.. DOM element 조작 ## body 하이하이 하이하이 하이하이 하이하이 하이하이 테스트1 테스트2 테스트3 테스트4 테스트5 테스트6 테스트7 테스트8 // 1. 텍스트 변경 : innerText function test1(){ const getX1 = document.getElementById("x1"); getX1.innerText = "내용변경. 아까 많이 했지이"; } // 2. 내용 조작 : innerHTML --> 사용금지!!!!!!!!! 딱, 한case 빼고 // ★ 초기화 할 때만 사용하도록 합니다아 ★ function test2(){ const getX1 = document.getElementById("x1"); // 2-1. 되긴돼. 하지마. // getX1.innerText = "innerText는 전부 .. DOM API★ // DOM API - 매우중요 // ★★★ element(= tag) 접근 방법 이건 남아있니? -> 아니 다 지워져.. 하이하이 하이하이 하이하이 하이하이 하이하이 반갑반갑 반갑반갑 반갑반갑 반갑반갑 반갑반갑 테스트1 테스트2 테스트3 테스트4 테스트5 테스트6 테스트7 테스트8 // 1.id로 접근 // getElementById : 얘만 단수 (어차피 ID는 무조건 하나만 생성이니까 머..) // ---> ID가 없을 때 : null리턴 // getElements... : 나머지는 복수 -> 리스트를 리턴해준다 (ex. getElementsByClassName) // ---> class가 없을 때 : 배열을 리턴, 내용은 없으니까 반복문이 안돌아가겠지 function test1(){ // docu.. DOM Basic // HTML DOM 관련 // 1. getElementById ★★★ // document.getElementById("box1").innerText = "이러면 box1이 body에있으니까 box1에 해당하는 값이 없어서 null exception."; // --> 그래서 리스너가 필요하다@! // 1-1. addEventListener ★★★ // --> 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정 // eventTarget.addEventListener('eventType', function / functionName [, useCapture]) // 대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식).. 이전 1 다음