JavaScript/DOM32

• 

  [JavaScript]부모, 자식 노드 가져오는 방법 부모, 자식 노드 가져오는 방법 이번 포스팅은 JavaScript에서 부모 노드와 자식 노드를 가져오는 방법을 소개합니다. 부모 노드 가져오는 방법 부모 노드를 가져오려면 부모 노드가 존재하는 특정 노드를 NodeList 객체로 가져와야 합니다. NodeList 객체를 반환하는 메서드 - querySelectorAll() - querySelector() - getElementById() - getElementByName() HTMLCollection 객체를 반환하는 메서드 - getElementByTagName() - getElementByClassName() 이번 포스팅은 querySelector() 메서드를 사용합니다. 아래는 HTML 마크업이며 id가 parent인 div 요소 하위에 세 개의 di.. JavaScript/DOM 2022. 11. 15.

• 

  [JavaScript]querySelectorAll 반복문 사용 방법 querySelectorAll 반복문 사용 방법 이번 포스팅은 JavaScript에서 HTML 요소를 가져오는 querySelectorAll() 메서드의 반환 결과에 반복문을 사용하는 방법을 소개합니다. 아래는 네 개의 div 태그를 가지는 HTML 마크업입니다. content1 content2 content3 content4 아래는 querySelector() 메서드로 div 태그를 가져오는 JavaScript 코드입니다. const content = document.querySelectorAll("div"); querySelectorAll() 메서드는 NodeList 객체를 반환하며, NodeList 객체에 반복문을 사용할 수 있는 방법을 알아봅시다. 방법 1. for 문 가장 기본적인 방법인 for.. JavaScript/DOM 2022. 11. 15.

• 

  [JavaScript]HTML 요소 가져오는 방법 JavaScript에서 HTML 요소 가져오는 방법 때때로, 웹 개발자는 HTML 코드를 변경하지 않고 JavaScript에서 HTML 요소를 변경해야 합니다. 이번 포스팅은 HTML 요소를 변경하기 전에 JavaScript에서 HTML 요소를 접근할 수 있는 몇 가지 방법을 소개합니다. id 속성으로 가져오는 방법 첫 번째 방법으로 document 객체의 getElementById() 메서드를 사용하여 id 속성과 일치하는 HTML 요소를 가져올 수 있습니다. getElementById() 메서드에 전달한 id를 가진 HTML 요소가 없는 경우 null이 반환됩니다. id 속성은 HTML 문서 내에서 고유하기 때문에 HTML 요소를 접근할 수 있는 가장 빠른 방법입니다. 아래는 id가 "content".. JavaScript/DOM 2022. 11. 13.

• 

  [JavaScript]HTML 요소의 넓이와 높이 가져오는 방법 HTML 요소의 넓이와 높이 가져오는 방법 이번 포스팅은 JavaScript에서 HTML 요소의 넓이와 높이를 가져오는 방법을 소개합니다. 이번 포스팅의 내용을 이해하려면 크롬 개발자 도구 활용 방법과 CSS 기초 지식이 필요하며, 네이버 메인 화면의 로그인 영역을 기준으로 설명합니다. 방법 1. offsetWidth 및 offsetHeight 프로퍼티 offsetWidth 프로퍼티와 offsetHeight 프로퍼티는 margin을 제외한 HTML 요소의 넓이와 높이를 반환합니다. 로그인 영역의 id 속성이 account이므로 document.getElementById() 메서드에 문자열 "account"를 전달하고 offsetWidth, offsetHeight 프로퍼티를 사용하여 넓이와 높이를 가져옵니.. JavaScript/DOM 2022. 11. 13.

• 

  [JavaScript]JavaScript에서 배경색 변경하는 방법 JavaScript에서 배경색 변경하는 방법 JavaScript에서 특정 이벤트가 발생하면 HTML 요소의 배경색(Background Color)을 변경해야 하는 상황이 존재할 수 있습니다. 이번 포스팅은 HTML 요소의 배경색을 변경할 수 있는 몇 가지 방법을 소개합니다. 웹 페이지의 배경색 변경하는 방법 버튼을 클릭했을 때, 웹 페이지의 배경색을 변경하는 방법입니다. 1. HTML 요소에 click 이벤트 리스너를 추가합니다. 2. document.body.style.backgroundColor 프로퍼티에 배경색을 설정합니다. 아래는 HTML 마크업입니다. 배경색 yellow로 변경 배경색 red로 변경 배경색 blue로 변경 아래는 JavaScript 파일입니다. 버튼을 클릭하면 웹 페이지의 배경색.. JavaScript/DOM 2022. 11. 11.

• 

  [JavaScript]OnClick 이벤트에서 DOM 요소 제거하는 방법 OnClick 이벤트에서 DOM 요소 제거하는 방법 DOM 요소를 클릭했을 때, 해당 요소를 제거하려면 다음 순서대로 코드를 작성합니다. 1. DOM 요소를 가져옵니다. 2. click 이벤트 리스너를 추가합니다. 3. 이벤트 핸들러에서 가져온 요소에 대한 remove() 메서드를 호출합니다. 예를 들어, id 속성이 parent인 요소를 클릭했을 때, 요소를 제거하는 코드는 다음과 같습니다. const parentDiv = document.getElementById('parent'); parentDiv.addEventListener('click', () => { parentDiv.remove(); }); getElementById() 메서드를 사용하여 id 속성이 parent인 요소를 가져온 다음 cl.. JavaScript/DOM 2022. 11. 11.

• 

  [JavaScript]HTMLCollection과 NodeList 차이점 HTMLCollection과 NodeList HTMLCollection과 NodeList의 주요 차이점은 HTMLCollection은 동적이고 NodeList는 정적이라는 것입니다. 즉, DOM에 새로운 요소(Element)가 추가되면 HTMLCollection은 새로운 요소를 가져오지만, NodeList는 가져오지 못합니다. HTMLCollection 다음 두 메서드는 HTMLCollection 객체를 반환합니다. - getElementByTagName() - getElementByClassName() NodeList 다음 두 메서드는 NodeList 객체를 반환합니다. - getElementByName() - querySelectorAll() 차이점 1. 텍스트 노트 포함 여부 다음은 간단한 HTML.. JavaScript/DOM 2022. 11. 10.

• 

  [JavaScript]태그의 이름으로 요소(Element) 가져오는 방법 태그의 이름으로 요소(Element) 가져오는 방법 JavaScript에서 태그의 이름으로 요소를 가져와야 하는 경우가 있을 수 있습니다. 예를 들어, 다음 html 문서에서 태그에 해당하는 요소만 가져와야 하는 상황이 발생할 수 있습니다. JavaScript React Vue div tag1 div tag2 이번 포스팅은 JavaScript에서 getElementsByTagName() 및 querySelectorAll() 메서드를 사용하여 태그 이름으로 하나 이상의 HTML 요소를 가져오는 방법을 소개합니다. getElementsByTagName() 메서드 getElementsByTagName() 메서드는 태그 이름에 해당하는 모든 요소를 가져옵니다. 다음 HTML 예제의 body에는 3개의 p 요소와.. JavaScript/DOM 2022. 11. 10.