[자바스크립트] document API

document

document는 브라우저가 불러온 웹페이지를 나타내며 웹페이지를 접근 할려고 할때 시작점이 된다.

document는 모든 종류의 문서에 대한 공통의 속성과 메소드를 묘사합니다. 

html을 컨트롤(이벤트 바인딩)을 하고 document api를 활용하여 html 객체 생성및 소멸 혹은 수정을하고

객체의 속성 생성 및 수정도 한다.

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Using_the_W3C_DOM_Level_1_Core

 

document api 를 활용하여 객채 검색

document의 메소드를 활용하여 html 태그를 검색

id, class, tag, css의 선택자로 객체를 검색할 수 있고, 검색 대상에 따라 알맞는 메소드를 선택하여 객체를 검색한다.

 

 

document 메소드

HTML 요소의 선택 id, class, tag, css선택자로 요소를 선택함

 

id 객체 검색

태그가 id 속성이 있을경우 해당 id속성 값으로 객체를 검색을 한다.

document.getElementById('아이디값');

 

//<button type="button" id="myBtn">id로 객체 검색</button>
var myBtn = documet.getElementById('myBtn');



myBtn.onclick = function(){
	alert('안녕하세요')
    
    //해당 객체의 style 속성에 접근하여 css속성에 접근해서 값 대입
	myBtn.style.color = '#f00';
	myBtn.innerText = 'myBtn';
}

innerText, innerHtml

- innerText : 선택된 객체의 텍스트 요소를 가지고 오거나, 텍스트 요소를 대입 할 수 있다.
- innerHtml : 선택된 객체의 html의 요소를 text로 가지고 오거나,  html요소를 삽입 할 수 있다.

 

 

class로 객체 검색

태그 class속성이 잇을경우 해당 속성의 값과 일치하는 모든 대상검색 -> 결과값이 배열로 반환된다

document.getElementByClassName('클래스명');

var myCheck = document.getElementsByClassName('myCheck'); // 클래스가 'myCheck'인 모든 요소를 선택함

//배열로 객체를 반환하였기 때문에 반복문으로 풀어내야함
for(var i=0; ㅑ<myCheck.length; i++){
	myCheck.onclick = function(){
    	this.style.color = '#0f0'; //반복문으로 선택된 해당요소를 찾아 텍스트 색상을 변경
    }
}

tag 명으로 객체 검색

인수에 해당되는 모든 태그를 검색하여 배열에 담아 반환한다  --> 클래스와 동일

document.getElementsByTagName('테그명');

css 선택자로 단일 검색

인수에 해당되는 선택자 기준으로 객체을 검색하여 1개의 객체 반환한다.

#아이디, .클래스, [속성], [속성=값], or, and, 상하관계 표현한다.

document.querySelector('선택자');

css 선택자로 다중 검색

인수에 해당되는 선택자 기준으로 객체를 검색하여 일치하는 모든 대상을 반환을 하며  배열로 담는다.

document.querySelectorAll('선택자');

// 선택자엔 #id, .class, [속성],[속성=값], or, and, 상하관계 표현
document.querySelector('선택자');
//css 선택자로 객체 검색
var span02 = document.querySelector('#mydiv .span02');
console.log(span02);
//css 선택자로 객체 다중 검색
var tagArray = document.querySelectorAll('#mydiv .span02, h1');