학습내용

자바스크립트 DOM 기능
github커밋

DOM 문서 객체 모델

• DOM (The Document Object Model)
• document(js와 연결된 html문서), element(html태그), attribute(html태그의 속성들)

자바스크립트 html 접근 방법

getElement ~

• getElements~: collection이라는 유사배열 형태로 반환함. 배열 일부 메서드만 활용 가능
• getElementsByTagName: 태그명으로 접근 -> 배열로 반환
• getElementsByClassName: 클래스명으로 접근 -> 배열로 반환
• getElementById: id로 접근 -> 하나의 객체로 반환

querySelector

• css 선택자와 동일한 방식으로 접근
• 가장 먼저 나오는 태그, 클래스 객체 하나만 반환
• 속도는 이전 방식이 조금 더 빠르지만 편의성 좋음

querySelectorAll

• querySelectorAll : 해당되는 태그, 클래스 객체 전부 collection으로 반환
• collection과 반복문을 결합해 일괄 디자인 적용이 가능함

for (var i = 0; i < containers.length; i++) {
    containers[i].style.backgroundColor = 'blue';
}

html 태그, 내부 content 선택 및 변경 관련

innerHTML, outerHIML

• element.innerHTML: element 안 내용물을 문자열 형태로 반환
• element.outerHTML: element 자기 자신 포함한 내용물 문자열 형태 반환
• 새로운 태그 삽입, 수정 등 전부 가능함

var header = document.querySelector('.masthead');
console.log(header.innerHTML);
console.log(header.outerHTML);

header.innerHTML = "<h1>Hello World</h1>";

textContent, innerText

• textContent: html에 작성된 텍스트에 접근 및 수정
• innerText: css 속성 적용된 상태로 접근 및 수정

var heading = document.querySelector('.masthead-heading');

console.log(heading.innerText); // IT'S NICE TO MEET YOU
console.log(heading.textContent); // It's Nice To Meet You

html 태그 생성 createElement()

• createElement(): 만들 태그 종류를 인수로 넘겨준다. html 문서에 실제로 삽입하기 전까진 코드 상으로만 존재하는 태그가 된다.

var h3Test = document.createElement('h3');
h3Test.textContent = 'Hello world';

html 태그 삽입

1. appendChild()

• appendChild(): 부모 태그 안 마지막에 삽입
• 어떤 부모태그에서 사용하느냐에 따라 위치 변경됨

appendChild() 사용 시 주의점

• 같은 부모를 가진 형제 태그들 안에 appendChild() 사용 시 가장 마지막 형제태그에만 적용됨

var subHeading = document.querySelector('.masthead-subheading');
var heading = document.querySelector('.masthead-heading');
var btn = document.querySelector('.masthead .btn');

subHeading.appendChild(h3Test);
heading.appendChild(h3Test);
btn.appendChild(h3Test); // btn 안에만 태그 삽입됨

2. insertAdjacentHTML()

• 부모 태그 관련 없이 내가 원하는 위치에 태그 삽입 가능함
• insertAdjacentHTML(position, text)
• position: 'beforebegin' 열림태그 전, 'afterbegin' 열림태그 후, 내용물 전, 'beforeend' 내용물 후, 닫힘태그 전, 'afterend' 닫힘태그 후
• text: html 태그 포함해서 문자열로 전달

var heading = document.querySelector('.masthead-heading');
var txt = "<h3>!!!!!!!!!!</h3>";

heading.insertAdjacentHTML('beforeend', txt);

html 태그 삭제

1. removeChild()

• 부모 기준으로 삭제해야 되니 삭제할 태그와 그 부모 태그 알아야 함
• parentElement: 태그의 바로 위 부모 태그 반환

var headContainer = document.querySelector('.masthead .container'); // 부모 지정
var heading = document.querySelector('.masthead-heading'); // 삭제할 태그

headContainer.removeChild(heading);
heading.parentElement.removeChild(heading);

2. remove()

• 부모 태그 등 관계 없이 특정 태그 삭제

heading.remove();

html 자식태그 선택

• fisrtElementChild: 부모태그의 여러 자식 요소 중 첫 번째 선택
• lastElementChild: 부모태그의 여러 자식 요소 중 마지막 선택

css 제어방식 3가지

• html style 속성으로 바로 들어가서 cascading으로 인해 가장 우선 적용됨

1. style 뒤에 css 속성값 이름 camelCase로 작성

heading.style.color = 'red';
heading.style.backgroundColor = "pink";
heading.style.fontSize = '25px';

2. style.cssText

• 약점: 오타에 취약함

heading.style.cssText = "color: red; background-color: blue; font-size: 25px";

3. setAttribute() 메서드 사용

• setAttribute('변경할 속성', '속성값')
• style의 경우 cssText 방법과 동일하게 문자열 넣어야 되므로 비추천
• id를 새로 추가한 후 해당 id로 요소 선택하는 방식 사용 가능

heading.setAttribute("id", "heading-test");
document.querySelector('#heading-test').style.backgroundColor = "pink";

css 클래스 접근방식 2가지

1. className

• 클래스 전부를 문자열로 가져옴
• 개별 클래스 접근하려면 문자열 split->배열 인덱스 접근 2단계 필요

var heading = document.querySelector('.masthead-heading');
var headingClass = heading.className;
var headingArr = headingClass.split(' ');

console.log(headingClass); // masthead-heading text-uppercase 
console.log(headingArr[1]);

• className으로 새로운 클래스 추가: 기존 클래스에 덮어 씌워짐

heading.className = 'asthead-heading text-uppercase test';
heading.className += ' test';

2. classList

• DOMTokenList라는 유사배열 형태로 가져옴
• 개별 클래스 접근 시 split 필요 없이 배열 인덱스로 접근할 수 있음

새로운 클래스 추가, 삭제

• classList.add(): 새 클래스 추가
• classList.remove(): 기존 클래스 삭제
• classList.toggle(): 인수로 준 클래스가 이미 있으면 삭제, 없으면 생성

heading.classList.add('test1', 'test2');
heading.classList.remove(headingClass[1]);
heading.classList.toggle('test1');

클래스 있는지 여부 판별: contains()

• contains(): 인수가 포함되어 있으면 true, 없으면 false

console.log(heading.classList.contains('text-uppercase')); // true

eventListener

이벤트 종류

• 'click', 'submit', 'keyup'(키보드입력) 등: javascript 이벤트 타입 검색하기
• 참고링크:w3school

이벤트 추가, 삭제

• 이벤트 리스너의 두 번째 인자로 콜백함수가 들어가는데, 별도의 함수를 따로 만들어 함수명만 넣어줄 수도 있고 익명함수를 사용할 수도 있다.

// 1. 별도 함수 사용
var heading = document.querySelector('.masthead-heading');

function test() {
    console.log('click');
};

heading.addEventListener('click', test);
heading.removeEventListener('click', test);

// 2. 익명 함수 사용
heading.addEventListener('click', function (){
    console.log('click');
});

• removeEventListener를 사용하기 위해서는 addEventListener에서 사용한 콜백함수를 정확히 지정해서 삭제해야 하는데, 함수는 참조형 데이터타입이라 값이 같아도 주소값이 다르면 다른 객체로 취급된다. 따라서 별도 함수를 만들어 함수명만 전달하는 방식을 사용해야 한다.

// 틀린 방법: add, remove의 콜백함수는 값은 같아도 주소값이 다름
heading.addEventListener('click', function (){
    console.log('click');
});
heading.removeEventListener('click', function (){
    console.log('click');
});

// 바른 방법
function test() {
    console.log('click');
};

heading.addEventListener('click', test);
heading.removeEventListener('click', test);

태그 기본 기능 삭제: preventDefault()

• 콜백함수 매개변수로 e(이벤트 객체) 전달 -> e에서 메서드 사용
• 아래 코드에선 a태그 본연의 기능(링크, 위치로 이동)을 삭제함
• 어제 혼자 만들었던 메뉴 버튼엔 추후 링크로 이동 기능 필요하니 preventDefault() 필요 없을 듯

var btn = document.querySelector('#btn');
btn.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('hello world');
});

어려웠던 점

1. main.js:219 Uncaught TypeError: Cannot read property 'addEventListener' of null at main.js:219 에러 자주 발생함

해결방법

1. 보통 querySelector 인수에 오타가 나서 html 태그를 불러오지 못해서 null이 전달된 경우가 많았다. 자주보니 에러만 봐도 어느 부분에서 무제가 있는지 대충 알 것 같다.

소감

이전 실습에서 종종 썼던 내용들을 하나씩 정리할 수 있어서 도움이 되었다.