🐾JAVA SCRIPT

👣 DOM

문서구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것

👣 querySelector("요소 선택자")

• 문서에 존재하는 모든 요소를 찾아주는 메소드
• 모든 요소를 가져와서 데이터로 만들어줌!
  
  

console.log(document.querySelector('.pink'))

👣getElementById("ID이름")

• 해당 ID를 가지는 요소를 불러오는 메소드
  
  

console.log(document.getElementById('green'))

👣 요소다루기

[.textContent .innerText .innerHTML]

태그 내에 들어갈 문자열을 지정
선택된 요소의 문자열로 hi가 들어가게 됨

div1.textContent = '여기는 <b>첫번째</b> ㅌㅐ그입니다. &hearts;'
console.log(div1.textContent)

div1.innerText = '여기는 <b>첫번째</b> ㅌㅐ그입니다. &hearts;'
console.log(div1.innerText)

div1.innerHTML = '여기는 <b>첫번째</b> ㅌㅐ그입니다. &hearts;'
console.log(div1.innerHTML)

• textContent: 공백문자 그대로 반환
• innerText: 공백문자 공백 문자 제거

[classList.~]

요소.classList.add()
요소.classList.remove()
요소.classList.contains()
요소.classList.toggle()

ex)

console.log(h1.classList);
h1.classList.add('add-h1');

[setAttribute]

선택한 요소의 속성 값을 직접 지정할 수 있는 메소드
요소.setAttribute("속성명","지정할 속성")

searchInputEl.setAttribute("placeholder", "통합검색");

[createElement('html 요소')]

html의 특정 노드를 생성
괄호안에는 html의 요소인 태그명을 넣어주면 됨

let p = document.createElement('p');

[.append()/요소.appendChild()]

요소.append : 선택된 요소의 맨 마지막 자식으로 추가됨

container.append(p);

[before & after]

before : 선택된 요소의 앞으로 추가
after : 선택된 요소의 뒤로 추가

let h3 = document.createElement('h3')
h3.innerText = 'h3';
h1.after(h3);

let h2 = document.createElement('h2');
h2.innerText = 'h2';
h1.before(h2);