DOM (생성 , 조회 , 수정)

DOM (생성 , 조회 , 수정)

<div class="parent">
	<div class="child">1</div>
    <div class="child">2</div>
</div>

document.createElement()

• 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환합니다.

const divEl = document.createElement('div')
console.log(divEl);

const inputEl = document.createElement('input')
console.log(inputEl);

E.prepent() / E.append()

• 노드를 요소의 첫번째 혹은 마지막 자식으로 삽입합니다.

const parentEl = document.querySelector('.parent')
const el = document.createElement('div')
el.textContent = 'Hello~'

parentEl.prepend(new Comment(' 주석 '))
parentEl.prepend(el)
parentEl.prepend('Text!')

E.remove()

• 요소를 제거합니다.

const el = document.querySelector('.child')
el.remove();

E.insertAdjacentElement()

• 대상 요소의 지정한 위치에 새로운 요소를 삽입합니다.
• 대상_요소.insertAdjacentElement(위치, 새로운요소)

<!-- 'beforebegin' -->
<div class="target">
	<!-- afterbegin -->
    Content!
    <!-- beforeend -->
</div>
<!-- afterend -->

const childEl = document.querySelector('.child');
const newEl = const el = document.createElement('span');
newEl.textContent = 'Hello~'

childEl.insertAdjacentElement('beforebegin',newEl)

N.inserBefore()

• 부모 노드의 자식인 참조노드의 이전 형제로 노드를 삽입합니다.
• 부모노드.inserBefore(노드, 참조노드)
• text, Comment 도 삽입할수 있다.

const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');
const newEl = const el = document.createElement('span');
newEl.textContent = 'Hello~'

parentEl.inserBefore(newEl, childEl)

N.contains()

• 주어진 노드가 노드의 자신을 포함한 후손인지 확인합니다.
• 노드.contains(주어진 노드)

const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');

console.log(parentEl.contains(childEl)) //true
console.log(document.body.contains(parentEl)) //true
console.log(document.body.contains(childEl)) //true
console.log(document.body.contains(document.body)) //true
console.log(parentEl.contains(parentEl)) //true
console.log(parentEl.contains(document.body)) //false
console.log(childEl.contains(document.body)) //false

N.textContent()

• 노드의 모든 텍스트를 얻거나 변경합니다.

const el = document.querySelector('.child');
console.log(el.textContent) //1

el.textContent = '7';
console.log(el.textContent) //7

E.innerHTML()

• 요소의 모든 HTML 내용을 하나의 문자로 얻거나, 새로운 HTML을 지정합니다.

const el = document.querySelector('.parent');
console.log(el.innerHTML)

el.innerHTML = '<span style="color:red;">Hello~</span>'

el.innerHTML = /* html */`
	<div style="color:red;">Hello~
    	<span style="color:red;">Hello~</span>
        <span style="color:red;">Hello~</span>
    </div>`

E.dataset

• 요소의 각 data- 속성 값을 얻거나 지정합니다.

const el = document.querySelector('.child');
const str = 'Hello world!'
const obj = {a:1, b:2}
el.dataset.helloWorld = str
el.dataset.object = JSON.stringify(obj) //문자화 시키기

console.log(el.dataset.helloWorld)
console.log(el.dataset.object)
console.log(JSON.parse(el.dataset.object)); //자바스크립트로 변환시켜준다.

E.tagName

• 요소의 태그 이름을 반환합니다.

const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');
const el = document.createElement('span');

console.log(parentEl.tagName) //DIV
console.log(childEl.tagName) //DIV
console.log(el.tagName) //SPAN
console.log(document.body.tagName) //BODY

E.id

• 요소의 id 속성 값을 얻거나 지정합니다.

const el = document.querySelector('.child');
console.log(el.id);

el.id = 'child1'
console.log(el.id);
console.log(el);

E.className

• 요소의 class 속성 값을 얻거나 지정합니다.

const el = document.querySelector('.child');
console.log(el.className);

el.className += ' child1 active '
console.log(el.className);
console.log(el);

E.classList

• 요소의 class 속성 값을 제어합니다.
  .add() : 새로운 값을 추가
  .remove() : 기존 값을 제거
  .toggle() : 값을 토글
  .cotains() : 값을 확인

const el = document.querySelector('.child');

el.classList.add('active')
console.log(el.classList.contains('active')); //true

el.classList.remove('active')
console.log(el.classList.contains('active')); //false

el.addEventListener('click',()=>{
	el.classList.toggle('active')
  	console.log(el.classList.contains('active'));
})

E.style

• 요소의 style 속성(인라인 스타일)의 CSS 속성값을 얻거나 지정합니다.

const el = document.querySelector('.child');
//개별지정
el.style.width = '100px';
el.style.fontSize = '20px';
el.style.position = 'absolute';
//한번에 지정
Object.assign(el.style,{
	width = '100px';
  	fontSize = '20px';
  	position = 'absolute';
})
console.log(el.style); //
console.log(el.style.width); //100px
console.log(el.style.fontSize); //20px
console.log(el.style.position); //absolute

Window.getComputedStyle()

• 요소에 적용된 스타일 객체를 반환합니다.

const el = document.querySelector('.child');
const styles = window.getComputedStyle(el);

console.log(styles.width);
console.log(styles.fontSize);
console.log(styles.backgroundColor);
console.log(styles.position);

E.getAttribute() / E.setAttribute()

• 요소에서 특정 속성 값을 얻거나 지정합니다.

const el = document.querySelector('.child');
el.setAttribute('title','Hello World!');
console.log(el.getAttribute('title')); //Hello World!

E.hasAttribute() / E.removeAttribute()

• 요소에서 특정 속성을 확인하거나 제거합니다.

const el = document.querySelector('.child');
console.log(el.hasAttribute('class')); //true

el.removeAttribute('class');
console.log(el.hasAttribute('class')); //false
console.log(el; //<div>1</div>