Javascript(Dom 조작 )
.innerHTML
위 명령어를 사용하여 , 특성 요소의 내부를 바꿀 수있다.
document.querySelector('p');
위를 사용하여 CSS 선택자를 활용하여 요소에 접근할 수 있다
document.getElementById('bio').innerHTML = 'The description';
// Set first element of .student class as 'Not yet registered'
document.getElementsByClassName('student')[0].innerHTML = 'Not yet registered';
// Set second <li> tag as 'Cedric Diggory'
document.getElementsByTagName('li')[1].innerHTML = 'Cedric Diggory`;
예를들어 아래와 같은 HTML 원본의 h1 텍스트 ‘Top 5 Best Selling Costumes’를 다른 텍스트로 바꾸고 싶다면, querySelector와 innerHTML을 사용하면 된다 .
<html>
<head>
<title>Popular Fantasy Searches</title>
</head>
<body>
<h1 class="ranking">Top 5 Best Selling Costumes</h1>
<ol>
<li id="first">Harry Potter</li>
<li id="second">Hermione Granger</li>
<li class="slytherin" id="third">Lord Voldemort</li>
<li class="slytherin" id="fourth">Draco Malfoy</li>
<li id="fifth">Hagrid</li>
</ol>
</body>
<script src="./main.js"></script>
</html>
아래를 사용하여 제목을 바꿀 수 있다. 내용을 변경할 때 innerHTML이 사용되는 것과, getElements로 시작하는 메소드에 인덱스가 붙어 구성요소 중 어떤 것을 선택했는지 지정하는 것을 주목하자
document.querySelector('h1').innerHTML = 'Most popular Harry potter characters';
document.querySelector('h1').innerHTML = 'Most popular Harry potter characters';
document.getElementById('fourth').innerHTML = 'Professor Snape'
document.getElementsByClassName('slytherin')[0].innerHTML = 'Salazar Slytherin'
document.getElementsByTagName('li')[0].innerHTML = 'Dobby'
document.getElementById('fourth').innerHTML = 'Professor Snape'
요소를 스타일 하기
다음 MDN 문서(링크)를 참고해서 JS에서 CSS 요소들의 이름이 하이픈(-)없이 어떻게 표시되는지를 먼저 참고하자.
바로 아래 예시처럼 요소에 해당하는 것을 불러와 변수에 담아서 다시 .style을 불러올 수도 있고
let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';
아래처럼 chaining해서 작성할 수도 있다.
document.querySelector('.blue').style.fontFamily = 'Roboto';
예제에서는 querySelector를 사용하라는데, 왜 getElementsbyClassName은 안써있지 하는 마음에 시도해보니 잘 된다.
document.getElementsByClassName('heading')[0].style.fontFamily='Roboto';
DOM 내부에서 Traverse(횡단, 이동) 하는법
.parentNode 라는 속성과 / .children 이라고 하는 속성을 잘 활용하면 특정 요소의 부모노드 혹은 자식노드들을 호출 할 수 있다. 예를 들어 document는 모든 노드들의 root node가 되믈 document.parentNode 는 null이 된다.
요소의 생성과 삽입
두 개의 메소드가 크게 새로 등장한다.
.createElement() 메소드
; 괄호 안에 오는 요소를 생성한다. 내용은 들어가지 않고 변수 안에 넣어 추가적으로 내용 및 아이디 등 여러 속성들을 할당할 수 있다.
.appendChild() 메소드
;위에서 할당된 변수를 괄호 안에 넣어 document 등 parentelement 뒤에 쓰여 그 안에 가장 마지막 childnode로 할당한다.
예시)
let paragraph = document.createElement('p');
//이렇게 변수를 생성해주고
paragraph.id = 'info';
paragraph.innerHTML = 'The text inside the paragraph';
//위처럼 id와 내용을 넣어준다.
document.body.appendChild(paragraph);
//이렇게 body에 마지막에 삽입할 수 있다.
요소를 제거하기
.removeChild() 메소드를 사용하면 된다.
let paragraph = document.querySelector('p');
document.body.removeChild(paragraph);
제거하는 것이 아닌 숨기고 싶다면 .hidden 속성을 작성후 true 혹은 false 값을 반환하면 된다.
document.getElementById('sign').hidden = true;
클릭시 상호작용 적용하기
.onclick 속성을 사용하면 클릭시에 어떠한 상호작용이 일어날 지 함수를 할당 할 수 있다. 예시는 다음과 같다 .
let element = document.querySelector('button');
element.onclick = function() {
element.style.fontFamily = 'Roboto'
};
위 처럼 익명함수로 바로 호출 할 수도 있지만 다음처럼 함수에 이름을 설정 후에 호출 할 수 도 있다.
let element = document.querySelector('button');
function turnRoboto() {
element.style.fontFamily = 'Roboto'
}
element.onclick = turnRoboto;
//괄호를 쓰지 않은 것에 주목 .
//이것은 우리가 listener에게 전달하는 것이 함수 자체가 아니라 함수가 있는 주소를 전달하는 것임
//callback과 같은 개념 .
요약 및 부족한 개념
우선 이번 챕터 정리하면서 .this 와 callback 의 개념을 다시 정비할 필요를 느꼈다.
이전에 배운것이고 활용을 잘 했다고 생각하는데 바로 까먹어버렸다.
요약은 다음과 같다.
- The document 키워드는 DOM의 루트에 접근하게 해준다 .
- .querySelector() 메소드를 사용하여 CSS셀렉터를 활용해 특정한 요소를 선택하는 것이 가능하다.
- .getElementById() 를 이용하여 ID로 요소 하나를 찾아 반환할 수 있다.
- .getElementsByClassName() .getElementsByTagName() 들로 반환한 값은 어레이로 반환되고 인덱스를 사용해 그 어레이안에 들어간 요소들 중 하나를 뽑아 낼 수 있다.
- .innerHTML .style 를 활용해서 요소의 내용과 색상 등 스타일을 변경할 수 있다 .
- 다음을 활용하여 요소를 생성, 추가, 제거 할 수 있다. .createElement(),.appendChild() .removeChild()
- .onclick 속성은 클릭 이벤트 event 에 맞춰 다양한 상호작용을 DOM에 추가하게 해준다.
- .children 자식요소들을 반환하고 , .parentNode 속성은 가장 가까운 부모요소를 반환한다.
'IT 관련 > 개발(Codecademy)' 카테고리의 다른 글
| Javascript(유효화 검사, 정규표현식) (1) | 2023.01.12 |
|---|---|
| 자바스크립트(이벤트란?) (2) | 2023.01.10 |
| Javascript DOM(Document Object Model), async, defer 에 관한 내용들. 반응형 웹페이지 만들기 #1 (1) | 2023.01.06 |
| Javascript(callback function과 higher order function) (1) | 2023.01.05 |
| Javascript(반복 메소드, iteration method) 어레이 메소드 .forEach() .map() 등등 (0) | 2023.01.05 |