분류 전체보기787 [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. [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]무한대(Infinity)란? 무한대(Infinity) 무한대(Infinity)는 JavaScript 전역 객체의 프로퍼티이므로 전역 범위에서 사용할 수 있습니다. 전역 객체의 프로퍼티인 Infinity는 양의 무한대를 의미하며, 초기값은 Number.POSITIVE_INFINITY입니다. Infinity === Number.POSITIVE_INFINIT; // true Infinity 앞에 마이너스(-) 기호가 존재하면 음의 무한대를 의미하며, Number.NEGATIVE_INFINITY와 동일합니다. -Infinity === Number.NEGATIVE_INFINITY; // true 일반적으로 다른 프로그래밍 언어에서는 숫자를 0으로 나누게 되면 ArithmeticException 예외가 발생하지만, JavaScript는 Inf.. JavaScript/기초 2022. 12. 5. [React]새로운 탭 띄우는 방법 새로운 탭 띄우는 방법 이번 포스팅은 React에서 외부 링크를 띄우는 방법을 소개합니다. a 태그를 활용하여 새로운 탭 띄우기 첫 번째 방법으로 HTML의 기본 요소인 태그를 사용할 수 있습니다. 태그의 href 속성에 외부 링크를 설정하고 target 속성에는 "_brank"를 설정합니다. 마지막으로 rel 속성에는 "noopener noreferrer"를 설정합니다. export default function App() { return ( Naver 이동 ); } target 속성을 "_blank"로 설정하면 외부 링크가 새로운 탭에서 활성화됩니다. rel 속성의 noopener는 현재 활성화된 페이지와 새로운 탭에서 활성화되는 페이지를 별개의 프로세스로 취급합니다. noreferrer는 현재 활성.. React/기타 2022. 12. 5. 이전 1 2 3 4 5 6 ··· 66 다음