JavaScript
-
[DOM]JavaScript를 사용하여 성과 이름 조합 출력하기JavaScript 2023. 10. 26. 16:00
성과 이름 조합 출력 먼저, 사용자가 성을 입력할 수 있는 입력란을 선택합니다. 아래 코드는 '#familyText' ID를 가진 입력 태그를 선택합니다. let familyText = document.querySelector("#familyText"); // 성 입력란 선택 그리고 사용자가 이름을 입력할 수 있는 이력란을 선택합니다. 이 예제에서는 '#firstText' ID를 가진 입력 태그를 사용합니다. let firstText = document.querySelector("#firstText"); // 이름 입력란 선택 다음으로 성과 이름을 조함하여 풀 네임을 출력할 위치를 선택합니다. 이 예제에서는 '#fullName' ID를 가진 요소를 사용하여 풀네임을 표시 합니다. let fullName ..
-
[DOM]JavaScript를 사용하여 텍스트 입력 문자 수 세기JavaScript 2023. 10. 26. 15:11
텍스트 입력 감시 텍스트 입력란을 선택해야 합니다. 아래 코드는 'textarea' 클래스를 가진 텍스트 입력란을 선택합니다. let textarea = document.querySelector(".textarea"); // 텍스트 입력란 선택 그리고 문자 수를 출력할 위치를 선택합니다. 이 예제에서는 string_num 클래스를 가진 태그를 사용하여 문자 수를 출력합니다. let string_num = document.querySelector(".string_num"); // 문자 수 출력 위치 선택 다음으로 'addEventListener' 메서드를 사용하여 사용자가 텍스트 입력란에서 키를 떼었을 때 실행될 함수를 정의합니다. textarea.addEventListener("keyup", functi..
-
[DOM] JavaScript를 사용하여 금칙어 검사하기JavaScript 2023. 10. 26. 15:01
금칙어 검사 먼저 금칙어 검사를 할 입력 필드를 선택합니다. 아래 코드는 'name-input' 클래스를 가진 입력 태그를 선택합니다. let nameInput = document.querySelector(".name-input"); // 입력 태그 선택 그리고 금칙어가 감지될 경우 경고 메시지를 출력할 태그를 선택합니다. let warningMessage = document.querySelector(".warning-message"); // 출력 태그 선택 'addEventListener 메서드를 사용하여 입력 필드에서 텍스트가 입력될 때 실행될 함수를 정의합니다. nameInput.addEventListener("input", function () { // 입력된 텍스트 가져오기 let inputSt..
-
[DOM]JavaScript를 사용하여 HTML 클래스 리스트 조작하기JavaScript 2023. 10. 26. 14:46
클래스 추가하기 먼저 클래스를 추가하려면 해당 요소를 선택해야 합니다. 아래 코드는 '#content' ID를 가진 요소를 선택한 다음, 해당 요소에 'red' 클래스를 추가합니다. let content = document.querySelector("#content"); // 요소 선택 content.classList.add("red"); // red 클래스 추가 클래스 교체하기 요소에 이미 클래스가 있는 경우, 해당 클래스를 교체할 수 있습니다. 아래 코드는 'red' 클래스를 'skyblue' 클래스로 교체합니다 content.classList.replace("red", "skyblue"); // red를 skyblue로 교체 클래스 삭제하기 특정 클래스를 삭제하려면 'remove' 메서드를 사용합니..
-
[DOM]JavaScript를 사용하여 HTML 요소 삭제하기JavaScript 2023. 10. 26. 14:23
요소 자신 삭제 먼저 선택한 요소를 삭제하려면 해당 요소를 선택해야 합니다. 아래 코드는 class=one을 가진 요소를 선택합니다. let liOne = document.querySelector(".one"); 그 후 remove 메서드를 사용하여 선택한 요소를 삭제합니다. liOne.remove(); 부모의 자식 삭제 요소의 부모 태그를 선택한 다음, 삭제할 자식 요소를 선택합니다. 아래 코드는 태그를 선택하고 태그의 자식 중 class=removeTarget 를 가진 요소를 선택합니다. let ulTag = document.querySelector("ul"); // 부모 선택 let removeTarget = document.querySelector(".removeTarget"); // 삭제할 자식..
-
[DOM] JavaScript를 사용하여 HTML 요소 앞/뒤에 요소 추가하기JavaScript 2023. 10. 26. 14:06
요소 선택 먼저,JavaScript를 사용하여 HTML 요소를 선택해야 합니다. 아래 코드는 class=two를 가진 태그와 추가할 요소를 선택합니다. let liTag = document.querySelector(".two"); let movingTag = document.querySelector(".movingTag"); // 이동할 요소 요소 앞/뒤에 추가 선택한 요소의 앞 또는 뒤에 다른 요소를 추가하려면 brfore 및 after 메서드를 사용합니다. 아래 코드는 litag 요소 앞에 movigTag 요소를 추가하고 그 후 litag 뒤에도 movingTag 요소를 추가합니다. liTag.before(movingTag); // 선택한 요소 앞에 추가 liTag.after(movingTag); /..
-
[DOM]JavaScript로 HTML 형제 요소(태그)에 접근하기JavaScript 2023. 10. 26. 11:25
형제 요소(태그) 선택 먼저, JavaScript를 사용하여 HTML 형제 요소(태그)에 접근하려면 해당 요소를 선택해야 합니다. 아래 코드는 class="two"를 가진 태그를 선택합니다. let litag = document.querySelector(".two"); 앞에 있는 형제 요소(태그)에 접근 HTML 요소의 앞에 있는 형제 요소(태그)에 접근하려면 previousElementSibling 메서드를 사용합니다. 아래의 코드는 litag 요소의 앞에 있는 형제 요소의 내용을 가져옵니다. let siblingPre = litag.previousElementSibling.innerHTML; console.log("siblingPre", siblingPre); 뒤에 있는 형제 요소(태그)에 접근 HT..
-
[DOM]JavaScript를 사용하여 HTML 자식, 부모 요소 접근하기JavaScript 2023. 10. 26. 11:16
자식 요소 선택 먼저 JavaScript를 사용하여 HTML 자식 요소에 접근하기 위해 해당 요소를 선택해야 합니다. 아래 코드는 요소를 선택합니다. let ulTag = document.querySelector("ul"); 특정 자식 요소 접근 JavaScript의 children 속성을 사용하면 특정 자식 요소에 접근할 수 있습니다. 예를 들어 아래코드는 2번째와 3번째 요소의 텍스트를 가져옵니다. let two = ulTag.children[1].innerHTML; // 2번째 의 텍스트 let three = ulTag.children[2].innerHTML; // 3번째 의 텍스트 첫 번째와 마지막 자식요소 접근 또한 firstElementchild 와 lastElementchild를 let on..