🐶 etc/2022기록
[20230622]DOM, 선택자, DOMContentLoaded, script로드시
서카츄
2023. 6. 22. 15:35
DOM
Document Object Model의 약어로 DOM이라고도 함
문서에 접근하기 위한 표준으로 W3C 에서 정의
HTML DOM은 HTML구성요소들을 휙득,변경,추가,삭제하기 위한 표준
HTML문서를 브라우저에도 로드 시 각 구성요소들을 객체화하여 객체 트리 구조를 나타냄.
HTML문서 객체 모델
트리구조로 되어있음.
요소는 노드라고 부름.
요소노드 : html 요소
텍스트 노드 : 요소 노드안에 있는 글자
노드 : 객체화된 각 요소들
button에 바로 script 삽입하기
<button onclick="alert('경고');"> 이름 </button>
script로드시
1. 헤더안에 defer삽입
2. DOMContentLoaded 넣기
//이벤트 적용
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('list1').style.color = 'blue';
});
3. body에 넣기
script 선택자
유사배열은 [i] for문을 활용한다.
let selectionTitle = document.getElementsByTagName('h2');
for (let i =0; i<selectionTitle.length; i++){
selectionTitle[i].style.color ='blue';
}
document.getElementById('list1').style.color = 'blue'; ->단일
document.getElementsByTagName('h2').style.color= 'green'; ->유사배열
요소를 선택하는 여러가지 방법
let mylist = document.getElementsByClassName('list');
console.log(mylist);
let x = 0;
while(x < mylist.length){
mylist[x].style.backgroundColor='#ebebeb';
x++;
}
단일 선택자(바로 지정 가능)
document.querySelector('#box>div>div').style.opacity = 0.1;
All로 할시 유사배열 선택자
let box = document.querySelectorAll('#box>div');
for(i=0; i<box.length; i++){
box[i].style.backgroundColor='#ebebeb';
}
forEach활용
let myp = document.querySelectorAll('p');
//for Each를 이용하여 글자 크기를 1.5em으로 바꿔봄
/*
대상의 값을 마다마다 할일 매개변수 3개 들어옴!
대상.forEach(function(item,index,all){....})
*/
myp.forEach(function(item){
item.style.fontSize = '1.5em';
});
클릭시 알럿창띄우고 색상 변경하기
let clickBtn = document.getElementById('submit');
let bg = document.querySelector('.container > p');
clickBtn.addEventListener('click',function(){
alert('클릭했어요');
bg.style.backgroundColor="#ccc";
});
마우스 호버시 색상 입히고 없애기
bg.addEventListener('mouseover',function(){
bg.style.color='blue';
});
bg.addEventListener('mouseout',function(){
bg.style.color='';
});
bg.addEventListener('mouseover',function(){
this.style.color='blue';
});
bg.addEventListener('mouseout',function(){
this.style.color='';
});
bg.addEventListener('mouseenter',function(){
this.style.color='blue';
});
bg.addEventListener('mouseleave',function(){
this.style.color='';
});
select박스 선택시 body색상 변경(change)
const colorSelect = document.getElementById('color');
const target = document.body;
/*
대상의 value를 확인
*/
document.querySelector('#name').addEventListener('change',function(){
alert('반갑습니다'+this.value+'님')
});
colorSelect.addEventListener('change',function(){
const selectValue = this.value;
target.style.backgroundColor= selectValue;
});