분류 전체보기787 [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. 개발자가 부업을 해야 하는 이유 개발자가 부업을 해야 하는 이유 이번 포스팅은 개발자가 부업을 해야 하는 이유에 대해 개인적인 생각을 작성하며, 포스팅의 내용은 개발자뿐만 아니라 모든 직업에 해당할 수 있다. 수도권에 몰려있는 기업 나 같은 경우 현재 부산에 근무하고 있는데, 부산에서 대기업이면서 연봉을 많이 주는 회사는 그렇게 많지 않다. 내가 알고 있는 부산의 대기업을 나열하자면, 부산은행&경남은행, 부산도시공사, 부산국제금융센터(BIFC) 이렇게 세 가지 기업이 있다. 현대글로벌서비스는 본사로 이전하고 있어서 제외하였다. 위 세 가지 기업 이외에도 대기업은 아니지만, 연봉을 괜찮게 주는 기업은 존재한다. 하지만, 근무 조건이 좋지 않아 야근이 많다는 것이 문제다. 부산에 신입 연봉 6,000 이상 주는 기업이 존재하긴 하는데, 듣.. 일상/개발이야기 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. [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. 이전 1 2 3 4 5 6 7 ··· 66 다음