반응형 Front-end/HTML&CSS2 [DOM] <template> 태그를 이용한 DOM 조작 오늘은 태그를 이용해서 DOM을 조작하는 방법에 대해서 공부했다. 동적으로 태그를 추가하고 싶은데 추가되는 동작이 반복된다면 반복문을 이용해서 넣어 줄 수도 있지만 태그를 이용해서 해결할 수도 있다. 먼저 html을 간단하게 작성해보면 Leo 25 집주소 부모 요소 태그 안에 있는 요소는 나타나지 않고 맨 마지막 줄의 div 만 나타난다. 이제 이 을 js를 통해서 추가해볼 수 있다. let parents = document.querySelector('#parents'); let temp = document.querySelector('#temp'); let element = document.importNode(temp.content, true); // importNode를 통해서 template 안에 있.. 2020. 9. 23. [DOM] Document Object Model 이란 ? 오늘은 DOM(Document Object Model)에 대해서 공부했다. DOM이란 HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model이다.자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미이다. 일단 DOM을 사용하기 위해서는 자식 element 부모 element와의 관계를 잘 알아야 한다. HTML은 트리 구조로 작성이 되는데 이때 겉에 있는 태그가 부모 요소이고 부모 요소 안에 작성된 요소가 자식 요소가 된다. 이 중 가장 상위의 객체가 document 객체 인데 이 document 객체에는 수많은 속성과 메서드가 포함되어 있다. document객체의 속성.. 2020. 9. 22. 이전 1 다음 반응형
