자바스크립트 세트 문서

JavaScript는 웹 페이지에 코드를 직접 삽입하여 웹 페이지의 모양과 동작을 변경할 수 있는 강력한 프로그래밍 언어입니다. JavaScript에서 문서 개체는 전체 웹 페이지를 나타내며 이를 사용하여 웹 페이지의 콘텐츠와 구조를 동적으로 수정할 수 있습니다.

이 기사에서는 JavaScript에서 문서 개체의 몇 가지 기본 설정과 사용법에 대해 설명합니다.

1. 요소 가져오기
웹페이지의 요소를 수정하려면 먼저 요소에 대한 참조를 가져와야 합니다. JavaScript에서는 다음 메소드를 통해 요소를 가져올 수 있습니다.

1. Getting by id
   요소에 고유한 id 속성이 있는 경우 document.getElementById() 메소드를 통해 요소에 대한 참조를 가져올 수 있습니다. 이 메소드는 요소의 id 값인 문자열 매개변수를 승인하고 요소를 나타내는 객체를 반환합니다. 예:

var elem = document.getElementById("my-element");

2. 태그 이름으로 가져오기
   document.getElementsByTagName() 메서드를 사용하면 지정된 태그 이름을 가진 모든 요소를 ​​가져올 수 있습니다. 이 메소드는 레이블 이름인 문자열 매개변수를 승인하고 노드 목록 객체를 반환합니다. 예:

var elems = document.getElementsByTagName("p");

3. 클래스 이름으로 가져오기
   document.getElementsByClassName() 메서드를 사용하면 지정된 클래스 이름을 가진 모든 요소를 ​​가져올 수 있습니다. 이 메소드는 클래스 이름인 문자열 매개변수를 승인하고 노드 목록 객체를 반환합니다. 예:

var elems = document.getElementsByClassName("my-class");

4. Selector로 가져오기
   document.querySelector() 및 document.querySelectorAll() 메서드를 사용하여 지정된 선택기와 일치하는 요소를 가져올 수 있습니다. 이러한 메소드는 문자열 매개변수인 CSS 선택기를 승인하고 노드 객체 또는 노드 목록 객체를 반환합니다. 예:

var elem = document.querySelector(".my-class");
var elems = document.querySelectorAll("p");

2. 요소 속성 및 콘텐츠 수정
요소 참조를 얻은 후 JavaScript를 사용하여 요소의 속성 및 콘텐츠를 수정할 수 있습니다. 다음은 몇 가지 일반적인 작업입니다.

1. 요소의 텍스트 콘텐츠 수정
   innerHTML 속성을 사용하여 요소의 텍스트 콘텐츠를 수정할 수 있습니다. 예:

elem.innerHTML = "Hello, world!";

2. 요소 스타일 수정
   스타일 속성을 사용하여 요소 스타일을 수정할 수 있습니다. 예:

elem.style.color = "red";
elem.style.backgroundColor = "blue";

3. 요소의 클래스 수정
   className 속성을 사용하여 요소의 클래스를 수정할 수 있습니다. 예:

elem.className = "my-class";

4. 요소의 속성 수정
   setAttribute() 메서드와 RemoveAttribute() 메서드를 사용하여 요소의 속성을 수정하고 요소의 속성을 삭제할 수 있습니다. 예:

elem.setAttribute("href", "http://www.example.com");
elem.removeAttribute("target");

3. 요소 추가 및 삭제
JavaScript는 요소를 동적으로 추가하고 삭제할 수도 있습니다. 다음은 몇 가지 예입니다.

1. 요소 추가
   createElement() 메서드를 사용하여 새 요소를 만들고appendChild()를 사용할 수 있습니다. 메서드나 insertBefore() 메서드를 사용하여 문서에 추가합니다. 예:

var newElem = document.createElement("p");
newElem.innerHTML = "This is a new paragraph.";
document.body.appendChild(newElem);

2. Remove elements
   removeChild() 메서드를 사용하여 문서에서 요소를 제거할 수 있습니다. 예:

document.body.removeChild(elem);

4. 이벤트 핸들러
JavaScript의 이벤트 핸들러는 사용자 작업이나 브라우저 이벤트에 응답하는 데 사용됩니다. 다음은 몇 가지 예입니다.

1. 요소에 이벤트 리스너 추가
   addEventListener() 메서드를 사용하여 요소에 이벤트 리스너를 추가할 수 있습니다. 이 메서드는 이벤트 유형, 이벤트 처리 기능, 캡처 단계 중 이벤트 트리거 여부(선택 사항) 등 세 가지 매개 변수를 허용합니다. 예:

elem.addEventListener("click", function() {
  alert("Clicked!");
});

2. 요소의 이벤트 리스너 제거
   removeEventListener() 메서드를 사용하여 요소의 이벤트 리스너를 제거할 수 있습니다. 이 메소드는 이벤트 유형 및 이벤트 처리 함수라는 두 가지 매개변수를 허용하며, 이는 이벤트 리스너를 추가할 때 사용된 함수와 동일해야 합니다. 예:

elem.removeEventListener("click", listener);

5. 요약
JavaScript의 문서 개체는 사용자가 웹 페이지와 상호 작용할 수 있도록 웹 페이지의 콘텐츠와 구조를 동적으로 수정하는 데 도움이 될 수 있습니다. 이 문서에서는 요소 가져오기, 요소 속성 및 콘텐츠 수정, 요소 추가 및 제거, 이벤트 핸들러 등을 포함한 몇 가지 일반적인 사용 방법을 소개합니다. 이 콘텐츠가 JavaScript를 사용하여 웹 페이지에 우수한 결과를 표시하는 데 도움이 되기를 바랍니다.

위 내용은 자바스크립트 세트 문서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!