DOM_기초

DOM이란?

HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model

• 자바스크립트에서 DOM은 document 객체에 구현
• DOM 구조를 조회하기 위해서는 console.dir이 유용
• 자식 속성은 document.body.children으로 조회
• 부모 속성은 Node.parentElement

1. CREATE - createElement

const tweetDiv = document.createElement('div')

2. APPEND - append, appendChild

document.body.append(tweetDiv) //append 삽입하는 메소드

• ParentNode.append() - ParentNode의 마지막 자식 뒤에 Node 객체 또는 DomString 객체를 삽입
• ParentNode.prepend() - Node 객체 또는 DOMString객체를 ParentNode의 첫 자식 노드 앞에 삽입
• Node.appendChild() - 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 삽입

3. READ - querySelector, querySelectorAll

const oneTweet = document.querySelector('.tweet') // 하나만 조회

const tweets = document.querySelectorAll('.tweet') // 여러개 조회

const getOneTweet = document.getElementById('container') //라떼 코드
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

4. UPDATE - textContent, classList.add

const oneDiv = document.createElement('div')
console.log(oneDiv) // <div></div>

oneDiv.textContent = 'dev'; // 텍스트 추가
console.log(oneDiv) // <div>dev</div>

oneDiv.classList.add('tweet') // 클래스 추가
console.log(oneDiv) // <div class="tweet">dev</div>

textContent와 innerHTML의 차이 - textContent는 텍스트만 접근할 수 있는데 innerHTML 모든 요소 접근 가능
innerHTML은 해킹 위험이 있어 보안상 단점으로 안 쓰는 추세

5. DELETE - remove, removeChild

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
} //자식 요소를 전부 없애는 방법

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
} //직접 요소 자체를 찾아 지우는 방법

HTML에 JS 적용시키기

<script src="myScriptFile.js"></script>

HTML에 JS를 적용하기 위해서는 < script > 태그를 사용

1. < head > 안쪽에 삽입하는 경우
2. < body > 태그가 끝나기 전에 삽입하는 경우
   HTML 엘리먼트를 이용하려면 2번 < body > 태그가 끝나기 전에 삽입하는 방법을 사용

유효성 검사

유효한 상태를 valid라는 상태로 설정한 후, 이에 따라 자식 엘리먼트가 보이게, 혹은 안 보이게 만들 수 있다.
(display: none / display: block)
유효하지 않은 상태를 invalid라는 클래스로 설정한 후, 해당 엘리먼트 아래에는 전체적으로 붉은색의 스타일링을 할 수 있다.

1. 유효성 검증 함수에서 정규 표현식을 많이 사용

2. HTML 엘리먼트에 특정 이벤트가 발생했을 때 작동하는 함수를 이벤트 핸들러 또는 이벤트 리스너 함수

3. 다양한 이벤트

• onkeydown - 키보드의 키를 눌렀을 때
• onkeyup - 키보드의 키를 눌렀다가 땠을 때
• onchange - 요소 값이 변경되었을 때
• onclick - 마우스 왼쪽 버튼으로 클릭했을 때
• ondblclick- 마우스 왼쪽 버튼 더블 클릭 했을 때
• onmousedown- 마우스 왼쪽이나 오른쪽 버튼 누를 때
• onmouseup- 마우스 왼쪽이나 오른쪽 버튼 누르고 놓을 때

function eventHandler() {
  let isValid = validation(value)
  if (isValid) {
    console.log('입력값이 유효하군요')
  } else {
    console.log('유효하지 않은 값인데요?')
  }
}

someElement.onEvent = eventHandler; // onEvent는 onclick, onkeyup 등이 될 수 있다.

이벤트 객체

onclick에 직접 할당하는 것과 addEventListener의 차이

1. onclick에는 하나의 콜백만 지정할 수 있지만, addEventListener를 사용하면 여러 개의 이벤트 리스너 추가 가능
2. 호환성 문제로 addEventListener는 IE8 이하에서는 작동 X

target.onclick = functionRef;
                      //'click'
element.addEventListener(event, handler, [options]);

event.target

이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근 가능

<input type="button" value="클릭해 주세요." id="elem">

<script>
  elem.onclick = function(event) {
    // 이벤트 타입과 요소, 클릭 이벤트가 발생한 좌표를 보여줌
    alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다.");
    alert("이벤트가 발생한 곳의 좌표는 " + event.clientX + ":" + event.clientY +"입니다.");
  };
</script>

DOM에서 자주 사용하는 속성