JavaScript/DOM
-
-
innerHTML, outerHTML, textContent, innerTextJavaScript/DOM 2023. 1. 28. 16:18
Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Siamese Maine Coon American Shorthair Russian Blue Cat-2 Sphynx Munchkin Persian Norwegian Forset Turkish Angora Bombay Selkirk Rex Munchkin 1. element.innerHTML - 요소 노드 내부의 HTML 코드를 문자열로 리턴해 줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.) - 요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용됩니다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용!) const myTag = docu..
-
<script>태그 위치JavaScript/DOM 2023. 1. 11. 23:09
자바스크립트는 body 요소의 가장 아래에 위치시키는 것이 좋다 - DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 에러가 발생할 수 있다 - 자바스크립트 로딩/파싱/실행의로 인해 HTML 요소들의 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다 // 자바스립트를 head 부분에 위치 시켰을 때 apple banana orange // 자바스립트를 body부분에 위치 시켰을 때 apple banana orange 자바스크립트 파싱에 의한 DOM 생성이 중단(blocking)되는 문제를 해결하기 위해 async와 defer 어트리뷰트를 사용한다. 단, src 어트리리뷰트를 통해 외부 JS파일을 로드하는 경우에만! 사용할 수 있다. src 어트리뷰트없는 인라인 자바스크립트에..
-
DOM조작JavaScript/DOM 2022. 11. 26. 20:05
DOM조작이란? - 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체 하는 것을 말한다. - DOM 조작에 의해 DOM에 새로운 노드가 추가되거나 삭제되면 리플로우와 리페인트가 발생하는 원인이 되므로 성능에 영향을 준다. Element.prototype.innerHTML - setter와 getter 모두 존재하는 접근자 프로퍼티로써 요소 노드의 HTML 마크업을 취득하거나 변경한다 - 요소노드의 innerHTML 프로퍼티를 참조하면 요소 노드의 콘텐츠영역(시작태그와 종료태그사이) 내에 포함된 모든 HTML 마크업을 문자열로 반환 Hello world! - innerHTML 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열에 포함되어 있는 HTML 마..
-
DOM - 노드JavaScript/DOM 2022. 11. 26. 12:16
노드 탐색 - 요소노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM트리의 노드를 옮겨 다니며 부모, 형제, 자식, 노드 등을 탐색해야 할 때가 있다 - parentNode, previousSibling, nextSibling, firstChild,lastChild, childNodes 프로퍼티는 Node.prototype 이 제공하고, 프로퍼티 키에 Element가 포함된 previousElementSibling, nextElemenbSibling, firstElementChild, lastElementChild, children 프로퍼티는 Element.prototype이 제공한다 - Node.prototype는 setter없는 읽기 전용 접근자 프로퍼티 공백 테스트 노드 - HTML요소 사이의..
-
DOM요소에 접근하고 속성 가져오기JavaScript/DOM 2022. 11. 23. 20:09
HTMl 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변한다 노드 객체들로 구성된 트리 자료 구조를 DOM이라 한다. 노드 객체의 트리로 구조화되어 있기 대문에 DOM을 DOM트리라고 부르기도 한다 Hello div => 시작태그 (start tag) class => 어트리뷰트 이름(attritute name) gretting => 어트리뷰트 값(attribute value) Hello => 콘텐츠(contents) => 종료태그(end tag) 노드의 종류 12개 요소노드(Element Node) - HTML구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다 - 텍스트노드는 요소노드의 자식 노드, 어튜리뷰트 노드는 요소노드와 연결되어 있기 때문에..
-
스타일(css style)다루기JavaScript/DOM 2022. 11. 22. 08:33
두가지의 방법 1. 스타일 프로퍼티(style property)를 사용해서 요소를 직접 수정 today.children[0].style.textDecoration = 'line-through'; today.children[0].style.backgroundColor = '#DDDDDD'; today.children[2].style.textDecoration = 'line-through'; today.children[2].style.backgroundColor = '#DDDDDD'; 문제점?! 스타일태그에 직접 적용되기 때문에 style우선순위가 생기기도 하고 여러코드에 적용할때는 비슷한 코드를 적용해서 불필요하게 된다 2. css파일을 만들어 원하는 스타일의 클래스를 만들어놓고 JS로 클래스 속성을 다루..