문서 객체 조작

문서 객체 조작

조작 : 값을 추출하거나 넣는 것

 

🧁 문서 객체를 조작할 수 있는 위치

(1) head태그의 script에서 조작
(2) body태그 마지막에 배치한 script에서 조작

(1)번 같은 경우는 문서 객체가 모두 만들어진 이후에 함수를 시행해야한다.
하지만 head가 body보다 앞에 있기 때문에 순서가 맞지 않음!
이럴때 쓰는 것이 DOMContentLoaded

 

※ DOMContentLoaded : DOM 콘텐트 로드가 완료되면! 이라는 이벤트임

 

이런식으로 쓴다 ...

addEventListener('DOMContentLoaded',()=>{
	어쩌구 코드
});

즉, DOMContentLoaded 라는 이벤트를 설정하여 조작하는 것!


🧁 문서 객체 가져오기
body태그 내부의 다른 태그를 조작하려면 일단 태그를 모셔와야함
이럴때 쓰는 것이 querySelector(), querySelectorAll()

태그 선택자	querySelector('h1') 그냥 태그를 직접적으로 입력
아이디 선택자	querySelector('#tay')
클래스 선택자	querySelector('.kim')
속성 선택자	querySelector('[type=text]') 특정한 속성을 가지고있는지 확인
후손 선택자	querySelector('body input')
여러개 선택	querySelectorAll('input') 모든 input 태그. 반복문 활용함

뭐 이건 대강 알거라 생각


🧁 글자 조작하기
글자를 조작하려면 해당 태그를 모셔와야함
그리고 textContent와 innerHTML 을 활용

 

header1.textContent = '새로운김테이'
header2.innerHTML = '새로운김테이'

얘네 둘은 똑같아보인다 하지만 문자열에 태그가 들어간다면 (예를들면 띄어쓰기 <br> )

 

header1.textContent = '새로운<br>김테이' // <br> 이 문자열 그대로
header2.innerHTML = '새로운<br>김테이' // <br> 이 실제 태그처럼 적용!!

textContent는 태그로 적용이 안되고 문자열 그대로 적용이됨
innerHTML은 태그처럼 적용이 되서 띄어쓰기 된다!

그럼 innerHTML가 좋은거 아닌가 싶지만 아니다
innerHTML은 보안문제로 많이는 안쓴다고 한다
태그가 적용이 되니 ... 뭔 짓을 할지모르니까?? (내생각)

암튼 innerHTML은 HTML Parsing이 필요한 문자열에만 사용하고
앵간하면 그냥 textContent를 쓰자 ^^
성능과 보안 쪽으로 훨씬 좋다고한다.


🧁 속성 조작하기
속성 또한 조작하려면 해당 태그를 모셔와야함
그리고 넣을땐 setAttribute와 뺄때는getAttribute를 활용

 

img.setAttribute('src', '값')
img.getAttribute('src')

src 속성에 값을 넣고, src 속성에 값을 추출

참고로 넣을때

img.src = '값'

그냥 이런식으로 넣어도 되긴함

 

🧁 스타일 조작하기
스타일도 조작하려면 해당 태그를 모셔오자
모셔온 태그에 .style 로 스타일 조작 가능

tay.style.height = '10px'

 

---

문서 객체 생성 / 추가 / 이동 / 제거

문서 객체 생성하기	문서 객체 추가 / 이동하기	문서 객체 제거하기
createElement()	appendChild()	removeChild()

 

document.addEventListener('DOMContentLoaded', () => {
	// h1 태그를 만듬
    const header = document.createElement('h1')
    // 만든 h1태그에 글자 넣음
    header.textContent = 'createElement로 만든 태그'
    // 거기에 스타일을 추가
    header.style.color = 'red'
    
    // 바디 태그를 가져오고
    const body = document.querySelector('body')
    // 위에서 만든 h1 태그를 바디 태그에 추가함
    body.appendChild(header)

	// 다시 삭제함 ㅎ
    body.removeChild(header)

    // 실제로는 밑에 방법을 더 자주 씀
    header.parentNode.removeChild(header)
    // 헤더태그의 부모태그의 요소 제거하는 것 (이게 더 편함)
}

아주 스윗하게 주석으로 설명함

 

참고로 ...
removeChild 는 자식태그를 삭제하는 것이기 때문에
삭제하고 싶은 태그의 부모태그에게 써야함 ..
하지만 하나하나 부모 찾는거 굉장히 힘들 것 같음!
그래서 parentNode를 통해 더 쉽게 삭제가 가능!

---

이벤트 설정 및 제거

이벤트 설정	이벤트 제거	기본 이벤트 막기
addEventListener()	removeEventListener()	preventDefault()

🧁 이벤트 발생 객체에서 추출하기

document.addEventListener('DOMContentLoaded', () => {
    const h1 = document.querySelector('h1')
    const textarea = document.querySelector('textarea')

    // 여기서 textarea가 이벤트 발생 객체

    // 첫 번째.
    textarea.addEventListener('keyup', () => {
        h1.textContent = `글자 수 : ${textarea.value.length}`
    })

    // ★ 두 번째. event 객체의 currentTarget <- 이걸 제일 많이 쓴다
    textarea.addEventListener('keyup', (event) => {
        h1.textContent = `글자 수 : ${event.currentTarget.value.length}`
    })

    // 세 번째. function과 this 사용하기
    textarea.addEventListener('keyup', function(){
        h1.textContent = `글자 수 : ${this.value.length}`
    })
})

글자수를 출력하는 세 가지 방법

여기서 두 번째 event 객체를 활용하는 것이 가장 많이 씀!

event 객체 내부에 curretTarget 아주 유용해 보인당

 

 

🧁 기본 이벤트 막기

document.addEventListener('DOMContentLoaded', () => {
    const a = document.querySelector('a')
    a.addEventListener('click', (event) => {
        event.preventDefault()
    })
})

기본적으로 일어나는 이벤트를 막아서

a태그 눌러도 이동안함

유용하게 쓸 수 있을 듯