[JavaScript] DOM객체 속성 제어

DOM 객체 속성 제어

---

.setAttribute('속성', '값')

속성 값 설정

container.setAttribute("data-style", "teal");

.container에 data-style="teal" 속성과 값 추가

---

.getAttribute('속성', '값')

속성 값 얻음

console.log(container.getAttribute("id")); // wrapper

---

.hasAttribute('속성', '값')

속성 존재 확인 (true, false로 반환)

console.log(container.hasAttribute('data-style')); // true

---

.removeAttribute('속성', '값')

속성값 제거

li[2].removeAttribute('class');

li.forEach(a => a.removeAttribute('id'))
// 화살표 함수로 모든 li의 id 속성 제거

---

 

요소의 이동, 생성과 삭제

createElement('')

요소 이름을 인자로 전달해 생성만 해 줌.(DOM 객체에 직접 추가되는 게 아니라 만들어지기만 한 상태)

const ul = document.createElement('ul');

---

.append(node)

노드 자식의 끝에 추가

기존 요소 노드에 적용하면 위치가 옮겨짐.

document.body.append(ul) // body의 자식 요소 가장 끝에 추가
ul.setAttribute('id', 'gnb'); // 해당 요소에 id 속성과 값 추가

.appendChild(node)

인자로 전달한 노드를 마지막 자식 요소로 DOM tree에 추가

기존 요소 노드에 적용하면 위치가 옮겨짐.

      ul.appendChild(li);
      li.innerHTML = `<a href="#">a 추가</a>`;

 

---

.append와 .appendChild의 차이

.append는 자바스크립트 메서드이다.

.append는 여러 요소를 한 번에 추가할 수 있으며

노드 객체와 DOMString(문자열)을 모두 사용할 수 있다..append는 return값을 반환하지 않음.

const p = document.createElement("p");
const div = document.createElement("div");
const a = document.createElement("a");

document.body.append(p, div, a, "이건 텍스트");

 

---

.appendChild는 DOM메서드이다.

.appendChild는 한 번에 한 요소만 추가할 수 있으며

노드 객체만 사용 가능하다.

.appendChild는 return값을 반환한다.

---

.insertAdjacentHTML('위치', '요소');

위치에 들어갈 값은 아래와 같다.

 

-- beforebegin --

<ul>

-- afterbegin --

'text'

-- beforeend --

</ul>

-- afterend --

 

ul.insertAdjacentHTML('beforeend', '<li>li 노드 추가</li>');
// ul의 닫는 태그 바로 위에 요소 추가

---

.prepend(노드);

기준 노드 자식의 맨 앞에 추가

document.body.prepend(h1) // body의 자식 요소 제일 앞에 추가
h1.innerHTML = '노드 추가, 수정, 삭제'

---

.before(노드);

기준 노드 앞쪽에 형제로 추가.

인용부호로 감싸면 문자열로 취급.

ul.before('<p>.before : 기준 노드 형제 앞쪽에 추가</p>')

---

.after(노드);

기준 노드 뒤쪽에 형제로 추가.

const p = document.createElement('p');
ul.after(p)

---

.remove(노드);

노드 삭제

const lis = document.querySelectorAll('li')
lis.forEach(i => i.remove());