Javascript_04: 요소노드 속성, 요소노드 다루기

Javascript_04: 요소노드 속성, 요소노드 다루기

DOM을 이루는 것은 노드이며 뼈대를 이루는 것은 요소노드 다

요소노드들을 다루는 속성들을 익혀보자

Ragdoll British Shorthair Scottish Fold Bengal Siamese Maine Coon American Shorthair Russian Blue

//먼저 연결을 하고 const myPro = document.querySelector('#list-1'); //속성들을 적용해본다 console.log(myPro.innerHTML); console.log(myPro.outerHTML); console.log(myPro.textContent);

요소노드 속성 element.innerHTML //내부 HTML만을 반환 요소를 추가할 수 있다 myPro.innerHTML += 'Additional one' myPro.innerHTML

= 'First' + myPro.innerHTML; element.outerHTML //요소노드, 내부 HTML을 반환 값 변경시, 처음요소 삭제 myPro.outerHTML = '

Additional one' element.textContent //innerHTML내용을 문자열로 요소 내용 수정 가능 myPro.textContent = ' 새로운 내용 '; //의견 등 적음

위 innerHTML의 요소를 추가할 때 원래 파일에 덮어씌우는 방식임을 알 수 있다

myPro.innerHTML = 'First' + myPro.innerHTML;

입력값이 많을 때 큰 문제를 일으킬 수 있으므로 다른 방법을 알아보자!

요소노드 추가하기

요소 만들기 =document.createElement('태그명');

1. 요소노드 만들기: const making = document . createElement(' li ') ; //태그명을 넣는다

2. 텍스트 값 입력: making.textContent = ' 요소노드 추가하자 ';

3. 추가할 요소에 넣어주기: element.prepend(making);

4. 문자열로 바로 넣어줄 수도 있다: element.append('마지막에 추가');

*요소노드 추가: prepend / append / after / before

요소노드 삭제하기 / 이동하기

1. 요소노드 전체 삭제: making. remove();

2. 요소노드 부분 삭제: making.children[2]. remove();

3. 요소노드 부분 이동: element .append (making.children[2])

4. 세부적인 이동 : element.children[3].after(making.children[1]);

요소노드 활용하기 요소노드 열람 element.innerHTML 내부 HTML element.outerHTML 요소를 포함한 내부HTML element.textContent 요소노드 생성과 추가 = document.createElement(' 태그 '); document.createElement(''); new.textContent = ' 내용 '; prepend() / append()

before() / after() element.append(new); 요소노드 삭제 element.remove(); *delete가 아니다 element.children[index].remove(); 요소노드 이동 element.append( 이동할 요소 ) *children을 활용한다

from http://devyoseph.tistory.com/8 by ccl(A) rewrite - 2021-09-22 08:01:12