JavaScript204 [JavaScript]location 객체 사용 방법 location 객체 사용 방법 location 객체란 현재 활성화된 웹 페이지의 URL 정보를 포함하는 window 객체의 프로퍼티입니다. location 객체는 전역 객체이면서 window 객체의 프로퍼티이므로 window.location 또는 location으로 호출할 수 있습니다. location 객체의 프로퍼티 현재 접속한 웹 페이지의 URL이 아래와 같습니다. https://codesandbox.io/s/js-example-forked-8shrxm?file=/src/index.js 아래 스크린샷은 위 URL 정보를 가지는 location 객체의 프로퍼티입니다. ※ username, password 프로퍼티는 더 이상 사용되지 않는 프로퍼티이므로 설명하지 않습니다. href 전체 URL이 포함된.. JavaScript/Tip 2022. 12. 7. [JavaScript]style 애트리뷰트(Attribute) 제거하는 방법 style 애트리뷰트(Attribute) 제거하는 방법 이번 포스팅은 JavaScript에서 style 애트리뷰트를 제거할 수 있는 몇 가지 방법을 소개합니다. removeProperty() - 특정 프로퍼티 제거 HTML 요소의 style 애트리뷰트(Attribute)는 세미콜론(;)을 사용하여 여러 값을 설정할 수 있습니다. 아래 HTML 마크업 문서의 태그는 세 가지 css 프로퍼티인 font-size, color, background-color를 가지고 있습니다. JavaScript에서 특정 css 프로퍼티만 제거하고 싶은 경우 style 프로퍼티의 removeProperty() 메서드를 사용합니다. const result = selectedNode.style.removeProperty(css);.. JavaScript/DOM 2022. 12. 7. [JavaScript]HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법 HTML 애트리뷰트(Attribute)가 존재하는지 확인하는 방법 이번 포스팅은 JavaScript에서 HTML 요소에 애트리뷰트가 존재하는지 확인하는 방법을 소개합니다. hasAttribute() - 특정 애트리뷰트가 존재하는지 선택한 요소에서 특정 애트리뷰트가 존재하는지 확인하려면 hasAttribute() 메서드를 사용합니다. const isAttribute = selectedNode.hasAttribute(name); 매개변수 name: 특정 애트리뷰트의 이름을 문자열로 전달합니다. 반환 결과 매개변수로 전달된 특정 애트리뷰트가 존재하면 true를 반환하고 그렇지 않으면 false를 반환합니다. 아래는 id가 "input-text"인 HTML 요소를 선택한 다음 hasAttribute() 메서드로.. JavaScript/DOM 2022. 12. 7. [JavaScript]HTML 애트리뷰트(Attribute) 제거하는 방법 HTML 애트리뷰트(Attribute) 제거하는 방법 이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 제거하는 몇 가지 방법을 소개합니다. removeAttribute() - 애트리뷰트 이름을 전달 가장 일반적인 방법으로 선택한 요소에서 removeAttribute() 메서드를 호출하여 특정 애트리뷰트를 제거할 수 있습니다. selectedNode.removeAttribute(name); 매개변수 name: 애트리뷰트의 이름입니다. 반환 결과 삭제 여부와 관계없이 undefined를 반환합니다. 아래는 id가 "input-text"인 HTML 요소의 name 애트리뷰트를 removeAttribute() 메서드로 제거하는 예제입니다. const inputNode = docum.. JavaScript/DOM 2022. 12. 7. [JavaScript]HTML 애트리뷰트(Attribute) 설정하는 방법 HTML 애트리뷰트(Attribute) 설정하는 방법 이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 설정하는 몇 가지 방법을 소개합니다. setAttribute() - 이름과 매핑되는 값을 설정 가장 일반적인 방법인 setAttribute() 메서드를 사용하여 선택한 요소의 애트리뷰트를 설정할 수 있습니다. selectedNode.setAttribute(name, value); setAttribute() 메서드는 두 개의 매개변수를 가집니다. 첫 번째 매개변수는 애트리뷰트의 이름이며 대문자를 입력하면 자동으로 소문자로 변환됩니다. 두 번째 매개변수는 애트리뷰트의 이름과 매핑되는 값이며 문자열 타입으로 변환됩니다. setAttribute() 메서드는 undefined를 반환.. JavaScript/DOM 2022. 12. 7. [JavaScript]HTML 애트리뷰트(Attribute) 가져오는 방법 HTML 애트리뷰트(Attribute) 가져오는 방법 이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 가져오는 몇 가지 방법을 소개합니다. getAttribute() - 애트리뷰트 이름으로 값 가져오기 특정 HTML 요소를 선택한 다음 getAttribute() 메서드를 호출하여 HTML 애트리뷰트의 값을 가져올 수 있습니다. 아래는 세 개의 애트리뷰트를 가지는 태그입니다. const inputNode = document.getElementById("input-text"); console.log(inputNode.getAttribute("id")); // input-text console.log(inputNode.getAttribute("name")); // content .. JavaScript/DOM 2022. 12. 7. [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]대화 상자 - alert, prompt, confirm JavaScript의 대화 상자 이번 포스팅은 JavaScript에서 제공하는 세 가지 대화 상자인 alert(), prompt(), confirm() 메서드 사용 방법을 설명합니다. alert() alert() 메서드는 웹 브라우저에서 경고 창을 사용자에게 표시하며, "확인" 버튼 또는 "ESC" 키를 누를 때까지 스크립트 실행이 일시 중지됩니다. alert() 메서드는 전역 함수이므로 window 객체를 통해 호출하거나 직접 호출할 수 있습니다. // window 객체를 통해 호출하는 경우 window.alert('경고 창입니다.'); // 직접 호출하는 경우 alert('경고 창입니다.'); 아래는 간단한 HTML 마크업 문서이며 "alert()" 버튼을 클릭하면 경고 창이 표시됩니다. alert(.. JavaScript/Tip 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. 이전 1 2 3 4 5 ··· 17 다음