DOM은?
Document Object Model의 약자로 HTML 또는 XML 문서와 연계 작용하고 표현하는 API 입니다.
DOM은 문서의 모든 회로에 접근하고 접합 작용을 할 수 있도록 브라우저에서 코드를 활성화할 수 있게 하며, 웹 에서 가장 많이 사용되는 API 중 하나입니다. PCB는 생성, 이동 및 변경될 수 있습니다. 이벤트 리스너를 회로에 추가해 현재 이벤트가 종료될 때 트리거되게 할 수 있습니다.
새로운 HTML 요소를 선택하기 위해 제공되는 메소드
document.getElementById() -> 해당 아이디의 요소를 선택
document.getElementsByClassName() -> 해당 클래스에 속한 요소를 모두 선택
document.getElementsByName() -> 해당 name 속성값을 가지는 요소를 모두 선택
document.getquerySelectorAll() -> 해당 선택자로 선택되는 요소를 모두 선택selector를 이용한 선택
document.querySelector('.class') //클래스
document.querySelector('#id') // id
document.querySelector('tag') // tag
document.querySelector('tag[name=name명]') // name속성으로 가져오기document.querySelectorAll('.class) //클래스
document.querySelectorAll('#id') //id
document.querySelectorAll('tag') // tag
document.querySelectorAll('tag[name=name명]') //name속성으로 가져오기doument.querySelector: 해당하는 선택자 하나만 가져온다.
document.querySelectorAll: 해당하는 선택자 배열형식으로 전부 가져온다.
Class 제어하기
.classList.add() : 선택한 요소의 클래스로 추가한다.
.classList.remove() : 선택한 요소의 클래스에서 삭제한다.
.classList.togle() : 선택한 요소의 클래스가 있으면 제거, 없으면 추가
.classList.contains() : 인수의 내용이 선택한 요소의 클래스에 포함되어 있는지 확인한다.
Css 제어하기
element.style.color : 'red' :elment의 속성을 하나 추가해준다.
element.style.cssText : 'background : red; color : blue' :element의 속성을 여러개 추가해준다. 기존 css가 있으면 덮어 씌운다.
노드 추가 삭제하기
createElemet() : 요소 노드를 생성
createTextNode() : 텍스트 노드 생성
createAttribute() : 속성 노드 생성
after () : js 메서드 선택한 노드의 뒤에 추가함.
before () : js 메서드 선택한 노드의 앞에 추가함
addendChild() : 기준 노드의 마지막 자식 요소로 추가.
append(div,p,'hello') : js 메서드 마지막 자식 요소로 추가하고 여러개의 노드를 추가할 수 있음 텍스트도 추가 가능
remove() : 선택한 노드에서 remove()메서드를 호출하면 DOM 트리에서 바로 제거합니다.
removeChild(자식노드): 자식 노드를 제거하려면 removeChild()메서드에 자식 노드를 전달해서 제거
속성을 가져오거나 수정
getAttribute('속성명') : 태그의 속성을 가져온다.
setAttribute('속성명', '값') : 속성값을 지정해 준다.
HTML 요소를 생성하기 위해 제공되는 메소드
document.createElement() -> 지정된 HTML 요소를 생성
document.write() -> HTML 출력 스트림을 통해 텍스트 출력HTML요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성
요소.onclick = funtion (){} -> 마우스 클릭 이벤트와 연결될 이벤트 핸들러자바스크립트와 DOM
DOM 요소의 선택
// HTML <li> 요소를 선택
var selectedItem = document.getElementsByTagName("li");// 아이디가 "id"인 요소를 선택
var selectedItem = document.getElementById("id");// 클래스가 "odd"인 모든 요소를 선택
var selectedItem = document.getElementsByClassName("odd");// name 속성값이 "first"인 모든 요소를 선택
var selectedItem = document.getElementsByName("first");// 아이디가 "even"인 요소를 선택
var selectedItem = document.getElementById("even");// 선택된 요소의 텍스트 색상을 변경
selectedItem.style.color = "red";// 아이디가 "text"인 요소를 선택
var str = document.getElementById("text");// 선택된 요소의 내용을 변경
str.innerHTML = "요소의 내용을 바꿉니다";노드와 노드 트리
HTML DOM에서 정보를 저장하는 계층적 단위
노드 트리는 노드들의 집합으로, 노드간의 관계를 나타낸다.
- 문서노드(document node)
HTML 문서 전체를 나타내는 노드 - 요소노드(element node)
모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드 - 주석 노드(comment node)
HTML 문서의 모든 주석은 주석 노드 - 속성 노드(attribute node)
모든 HTML 요소의 속성은 속성노드이며, 요소노드에 관한 정보를 가진다.
하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다. - 텍스트 노드(text node)
HTML 문서의 모든 텍스트는 텍스트 노드
노드의 값
노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있습니다.
nodeName(이름), nodeValue(값), nodeType(타입)
ex)
// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택
document.childNodes[0].nodeName;// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 노드값을 선택
document.getElementById("heading").firstChild.nodeValue;// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택
document.getElementById("heading").firstChild.nodeType;이벤트(Event)
이벤트란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
이벤트 타입
발생한 이벤트의 종류(폼,키보드,마우스,HTML DOM, Window 객체 등)
ex)
// 마우스 클릭 이벤트 예시
<p onclick = "changeText(this)"> 여길 클릭하세요!</p>
<script>
function changeText(element) {
element.innerHTML = "내용이 바뀌었습니다.!"
}
</script> 이벤트 핸들러
이벤트가 발생했을 때 그 처리를 담당하는 함수
지정된 이벤트가 발생하면, 웹브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킵니다.
ex)
// 이 함수는 HTML 문서가 로드될 때 실행됨
window.onload = function() {
// 아이디가 "text"인 요소를 선택함.
var text = document.getElementById("text");
text.innerHTML = "HTML 문서가 로드되었습니다.";
}이벤트를 추가 하는 방법 addeventListener
const buttonClickHander = () => {
alert ('click');
};
btn.addeventListener('click' , buttonClickHander);this 란?
this는 어디서 어떻게 호출된지에 따라 결정됩니다.
this는 부모 객체를 가르킴.
전역호출 : window
console.log(this) // window
함수호출 : window
function consoleThis () {
console.log(this);
}
consoleThis(); // window