WEB/DOM4 DOM_4 1. 키보드 이벤트 키보드를 누르고 땔때 마다 이벤트를 발생시킬수 있다. -html click me! -js const input = document.querySelector('input'); input.addEventListener('keydown',function(){ console.log("DOWN") }) input.addEventListener('keyup',function(){ console.log("UP") }) 추가로 키보드를 길게 누르는것도 반응 할수 있다. 2. key 와 code 키보드에서의 실제 위치를 알 수 있다. const input = document.querySelector('input'); input.addEventListener('keydown',function(w){ c.. 2023. 3. 6. DOM_3 1. 계층이동 parentElement 한단계 위로 올라가서 부모 요소가 나오는 대신에 밑으로 내려가서 자녀요소를 출력하는 것이다. -모든요소에게 그 요소를 포함하고 있는 직속 부모 요소는 단 한개이다.(자식요소는 여러개일 수 있다.) 2. 새 DOM 요소 만들기 appendChild() 한 특정 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막에 삽입하는것이다. append() 한번에 한개 이상을 삽입할수 있고 최근에 나왔다. 그래서인지 익스플로어에서는 실행이 불가하다. prepend() 특정 요소의 앞에 무언가를 삽입할때 사용한다. 3. 제거하기 -removeChild 먼저 제거하려는 부모요소를 부르면 되는데 parentElement 로 불러주고 removeChild(제거할 요소)를 입력하면 제거.. 2023. 3. 1. DOM_2 1. 속성 (id 바꾸기) - id가 banner인 이미지가 있다고 하면 아래와 같이 된다. Silkie Chickens 위 id를 변경해서 완전히 다른 id를 부여할수 있다.(예시로 loui3을 id로 해본다.) 그러면 아래와 같이 loui3이 id인 이미지가 있다라는것을 알 수 있다. 2. getAttribute, setAttribute getAttribute은 HTML 자체에서 직접 가져오게 한다.(해당요소에 지정된 값) -제목,id,class등을 갖고 오게 할 수 있다 setAttribute은 선택한 요소에 선택한 값을 넣는것이다. -type을 바꿀수 있다. 3. 스타일 변경하기 마크업을 직접 변경하지 않고 자바스크립트를 통해 스타일을 변경할수 있다. I ♥ Trees 위그림을 html 파일을 건.. 2023. 2. 26. DOM 1. DOM이란? - DOM은 바로 문서 객체 모델을 뜻한다. - 쉽게 말해 웹페이지를 구성하는 자바스크립트 객체들의 집합이다. 2. DOCUMENT - 새로운 페이지를 열때마다 해당페이지의 콘텐츠를 이용한 문서 객체 모델이 생성되는데 DOCUMENT는 페이지의 콘텐츠를 나타내는 객체의 모음집과 같다. - CSS 스타일을 바꾸거나 요소를 숨기거나 할 수 있다. 3. getElementByID() - 이 메서드에 문자열을 전달하면 일치하는 ID를 가진 요소를 찾아 나타낸다. - id가 일치하는 요소를 찾으면 해당값이 나타나고 없으면 null로 나타낸다. - id로 선택할때만 작동하며 클래스 이름으로는 작용하지 않는다. ID가 name인 경우 4. getElementByTagName() -이 메서드에 문자열.. 2023. 2. 22. 이전 1 다음
