728x90 자바스크립트12 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 - CSS 선택자 선택 안녕하세요, 지난 시간까지 Javascript의 얕은 이론(?)을 정리하였고 이제부터 본격적으로 Web을 만드는데 필요한 HTML/CSS와의 연결에 대해서 정리하려 합니다. 오늘은 Javascript에서 CSS 선택자를 선택하는 방법을 정리해보겠습니다. CSS의 선택자를 선택하기 위해서는 document객체의 내장 API들을 사용해야 합니다. -. document.getElementById('id를 문자열로 표현') : id 속성을 이용하여 태그를 선택하고자 할 때 사용. HTML 문서에 존재하지 않는 id값으로 태그를 선택하면 null이 리턴됩니다. -. document.getElementsByClassName('class를 문자열로 표현') : class 속성을 이용하여 태그를 선택하고자 할 때 사용.. 2021. 6. 24. 이전 1 2 3 다음
