3-3 Dom

Dom
HTML문서를 수정하고 조작할 수 있는 interface다.
ex) 개발자도구의 보이는 Element탭에서 보이는 코드(수정할 수 있다.)

div 생성코드

• document.createElement('div')

div 복제코드

• document.cloneNode('div')

div 조회코드

• document.querySelector('div') - div태그 상단에 1개만 조회
• document.getElementByTagName('div') - 상동
• document.querySelectorAll('div') - div태그 모두 조회

생성 코드

• Element.setAttribute(name, value)
• Element.textContent = '내용'

삭제 코드

• 삭제할노드.remove()
• 삭제할노드의_부모노드.removeChild(삭제할노드)

내용을 바꾸기 위한 코드

• document.querySelector('#world').textContent = "바꿀내용"

InnerHtml(비추, 강추:textContent)

이름그대로 element내에 포함된 모든 html을 반환합니다.

<span>Welcome to Codestates!</span>

버튼 클릭할때 실행 코드

- onclick

displayAlert()함수를 함께 사용하면 버튼을 누르지 않아도 실행되기 때문에 같이 사용 안한다.함수실행은 함수이름옆에 ()붙이면 실행된다.

document.querySelector('#apply').onclick = displayAlert()

버튼을 누를때 새창이 실행되기 위해서는 실행되지 않는 함수명(displayAlert)만 할당해야 된다.

document.querySelelctor('#apply').onclick = displayAlert

- addEventListener
type = click넣고, 함수자체를 넣어주면 버튼클릭할때 새창뜨는 이벤드 생성 가능

prependechild

• 부모노드에 제일 첫번째 자식으로 넣어주는 메소드

ParentNode.prepend()

ParentNode.prepend() 메소드는 Node 객체 또는DOMString 객체를 ParentNode의 첫 자식노드 앞에 삽입한다. DOMString 객체는 Text 노드와 동일하게 삽입된다.