본문 바로가기

IT875

자바스크립트 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.
자바스크립트 getElementById().innerhtml document.getElementById().innerHTML은 JavaScript에서 HTML 요소의 내용을 변경하거나 가져오는 데 사용되는 메서드입니다. 이 메서드는 문서 내의 특정 id를 가진 HTML 요소를 선택하고 해당 요소의 내용을 반환하거나 변경할 수 있습니다. 사용법 선택한 요소의 내용을 변경하려면 innerHTML 속성에 새로운 HTML 콘텐츠를 할당하면 됩니다. 예를 들어, 다음과 같은 HTML 코드가 있다고 가정해봅시다. Hello, World! 이 경우, id가 "myDiv"인 div 요소의 내용을 변경하려면 다음과 같은 JavaScript 코드를 사용할 수 있습니다. document.getElementById("myDiv").innerHTML = "안녕하세요, 세상!"; 위 코드.. 2023. 4. 11.
자바스크립트 DOM이란? 자바스크립트(JavaScript)는 웹 개발에서 필수적인 프로그래밍 언어 중 하나입니다. 이 언어를 이용하여 웹 페이지에서 인터랙티브한 기능을 구현할 수 있습니다. 이를 위해 자바스크립트 DOM(Document Object Model)이 사용됩니다. DOM은 웹 페이지의 구조를 트리 구조로 표현하는 모델입니다. 이를 이용하여 웹 페이지의 모든 요소를 프로그래밍 방식으로 접근하고 조작할 수 있습니다. DOM은 HTML 문서를 해석하고, 각 요소를 객체로 표현합니다. 이러한 객체를 조작하여, 웹 페이지에서 동적인 기능을 구현할 수 있습니다. DOM에서는 HTML 문서의 각 요소가 노드(Node)로 표현됩니다. 이러한 노드들은 자신의 부모 노드와 자식 노드를 가지며, 이를 이용하여 웹 페이지의 요소를 탐색할 .. 2023. 4. 11.
자바스크립트 구조 분해 할당(destructuring) 자바스크립트 구조 분해 할당은 배열의 요소들이나 객체의 속성들을 각각의 개별적인 변수에 담아서 사용할 수 있는 문법입니다. 구조 분해 할당을 사용하면 원하는 요소를 가져올 때 더 편리할 수 있습니다. 왜냐하면 구조 분해 할당은 가져올 요소들에 해당하는 변수명을 나열하면 되지만 변수를 사용하면 여러 개를 생성해야 되고 관리하기가 쉽지 않기 때문입니다. 사용법 const nums = [1, 2, 3, 4, 5]; const [first, second, ...everythingElse] = nums; console.log(first, second, everythingElse); // 1 2 [ 3, 4, 5 ] const user = { id: "user01", pw: "123", isAdmin: true, .. 2023. 4. 11.
자바스크립트 나머지 매개변수(rest parameters) 자바스크립트 나머지 매개변수는 함수의 인자로 값을 받을 때 정해지지 않은 여러 개의 값을 배열로 받을 수 있습니다. 다만 주의 사항은 매개변수가 하나 이상일 때 나머지 매개변수는 무조건 마지막 매개변수로 사용해야 합니다. 그리고 비슷한 기능을 하는 arguments 객체가 있는데 인자들의 정보를 알 수 있다는 점은 같지만 배열이 아니기 때문에 구분해서 사용해야 합니다. 사용법 function f1(...n) { console.log(n); } function f2(greeting, ...n) { console.log(greeting, n); } function f3() { console.log(arguments); } f1(1, 2, 3); // [ 1, 2, 3 ] f2("hello", 1, 2, 3).. 2023. 4. 10.

티스토리툴바