자바스크립트 선택 수정

JavaScript는 웹 개발에 널리 사용되는 프로그래밍 언어로 DOM 요소를 선택하고 수정하여 웹 페이지에 동적 효과를 얻을 수 있습니다. 이 문서에서는 JavaScript의 선택과 수정을 다룹니다.

Selection

JavaScript는 다음과 같은 방법으로 DOM 요소를 선택할 수 있습니다.

1. 태그 이름 선택기

태그 이름 선택기를 사용하여 웹 페이지에서 해당 태그 이름을 가진 모든 요소를 ​​선택합니다. 예를 들어 모든 p 요소를 선택합니다.

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

2. ID 선택기

ID 선택기를 사용하여 특정 ID를 가진 요소를 선택합니다. 예를 들어 ID가 "myDiv"인 요소를 선택합니다.

var myDiv = document.getElementById("myDiv");

3. 클래스 선택기

특정 클래스 이름을 가진 요소를 선택하려면 클래스 선택기를 사용하세요. 예를 들어 "myClass" 클래스가 있는 요소를 선택하세요.

var myElements = document.getElementsByClassName("myClass");

4. 속성 선택기

특정 속성을 가진 요소를 선택하려면 속성 선택기를 사용하세요. 예를 들어, "data-type" 속성이 있는 모든 요소를 ​​선택하려면:

var elementsWithType = document.querySelectorAll("[data-type]");

Modify

select element 메소드를 사용하면 JavaScript가 선택한 요소를 수정할 수도 있습니다.

1. 요소의 텍스트 내용 수정

요소의 innerHTML 속성을 수정하여 요소의 텍스트 내용을 변경할 수 있습니다. 예를 들어, ID가 "myDiv"인 요소의 텍스트 콘텐츠를 "Hello World!"로 변경합니다.

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello World!";

2. 요소 스타일 수정

요소의 스타일을 수정하여 요소의 CSS 스타일을 변경할 수 있습니다. 기인하다. 예를 들어 ID가 "myDiv"인 요소의 배경색을 빨간색으로 변경합니다.

var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";

3. 요소의 클래스 수정

요소의 className 속성을 수정하여 요소의 클래스를 변경할 수 있습니다. 예를 들어 ID가 "myDiv"인 요소의 클래스를 "newClass"로 변경합니다.

var myDiv = document.getElementById("myDiv");
myDiv.className = "newClass";

4 요소의 속성 수정

요소의 속성을 수정하여 요소의 다른 속성을 변경할 수 있습니다. 예를 들어, ID가 "myDiv"인 요소의 alt 속성을 "newAlt"로 변경합니다.

var myDiv = document.getElementById("myDiv");
myDiv.alt = "newAlt";

Conclusion

JavaScript는 DOM 요소를 선택하고 수정하여 웹 페이지에 동적 효과를 얻을 수 있습니다. 이 기사에서는 태그 이름 선택기, ID 선택기, 클래스 선택기, 속성 선택기, 텍스트 콘텐츠, 스타일, 클래스 및 요소 속성 수정을 포함하여 JavaScript의 선택 및 수정을 소개합니다. 이러한 기술을 익히면 개발자는 웹 사이트 개발에서 JavaScript를 보다 유연하게 사용할 수 있습니다.

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