728x90 Web 개발/JS13 Javascript - 요소 노드 삭제 / 이동 안녕하세요, 지난 시간에는 Javascript를 이용해 HTML 요소를 추가하는 것에 대해 정리하였습니다. 오늘은 요소 노드를 삭제하고 이동하는 것에 대해 추가로 정리해보겠습니다. ◆ 요소 노드 삭제 -. remove()를 사용하여 쉽게 삭제할 수 있습니다. 아래 코드를 보며 설명드리겠습니다. 오늘 할 일 자바스크립트 공부 고양이 화장실 청소 고양이 장난감 쇼핑 내일 할 일 자바스크립트 공부 뮤지컬 공연 예매 유튜브 시청 const myTag = document.querySelector('#today') // myTag는 #today 리스트가 된다 myTag.children[1].remove() // myTage의 자식 중 인덱스1인 고양이 화장실 청소가 사라진다! ◆ 요소 노드 이동 -. 이전에 요소 .. 2021. 6. 29. Javascript - 요소 노드 추가 안녕하세요, Javascript에서 요소 노드를 추가하는 방법에 대해 간단히 정리해보겠습니다. 요소 노드를 추가하는 방법은 아래와 같이 3가지 순서를 따라 진행됩니다. 0. 수정하고 싶은 기존 요소노드 만들기 1. 요소 노드 만들기 : document.createElement('태그 이름') 2. 요소 노드 내용 꾸미기 : textContent, InnerHTML 등 사용 3. 요소 노드 추가하기 : Node.prepend, append, after, before 추가하기 prepend : 대상을 node의 가장 앞에 삽입 append : 대상을 node의 마지막에 삽입 before : 대상을 node 이전에 삽입 after : 대상을 node 다음에 삽입 오늘 할 일 자바스크립트 공부 고양이 화장실 청.. 2021. 6. 28. Javascript - innerHTML, outerHTML, textContent 안녕하세요, 오늘은 innerHTML, outerHTML, textContent에 대해 정리하겠습니다. ◆ innerHTML -. 요소 노드 내부의 HTML 코드를 문자열로 리턴합니다. 아래 코드에서 myTag는 querySelector에 의해 태그가 됩니다. 여기서 myTag의 innerHTML를 console.log로 출력하면 아래의 HTML 코드를 출력해줍니다. Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Siamese Maine Coon American Shorthair Russian Blue Cat-2 Sphynx Munchkin Persian Norwegian Forset Turkish Angora Bombay Selkirk Rex Munchk.. 2021. 6. 27. Javascript - DOM 안녕하세요, 오늘은 DOM과 DOM에서 요소를 선택하는 것에 대해 정리해보겠습니다. 우선 DOM이란? Document Object Model의 약어로 직역하자면 문서 객체 모델이라는 뜻입니다. 웹페이지에 나타난 태그들을 객체로 다룰 수 있는 것이라고 생각하면 됩니다. 이전 시간에 배웠던 document 객체가 웹의 최상단에 있는 객체입니다! 제 생각에 DOM을 이해하는 것이 프론트엔드 개발자로서 가장 중요하다고 생각하여 "DOM을 께우치다"라는 책을 사서 읽고 있습니다. 내용이 방대하고 저도 이해를 완벽히 하지 못해 여기서는 기본 개념에 대해서만 정리하고 나중에 깊게 정리해보도록 하겠습니다! 실제로 HTML을 살펴보면 window - document에서 시작하여 html/ head/ body 등 태그들이.. 2021. 6. 26. 이전 1 2 3 4 다음
