jQuery 노드 변경 API, 문자열로 노드 제어, Document 객체, Text 객체( 값 API, 조작 API )
jQuery 노드 변경 API
* 자세한 내용은 http://api.jquery.com/category/manipulation/을 참고하면 된다.
추가
- jQuery에서 메소드를 이용하면 원하는 위치에 태그를 추가 시킬수 있다.
before - 해당 태그 이전에 형제관계로 생성이 된다.
prepend - 해당 태그 안쪽 컨텐츠 이전에 생성이 된다. ( 자식 관계 )
append - 해당 태그 안쪽 컨텐츠 이후에 생성이 된다. ( 자식 관계 )
after - 해당 태그 이후에 형제관계로 생성이 된다.
제거
remove() - 선택된 엘리먼트를 제거한다.
empty() - 선택된 엘리먼트의 텍스트 노드를 제거한다.
( remove()와 empty()에 대한 차이점을 해당 코드의 실행 결과를 통해 확실하게 구분해봤다... )
( remove()는 해당 노드를 제거해서 해당 노드에 대한 내용이 하나도 남지않게 한다 )
( empty()는 remove()와는 다르게 해당 노드 자체를 지우지 않고 그 안에 있는
내용들만 비운다는걸 위에 실행 결과에 개발자 도구를 확인해보면 확인 할 수 있다.. )
바꾸기
replaceWith() - 제어 대상을 먼저 지정하는 것
replaceAll() - 제어 대상을 인자로 전달한다.
* 동작 방식은 같지만 제어 대상을 먼저 지정할지 아니면 인자로 지정할지에 대한 차이가 있다.
( 제어대상의 노드를 바꿀수 있는 기능으로 jQuery에서는 replaceAll()과 replaceWith()를 제공한다 )
( replaceAll()을 이용하면 해당 제어 대상을 바꿀수 있고 제어대상은 인자값으로 넘겨주고
바꿀 내용은 jQuery 함수안에 넣어준다... )
( replaceWith()는 제어대상을 먼저 jQuery 함수에 지정해주고 바꿀 내용은 인자로 넘겨주게 된다는 차이점이 있다.. )
복사
clone() - 노드를 복사하는데 사용한다.
( jQuery에서 제공하는 clone()을 이용하면 해당 노드를 복사 할 수 있다 )
( replaceAll()을 이용해서 clone()으로 복사한 내용을 id값이 'target1'인 노드에 바꾸는 용도로 사용해본 결과
정상적으로 잘 적용이 된걸 볼 수 있다 )
( replaceWith()도 같은 기능을 하기 때문에 이 또한 한번 해봤고 잘 적용이 된다는걸 알 수 있었다 )
이동
DOM manipulation API의 인자로 특정 노드를 선택하면 이동의 효과가 난다.
( 예를 들어서 before, after, prepend, append를 이용해서 해당 태그를 이동시킬수 있다 )
문자열로 노드 제어
innerHTML - 해당 타겟의 하위 코드들을 알아올수 있고 HTML코드로 작성해서 태그를 추가 시킬 수 있다.
outerHTML - 자기자신을 포함한 전체를 코드를 알아올 수 있고 태그를 추가 시킬때도 해당 타겟 전체에 적용이 된다.
* innerText, outerText는 앞에 있는 HTML과 비슷한데 텍스트를 알아오거나 변경한다는 점만이 다르다.
insertAdjacentHTML() - 좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용한다.
( innerHTML을 이용해서 노드의 하위 코드들을 알아오거나 HTML 코드를 작성하여 해당 코드를
노드의 하위에 넣을 수 있다 )
( innerHTML로 해당 노드의 하위 코드들을 알아온 결과이고 해당 노드까지 알아오고 싶다면 outerHTML을 사용해야 한다 )
( innerHTML을 이용해서 HTML 코드를 작성해서 넣으면 해당 노드의 하위로 코드가 들어가면서
이전에 들어있던 코드들의 내용은 없어지게 된다... innerHTML은 하위 코드에 대한 개념을 잘 기억해둬야 한다.. )
( outerHTML은 innerHTML과 다르게 해당 노드의 하위가 아닌 해당 노드를 포함한 코드들을 가져오거나
변경하게 된다 )
( outerHTML을 이용해서 해당 노드를 포함 코드들을 가져와봤고
해당 노드를 포함한다는 점이 innerHTML과 차이점이다.. )
( outerHTML을 이용해서 작성한 HTML 코드를 넣어보면 ol 태그 또한 작성 내용에 들어가 있기 때문에
원래 있던 ul 태그 대신에 ol 태그 방식으로 결과가 출력되는걸 볼 수 있다 )
Document 객체
- DOM에서 정의되있는 규격(문서)
- DOM의 시작점이자 문서 전체를 의미하는 노드
- HTML 문서에서 사용하는 객체는 HTMLDocument 객체를 사용한다.
- HTMLDocument 객체는 HTML 문서 전체를 대표하는 객체
Text 객체
- CharacterData 객체를 상속 받아서 Text 내용을 프로그래밍적으로 다룰수 있게 해주는 객체
값 - 텍스트 노드의 값을 가져오는 API( 해당 값을 가져올수도 있지만 변경도 가능하다 )
data
nodeValue
조작
appendData(data) - 해당 노드의 뒤에 data를 추가시킨다.
deleteData(start,end) - start부터 end까지의 data를 삭제 시킨다.
insertData(start,data) - start로 지정된 위치에 data를 삽입 시킨다.
replaceData(start,end,data) - start 위치부터 end까지를 data로 내용을 바꾼다.
subStringData(start,end) - start에서 end까지의 데이터를 잘라내서 특정 부분만 얻을수 있다.
생성
docuemnt.createTextNode()
댓글