DOM

이서림·2024년 7월 30일

JavaScript

목록 보기

24/28

DOM API란?

DOM: HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할
node: 각각의 요소와 속성, 콘텐츠를 표현하는 단위

DOM 트리에 접근하기

// 해당하는 Id를 가진 요소에 접근
document.getElementById();
// 해당하는 모든 요소에 접근

document.getElementsByTagName();
// 해당하는 클래스를 가진 모든 요소에 접근

document.getElementsByClassName();
// css 선택자로 단일 요소에 접근

document.querySelector("selector");
// css 선택자로 여러 요소에 접근

document.querySelectorAll("selector");

DOM 제어 명령어

이벤트 삽입

target.addEventListener( type, listener )

// 이벤트의 타입에는 click, mouseover, mouseout, wheel 등 다양한 이벤트를 감지.
// listener 함수의 인수에는 이벤트에 대한 정보가 담겨있음.
const myBtn = document.querySelector("button");
myBtn.addEventListener('click', function(){

console.log("hello world");

})

클래스 제어

classList 객체를 통해 요소의 class 속성을 제어

<button>Make me BLUE!</button>

const myBtn = document.querySelector("button");
myBtn.addEventListener('click', function(){
// blue 라는 클래스의 속성 값을 추가 할 수 있습니다.

myBtn.classList.add("blue");
<span class="token comment">// myBtn.classList.remove("blue");   클래스를 제거</span>
<span class="token comment">// myBtn.classList.toggle("blue");   클래스를 토글</span>
<span class="token comment">// myBtn.classList.contains("blue"); 해당하는 클래스가 있는지 확인.</span>
})

요소 제어

document.createElement(target): target요소를 생성
document.createTextNode(target): target텍스트를 생성.
element.appendChild(target): target요소를 element의 자식으로 위치
element.removeChild(target): element의 target 자식 요소를 제거.
element.append(target) : target 요소를 element의 자식으로 위치
target.remove() : target 요소를 제거

const myBtn = document.querySelector("button");
const myUl = document.querySelector("ul");
myBtn.addEventListener('click', function(){

for(let i=0; i < 5; i++){

const myLi = document.createElement('li');

const btnDel = document.createElement('button');

const btnTxt = document.createTextNode('버튼');
btnDel<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>btnTxt<span class="token punctuation">)</span><span class="token punctuation">;</span>
	btnDel<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
		myLi<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	myLi<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'삭제하기: '</span><span class="token punctuation">,</span> btnDel<span class="token punctuation">)</span><span class="token punctuation">;</span>
	myUl<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>myLi<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
});

JS문자열을 사용해 element, text노드 생성&추가

innerHTML

const myBtn = document.querySelector("button");
const myP = document.querySelector("p");
const myInput = document.querySelector("input");
myBtn.addEventListener('click', function(){

myP.textContent = myInput.value;

});
// input 요소에 'input' 이벤트를 연결하면 실시간으로 값이 반영되게 만들 수도 있습니다.

myInput.addEventListener('input', ()=>{

myP.textContent = myInput.value;

});
myP.innerHTML = "<strong>I'm Strong!!</strong>";
// innerHTML 은 요소(element) 내에 포함된 HTML 마크업을 가져오거나 설정합니다. 중요한 기능은 innerHTML로 값을 할당할 때, 마크업으로 변환할 수 있는 문자열이 있다면 마크업으로 만들어 보여준다는 것 입니다. 만약 그런 문자열이 없다면 그냥 문자열만 컨텐츠로 설정합니다.
// innerText 속성은 요소의 렌더링된 텍스트 콘텐츠를 나타냅니다. (렌더링된에 주목하세요. innerText는 텍스트 내에 문법적으로 처리가 가능한 텍스트가 있으면 처리가 끝난 결과물을 텍스트로 전달합니다.)
// textContent 속성은 노드의 텍스트 콘텐츠를 표현합니다. 컨텐츠를 단순히 텍스트로만 다룹니다.

사용시의 주의사항:
- 자바스크립트를 작동시킬 수 있는 가능성
- 나쁜 의도를 가진 사용자가 코드를 입력 할 수 없도록 사용자의 입력 값을 innerHTML을 통해 할당 받는 일만 없도록 하면 안전하게 사용 가능.

속성 제어하기

스타일 제어하기: style

const target = document.querySelector("p");
const txtColor = target.style.color; // 현재 스타일 정보를 가져옵니다.
target.style.color = "red"; // 현재 스타일 정보를 변경합니다.
target.style.fontWeight = "bold"; // 현재 스타일 정보에 font-weight 속성이 없다면 추가합니다.
target.style.color = null; // 현재 스타일 정보를 제거(초기화)합니다.

style 객체 속성 식별자 규칙
- 속성 이름이 한 글자라면 그대로 사용. (height, color …)
- 속성 이름이 대쉬(-) 를 통해 여러 단어로 나눠져있는 경우는 카멜케이스로 사용. (background-image ⇒ backgroundImage)
- float 속성의 경우 이미 자바스크립트의 예약어로 존재하기 때문에 cssFloat으로 사용. style 객체를 통해 설정된 스타일은 CSS inline 스타일과 동일한 가중치.수정의 여지가 있는 스타일에는 많이 사용되지 않고 classList를 이용한 클래스 제어가 더 효과적.

Attribute메서드로 속성값 접근&수정하기:

getAttribute: 요소의 특정 속성 값에 접근.

setAttribute: 요소의 특정 속성 값에 접근하여 값을 수정.


<p id='myTxt'>hello lions</p>
<img src='https://static.ebs.co.kr/images/public/lectures/2014/06/19/10/bhpImg/44deb98d-1c50-4073-9bd7-2c2c28d65f9e.jpg'>
<script>
	const target = document.querySelector('p');
	const myimg = document.querySelector('img');
	const idAttr = target.getAttribute('id');
	console.log(idAttr);
	myimg.setAttribute("src", "https://img.wendybook.com/image_detail/img159/159599_01.jpg");
</script>

data속성으로 요소에 데이터 저장하기: data-* 속성을 사용하면 HTML 요소에 추가적인 정보를 저장하여 마치 프로그램 가능한 객체처럼 사용. 단, data 속성의 이름에는 콜론(:) 이나 영문 대문자가 들어가서는 안됨.

<img
    class="terran battle-cruiser"
    src="battle-cruiser.png"
    data-ship-id="324"
    data-weapons="laser"
    data-health="400"
    data-mana="250"
    data-skill="yamato-cannon"
/>
<script>
    const img = document.querySelector('img')
    console.log(img.dataset);
    console.log(img.dataset.shipId);
</script>

Adjcent로 더 인접한 곳에 정밀하게 배치하기

insertAdjacentHTML : 요소 노드를 대상의 인접한 주변에 배치

const sayHi = document.querySelector('.sayHi');
sayHi.insertAdjacentHTML('beforebegin', '<span>안녕하세요 저는</span>');
sayHi.insertAdjacentHTML('afterbegin', '<span>재현입니다</span>');
sayHi.insertAdjacentHTML('beforeend', '<span>면접오시면</span>');
sayHi.insertAdjacentHTML('afterend', '<span>치킨사드릴게요</span>');
//beforebegin → 여는태그 앞에

//beforeend → 닫는태그 앞에

//afterbegin → 여는태그 뒤에

//afterend → 닫는태그 뒤에

DOM안에서 노드 탐색하기

<!-- 주석입니다 주석. -->
<article class="cont">
    <h1>안녕하세요 저는 이런 사람입니다.</h1>
    <p>지금부터 자기소개 올리겠습니다</p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt incidunt voluptates laudantium fugit, omnis
    dolore itaque esse exercitationem quam culpa praesentium, quisquam repudiandae aut. Molestias qui quas ea iure
    officiis.
    <strong>감사합니다!</strong>
</article>

const cont = document.querySelector(".cont");
console.log(cont.firstElementChild);  // 첫번째 자식을 찾습니다.
console.log(cont.lastElementChild);   // 마지막 자식을 찾습니다.
console.log(cont.nextElementSibling); // 다음 형제요소를 찾습니다.
console.log(cont.previousSibling);    // 이전 형제노드를 찾습니다.
console.log(cont.children);           // 모든 자식요소를 찾습니다.
console.log(cont.childNodes);         // 모든 자식노드를 찾습니다.
console.log(cont.parentElement);      // 부모 요소를 찾습니다.
// 자기 자신부터 시작해 부모로 타고 올라가며 가장 가까운 cont 클래스 요소를 찾습니다. 단, 형제요소는 찾지 않습니다.
console.log(cont.querySelector('strong').closest('.cont').innerHTML);