반응형 공부67 [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. [ 20.09.18.금 ] 9월 셋째주 회고록 이번 주는 JavaScript 기초를 다지는 시간을 가졌다. 아직 JavaScript 초보라 공부를 하면서 내가 잘 몰랐던 개념들이 많이 보였다. 그래서 보이는 즉시 메모해뒀다가 하루가 끝나기 전에 조사해서 블로그에 올리는 것을 반복했다. 이번 주 목표 중 하나인 블로깅 연습은 잘 되어 가고 있는 것 같다. 이번 주에 올린 글들을 돌아보니 배열과 객체에 관련된 글 들이 좀 많이 보이는 것 같다. 그만큼 내가 배열과 객체에 대한 개념이 부족했고 새로 알게 된 사실들이 많다는 것이다. 또 내장함수에 관한 내용도 눈에 띄었다. 내장 함수를 잘 활용하지 못해서 쉽게 풀 수 있었던 부분을 멀리 돌아가기도 했다. 그래서 더 잘 기억하기 위해 블로그에 남겼다. 다음 주 목표는 이번 주 학습했던 것을 기억하고 활용하는.. 2020. 9. 18. [JavaScript] String.prototype.repeat() 문자열 반복 함수 오늘은 .repeat() 함수에 대해서 알아보았다. repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환해준다. (for문으로 덕지덕지 안 붙여도.. 깔끔하게 들어갔다..) 이걸 몰라서 여직 for 문으로 붙였다 ㅠㅠ str = "123"; strRepeat = str.repeat(3); console.log(strRepeat); // 123123123 // `` 을 사용한다면 ${} 안에 넣어주면 된다. str = ['1', '2', '3', '4', '5']; for(let i = 0; i < str.length; i ++){ console.log(`${str[i].repeat(i+1)}\n`); } // 1 // 22 // 333 // 4444 // 55555 반복 함.. 2020. 9. 17. 이전 1 ··· 11 12 13 14 15 16 17 다음 반응형
