JavaScript/DOM32

• 

  [JavaScript]DOM 프로퍼티와 HTML 애트리뷰트의 차이점 DOM 프로퍼티와 HTML 애트리뷰트의 차이점 DOM의 프로퍼티(Property)와 HTML의 애트리뷰트(Attribute)는 한글로 번역하면 "속성"이라는 뜻이므로 이 둘을 동일한 의미로 해석할 수 있습니다. 하지만, DOM 프로퍼티와 HTML 애트리뷰트는 엄연히 다른 개념이며 이번 포스팅은 이 둘의 차이점을 설명합니다. 애트리뷰트(Attribute) 특징 1. 애트리뷰트는 HTML에 의해 정의됩니다. 요소는 값이 "content"인 id 애트리뷰트, 값이 "content-name"인 name 애트리뷰트, 값이 "custom"인 custom 애트리뷰트를 가집니다. 특징 2. 애트리뷰트의 타입은 문자열(string)입니다. 위 예제에서 사용된 요소의 id 애트리뷰트의 타입을 typeof 연산자로 확인하면.. JavaScript/DOM 2022. 12. 6.

• 

  [JavaScript]노드를 복제하는 방법 노드를 복제하는 방법 이번 포스팅은 노드를 복제하기 위해 사용되는 cloneNode() 메서드 사용 방법을 설명합니다. cloneNode() 메서드 선택한 노드에서 cloneNode() 메서드를 호출하면, 복제된 노드를 반환합니다. const newNode = originalNode.cloneNode(deep); originalNode는 선택한 노드를 의미하며, cloneNode() 메서드는 불리언 타입의 매개변수를 가집니다. 매개변수의 값이 true인 경우 선택한 노드와 자식 노드가 복제되며, false인 경우 선택한 노드만 복제됩니다. 매개변수를 생략하면 false가 기본 값이 됩니다. 얕은 복제와 깊은 복제 아래는 간단한 HTML 마크업 문서입니다. JavaScript Svelte Angular 얕.. JavaScript/DOM 2022. 12. 6.

• 

  [JavaScript]자식 노드를 제거하는 방법 자식 노드를 제거하는 방법 이번 포스팅은 JavaScript에서 선택한 노드의 자식 노드를 제거할 수 있는 removeChild(), remove() 메서드 사용 방법을 소개합니다. removeChild() 메서드 자식 노드를 제거하려면 removeChild() 메서드에 자식 노드를 전달합니다. const childNode = parentNode.removeChild(childNode); parentNode는 선택한 노드이며 removeChild() 메서드에 전달된 childNode는 parentNode의 자식 노드입니다. removeChild() 메서드는 부모 노드와 자식 노드의 관계를 끊으며, 관계가 끊어진 자식 노드를 반환합니다. 아래와 같이 반환 결과를 할당하는 변수가 없으면 관계가 끊어진 자식 .. JavaScript/DOM 2022. 12. 5.

• 

  [JavaScript]자식 노드를 변경하는 방법 자식 노드를 변경하는 방법 이번 포스팅은 자식 노드를 변경할 수 있는 replaceChild() 메서드와 replcaeChildren() 메서드 사용 방법을 설명합니다. replaceChild() 메서드 Node 객체에서 제공하는 replaceChild() 메서드는 선택한 부모 노드의 특정 자식 노드를 다른 노드로 교체합니다. 여기서 특정 자식 노드는 첫 번째 자식 노드, 마지막 자식 노드 등을 의미합니다. parentNode.replaceChild(newChild, oldChild); parentNode는 선택한 부모 노드, newChild는 교체할 새로운 자식 노드, oldChild는 특정 자식 노드를 의미합니다. 아래는 간단한 HTML 마크업입니다. JavaScript React Vue Svelte.. JavaScript/DOM 2022. 12. 5.

• 

  [JavaScript]선택한 요소 뒤에 새로운 요소 추가하는 방법 선택한 요소 뒤에 새로운 요소 추가하는 방법 이번 포스팅은 JavaScript에서 선택한 요소 뒤에 새로운 요소를 추가할 수 있는 after() 메서드 사용 방법을 소개합니다. after() 메서드 Element 객체에서 지원하는 after() 메서드를 사용하면 선택한 요소 뒤에 새로운 요소를 삽입할 수 있습니다. Element.after(newElement); id가 "ul-list"인 요소 앞에 요소를 추가하는 예제는 아래와 같습니다. // 순서 1. 특정 요소 선택 const ulElement = document.getElementById("ul-list"); // 순서 2. h1 요소 생성 const h1Element = document.createElement('h1'); // 순서 3. h1 .. JavaScript/DOM 2022. 12. 5.

• 

  [JavaScript]선택한 요소 앞에 새로운 요소 추가하는 방법 선택한 요소 앞에 새로운 요소 추가하는 방법 이번 포스팅은 JavaScript에서 선택한 요소 앞에 새로운 요소를 추가할 수 있는 before() 메서드 사용 방법을 소개합니다. before() 메서드 Element 객체에서 지원하는 before() 메서드를 사용하면 선택한 요소 앞에 새로운 요소를 삽입할 수 있습니다. Element.before(newElement); id가 "ul-list"인 요소 앞에 요소를 추가하는 예제는 아래와 같습니다. // 순서 1. 특정 요소 선택 const ulElement = document.getElementById("ul-list"); // 순서 2. h1 요소 생성 const h1Element = document.createElement('h1'); // 순서 3... JavaScript/DOM 2022. 12. 5.

• 

  [JavaScript]DocumentFragment 객체 사용 방법 DocumentFragment 객체 사용 방법 DOM은 브라우저가 웹 페이지에 콘텐츠(내용 또는 데이터) 표현 방법을 결정하는 데 사용되는 HTML 문서의 논리적 표현으로 문서 객체 모델(Document Object Model)의 약어입니다. DOM은 JavaScript에서 DOM을 조작(요소 추가, 요소의 순서 변경)할 수 있도록 유용한 API도 제공합니다. 하지만, DOM을 과도하게 조작하거나 접근하면 콘텐츠를 웹 페이지에 표현하는 속도가 느려지므로 주의해야 합니다. 이번 포스팅은 DOM 조작의 문제점과 이를 해결할 수 있는 DocumentFragment에 대해 설명합니다. DOM Reflow와 Repaint 먼저 Reflow와 Repaint라는 두 가지 용어에 대해 알아봅시다. Reflow는 새로운.. JavaScript/DOM 2022. 12. 2.

• 

  [JavaScript]innerHTML 프로퍼티 사용 방법 innerHTML 프로퍼티 사용 방법 이번 포스팅은 innerHTML 프로퍼티의 역할과 사용 방법을 소개합니다. innerHTML 프로퍼티란? innerHTML 프로퍼티는 HTML에 새로운 HTML 요소를 추가하거나 특정 HTML 요소 내부에 작성된 내용(HTML 요소를 포함)을 가져오는 데 사용됩니다. HTML 내용 가져오기 특정 HTML 요소 내부에 작성된 내용을 가져오는 방법입니다. 아래는 간단한 HTML 마크업입니다. category li-1 li-2 아래는 id가 "content"인 HTML 요소를 접근한 다음 innerHTML 프로퍼티의 값을 콘솔에 출력하는 JavaScript 코드입니다. 순서 1. getElementById() 또는 querySelector() 메서드를 사용하여 id가 "c.. JavaScript/DOM 2022. 11. 23.

• 

  [JavaScript]HTML 태그 안의 텍스트 가져오기 및 설정 HTML 태그 안의 텍스트 가져오기 및 설정 이번 포스팅은 웹 페이지에 표시되는 HTML 태그 안의 텍스트를 가져오거나 설정하는 방법을 소개합니다. HTML 태그 안의 텍스트 가져오는 방법 아래는 간단한 HTML 마크업입니다. div 태그 안의 문자열 출력 Hello, My Name is JavaScript! 아래 스크린샷은 HTML 마크업이 적용된 웹 페이지입니다. 이제, "div 태그 안의 문자열 출력" 버튼을 클릭하면 태그 안의 텍스트를 가져와서 콘솔에 출력하는 JavaScript 코드를 구현합니다. innerText 첫 번째 방법은 innerText 프로퍼티를 사용하는 것입니다. innerText는 선택한 요소 및 자식 요소에 존재하는 순수 텍스트만 가져옵니다. const btn = documen.. JavaScript/DOM 2022. 11. 21.

• 

  [JavaScript]HTML 요소 추가하는 방법 HTML 요소 추가하는 방법 지난 포스팅에서 HTML 요소를 생성하고 body 태그에 추가하는 예제를 보여줬습니다. 하지만, body 태그에 추가할 때 사용되었던 appendChild() 메서드에 대해서는 자세히 언급하지 않았습니다. 이번 포스팅은 새로운 HTML 요소를 appendChild() 메서드를 사용하여 DOM에 배치하는 방법에 대해 소개합니다. 지난 포스팅은 아래 포스팅에서 확인할 수 있습니다. [JavaScript]HTML 요소 생성하는 방법 HTML 요소 생성하는 방법 이번 포스팅은 JavaScript에서 HTML 요소를 생성 후 DOM 트리에 추가하는 방법을 소개합니다. createElement() 메서드 가장 기본적인 방법은 document 객체의 createElement() 메서드를 .. JavaScript/DOM 2022. 11. 21.

• 

  [JavaScript]HTML 요소 생성하는 방법 HTML 요소 생성하는 방법 이번 포스팅은 JavaScript에서 HTML 요소를 생성 후 DOM 트리에 추가하는 방법을 소개합니다. createElement() 메서드 가장 기본적인 방법은 document 객체의 createElement() 메서드를 사용하는 것입니다. div 태그를 생성하고 생성된 태그를 변수에 할당하는 방법은 아래와 같습니다. const newDivElement = document.createElement('div'); 새로운 div 태그를 생성했지만, DOM에 배치하지 않았습니다. 따라서, 웹 페이지는 변경되지 않습니다. 현재, div 태그에는 어떠한 텍스트도 포함되어 있지 않으며 스타일도 없습니다. 텍스트, 스타일, id 속성을 적용하고 싶다면 아래 방법을 따라 합니다. 텍스트를.. JavaScript/DOM 2022. 11. 15.

• 

  [JavaScript]형제 노드 가져오는 방법 형제 노드 가져오는 방법 이번 포스팅은 형제 노드를 가져오는 방법을 소개합니다. 먼저 형제 노드가 무엇인지 알아봅시다. 아래와 같은 HTML 마크업이 존재한다고 가정합시다. child1 child2 child3 child4 child5 id가 child-3인 HTML 요소를 기준으로 형제 노드는 네 개입니다. id가 child-3인 HTML 요소를 기준 - id가 parent인 HTML 요소는 부모 노드입니다. - id가 child-1인 HTML 요소는 형제 노드입니다. - id가 child-2인 HTML 요소는 형제 노드이면서 이전 노드입니다. - id가 child-4인 HTML 요소는 형제 노드이면서 다음 노드입니다. - id가 child-5인 HTML 요소는 형제 노드입니다. 이전 형제 노드 가져오.. JavaScript/DOM 2022. 11. 15.