스터디12일차 - DOM조작 자식추가, 텍스트 추가

250. 계층 이동 인접선택자
부모선택자 : .parentElement
제이쿼리에서 .parent() 함수입니다.
부모로 이동합니다.
연달아서 쓸 수 있습니다.
p.parentElement.parentElement.parentElement

자식선택자 : .children 은 여러개 존재할 수 있고, 배열은 아니지만 인덱스로 선택할 수 있습니다.
p.children // [b,span,strong] b를 선택하려면 p.children[0] 과 같이 인덱스를 써서 선택할 수 있습니다.

형제선택자 : .previousSibling, .nextElementSibling
로 이전 또는 다음 형제를 선택할 수 있습니다.

 

 

251. append(문자열마지막에 추가& 태그는 자식으로 추가) & appendChild(태그를 자식으로 추가) 
createElement(태그 만들기) : document.createElement('img') 와 같은 형태로 요소를 만들 수 있습니다.
하지만 src가 없는 img는 아무런 의미가 없어 쓸 수 없고 src를 추가해주어야 합니다.

const newImg = document.createElent('img')
newImg.src = "http://~~" 과 같은 방식으로 객체의 속성에 접근하여 추가할 수 있습니다.

.appendChild() : 자식으로 태그를 추가하기
그래서 이렇게 만들어진 newImg를
document.body.appendChild(newImg)를 이용하여 body의 마지막에 추가할 수 있습니다.

.append() 문자열을(또는 태그를) 마지막에 추가할 수 있습니다.
p.append('추가할문자열')을 하면, p 문단의 마지막에 '추가할문자열'가 추가됩니다. 
p.append('추가할문자열1', '추가할문자열2')처럼 2개 이상을 추가할 수 있습니다.
.prepend() 문자열을 처음에 추가할 수 있습니다.

 

.insertAdjacentElement()원하는 위치의 앞이나 뒤에 요소 추가하기 (잘 안쓸 것 같습니다.)
const h2 = document.createElement('h2') // 태그를 만듭니다. <h2></h2> 가 생겼습니다.
h2.append("Are adorable chickens") // 문자열을 마지막에 추가합니다. <h2>"Are adorable chickens"</h2>
const h1 = document.querySelector('h1') // 넣을 기준이 되는 태그를 선택합니다.
h1.insertAdjacentElement('afterend', h2) // afterend는 뒤에 추가하기 beforebegin 앞에 추가하기, 두번째로 h2는 넣을 녀석. h1의 뒤에 h2를 추가합니다.

.after() 함수는 요소의 다음에 추가합니다.
const h3 = document.createElemnt('h3') // h3 태그를 만듭니다.
h3.innerText = 'I am h3' // 문자열을 수정합니다.
h1.after(h3) // h1 태그 바로 뒤에 h3 태그를 추가합니다.
.before() 함수는 요소의 이전에 추가합니다.

 

위를 전부 이용할 필요는 없고 적절하게 필요한 함수를 사용하면 됩니다. (.insertAdjacentElement('afterend', h2) 별로......)

 

 

252. removeChild & remove 요소 제거하기

.removeChild() 는 자기 자신을 지우는 것이 아니라, 자식을 지우는 함수입니다.
지우고자 하는 태그의 부모를 선택하고 함수를 실행하면 됩니다.
const b = document.querySelector('b')
b.parentElemnt.removeChild(b) // b를 제거합니다.

그런데 사실 위의 함수는 필요가 없습니다. 고전 함수입니다.
.remove() 함수를 쓰면 선택한 요소를 지울 수 있습니다.
b.remove()