IT/javascript71 자바스크립트 remove vs removeChild 차이점 JavaScript에서 remove()와 removeChild() 메소드는 DOM(Document Object Model)에서 요소를 제거하는 데 사용됩니다. 그러나 두 메소드는 약간의 차이가 있습니다. removeChild() removeChild() 메소드는 지정된 부모 요소의 자식 요소 중 하나를 제거합니다. 예를 들어, 다음과 같이 body 요소의 첫 번째 자식 요소를 제거할 수 있습니다. var parent = document.getElementsByTagName("body")[0]; var child = parent.childNodes[0]; parent.removeChild(child); removeChild() 메소드는 반드시 지정된 부모 요소의 자식 요소 중 하나를 제거해야 합니다. 즉,.. 2023. 4. 13. 자바스크립트 append vs appendChild 차이점 JavaScript에서 append()와 appendChild() 함수는 둘 다 DOM(Document Object Model)에서 새로운 요소를 추가하는 메소드입니다. 그러나 두 함수는 약간의 차이점이 있습니다. appendChild() appendChild() 함수는 지정된 부모 노드의 자식 노드 리스트의 끝에 새로운 노드를 추가합니다. 예를 들어, 다음과 같이 새로운 p 요소를 body 요소의 마지막 자식으로 추가할 수 있습니다. var parent = document.getElementsByTagName("body")[0]; var child = document.createElement("p"); parent.appendChild(child); appendChild() 함수는 매개변수로 단일 요소.. 2023. 4. 13. 자바스크립트 setAttribute JavaScript의 setAttribute 메서드는 HTML 요소의 속성 값을 설정할 때 사용됩니다. 이 메서드를 사용하여 지정된 요소의 속성 값을 변경할 수 있습니다. 사용법 setAttribute 메서드는 다음과 같은 구문을 가집니다. element.setAttribute(name, value); 여기서 element는 속성 값을 변경하려는 HTML 요소를 나타냅니다. name은 변경하려는 속성의 이름을 나타내며, value는 새로운 속성 값을 나타냅니다. 예를 들어, 다음 코드는 id가 "myButton"인 버튼의 value 속성 값을 "Click me!"에서 "Clicked!"로 변경합니다. Click me! function myFunction() { var button = document.ge.. 2023. 4. 13. 자바스크립트 getAttribute JavaScript에서 getAttribute() 메소드는 요소의 속성(attribute) 값을 가져오는 메소드입니다. 이 메소드는 DOM 요소 객체에서 호출됩니다. 사용법 예를 들어, 아래와 같은 HTML 코드가 있다고 가정해봅시다. ... getAttribute() 메소드를 사용하여 id, class, data-info 속성의 값을 가져올 수 있습니다. const element = document.getElementById('example'); const idValue = element.getAttribute('id'); // "example" const classValue = element.getAttribute('class'); // "my-class" const infoValue = elemen.. 2023. 4. 13. 자바스크립트 querySelectorAll querySelectorAll은 자바스크립트에서 제공하는 메서드 중 하나로, CSS 선택자를 사용하여 문서 내에서 특정 요소들을 선택할 수 있습니다. 이 메서드는 Document, Element 및 DocumentFragment 객체에서 모두 사용할 수 있습니다. 사용법 querySelectorAll의 사용 방법은 아래와 같습니다. document.querySelectorAll(selector); 위 코드에서 selector는 CSS 선택자를 의미하며, 선택한 요소들을 NodeList 객체로 반환합니다. 만약 선택된 요소가 없으면 빈 NodeList 객체를 반환합니다. querySelectorAll 메서드는 반환된 NodeList 객체를 통해 선택된 요소들에 대한 조작을 수행할 수 있습니다. NodeLi.. 2023. 4. 12. 자바스크립트 querySelector querySelector는 CSS 선택자를 사용하여 특정 요소를 선택하는 자바스크립트 메서드입니다. 이 메서드는 문서 내에서 첫 번째로 일치하는 요소를 반환합니다. 사용법 예를 들어, 다음과 같은 HTML 코드가 있다고 가정해보겠습니다. Hello World This is a paragraph. 이 코드에서 querySelector를 사용하여 "Hello World"라는 텍스트가 있는 h1 요소를 선택해 보겠습니다. const heading = document.querySelector('h1'); 위의 코드에서는 CSS 선택자 "h1"을 사용하여 문서 내에서 첫 번째로 일치하는 h1 요소를 선택합니다. 이 요소는 heading 변수에 할당됩니다. querySelector 메서드는 다른 CSS 선택자도 사.. 2023. 4. 12. 자바스크립트 getElementsByClassName getElementsByClassName은 HTML 문서 내에서 지정한 클래스 이름을 가진 요소를 선택하는 자바스크립트 함수입니다. 이 함수는 문서 내에서 클래스 이름이 일치하는 모든 요소를 선택하며, 선택한 요소들을 배열 형태로 반환합니다. 반환된 배열에는 선택된 요소들이 순서대로 저장됩니다. 사용법 사용 방법은 다음과 같습니다. var elements = document.getElementsByClassName("class-name"); 위 코드에서 "class-name"은 선택하려는 요소들이 가진 클래스 이름을 의미합니다. 선택된 요소들은 elements 배열에 저장됩니다. 이 함수를 사용하여 선택된 요소들에 대해서는 다른 자바스크립트 함수들을 적용할 수 있습니다. 예를 들어, 선택된 요소들의 텍스.. 2023. 4. 12. 자바스크립트 getElementsByTagName JavaScript에서 getElementsByTagName() 메서드는 HTML 문서 내에서 특정 태그 이름을 가진 모든 요소를 가져오는 역할을 합니다. 이 메서드는 문서 객체 모델(DOM)에서 제공되며, document 객체에서 호출하여 사용합니다. 예를 들어, "p" 태그를 가진 모든 요소를 가져와서 해당 요소들의 innerHTML 값을 변경하고자 할 때, 다음과 같은 코드를 작성할 수 있습니다. 사용법 var pTags = document.getElementsByTagName("p"); for (var i = 0; i < pTags.length; i++) { pTags[i].innerHTML = "새로운 내용"; } 위 코드에서는 변수 pTags에 "p" 태그를 가진 모든 요소를 저장하고, for.. 2023. 4. 12. 이전 1 ··· 3 4 5 6 7 8 9 다음