하루5분코딩"DOM"

HwangSoonhwan·2020년 10월 17일

DOM : (Document Object Model) HTML문서의 구조와 관계를 객체로 표현하는것.

JavaScript를 이용해 엘리먼트의 속성값을 얻어내거나, 변경하는 방법

<body>
 <div id = "practice" class = "highlight red"> 
  엘리먼트가 하나있습니다
   <span> 자식  </span>
 </div>
</body>

태그이름 : div
id : parctice
class : highlight , red
내용 : 엘리먼트가 하나있습니다. , 자식
✓ 부모엘리먼트 : body
✓ 자식엘리먼트 : span

{
   tagName: 'DIV',
   id: 'parctice',
   classList: ['highlight' , 'red'].
   textContent:'엘리먼트가 하나있습니다.' , '자식',
   ParentElement : body,
   children: [
      {
        tagName: 'SPAN',
        text.Countent: '자식'
      }
    ]
 }

이렇게 변경하는 것이 DOM 이다.

DOM 으로 HTML 조작하기

JavaScript를 이용해 Element를 확인하는 방법

엘리먼트를 객체의 형태로 볼수 있는 방법 console.dir

Element 를 선택하는 방법

태그이용 : getElementByTagName
id 이용 : getElementById
class 이용 : getElementByClassName
selector 이용:
querySelector(#아이디/ .클래스 /태그명)
querySelectorAll(#아이디/ .클래스 /태그명) 여러개 일때 사용

Element 를 생성하는 방법

createElement()

const makeDiv = document.createElement('div') ex) span, li , ul 등등 태그명사용가능

현재 div는 생성되었지만 화면상 볼수가 없다. 생성한 div의 부모노드안에 넣어줘야 한다.

Element 를 부모노드에 넣어주기

append(),appendChild()

document.body.append(makeDiv) //부모노드.append(넣어줄 요소)

append VS appendChild
- 텍스트 내용이 있는 엘리먼트를 추가할경우 append 를 사용하면 코드작성량이 줄수있다.
- append 사용을 권장 (preoen 메소드는 앞쪽에 추가시키는 것)

조회하기

querySelector, querySelectorAll

const Tweet = document.querySelector('.tweet')

업데이트하기

textContent , classList.add

makedDiv.textContent = 'hellow' // 값을 넣어준다
makedDiv.classlList.add('tweet')//클래스이름 추가해주기

✓ textContent VS innerText VS innerHTML

textContent - 해당요소내부의 원시 텍스트
innerText - 원시텍스트가 최종적으로 화면에 렌더링된 모습 (ex) 내용숨김, 줄바꿈, 스타일링이 들어간후의 모습)
innerHTML - 태그가 전체적으로 보이며 태그를 사용할수 있고 주로 html 전체내용을 바꿀때 사용 but 보안이 취약하고 느리다.

지우기

remove, removeChild

makeDiv.remove()

자식 엘리먼트를 지우는 방법

document.querySelector('#container').innerHTML = '';

이식과같이 하면 보안상 문제가 있을수 있다. removeChild는 자식 엘리먼트를 지정해서 삭제하는 메소드다. 모두 삭제하기 위해서는 while 문을 활용해야한다.

const container =document.querySelector(`#container`);
while (container.childre.length > `){
	container.romevechild(container.lastChild);
 }
 (자식 엘리먼트가 없어질때 까지 지우는 코드.)