JavaScript 기본 튜토리얼

JavaScript 객체

JavaScript 함수

JS HTML DOM

JS 브라우저 BOM

AJAX 기본 튜토리얼

JavaScript 참조 매뉴얼

JS DOM HTML 내용 변경 JS HTML DOM 메서드

JS HTML DOM 선택자

JavaScript는 주로 HTML 요소의 내용이나 값을 가져오거나 수정하거나 특정 효과를 적용하는 데 사용됩니다.

이를 위해 먼저 요소를 찾아야 합니다. 이를 위해 여러 가지 방법이 있습니다:

ID를 통해 HTML 요소를 찾습니다
태그 이름을 통해 HTML 요소를 찾습니다
클래스 이름을 통해 HTML 요소를 찾습니다
CSS 선택자를 통해 HTML 요소를 찾습니다
HTML 요소를 HTML 객체 집합을 통해 찾습니다

ID를 통해 HTML 요소를 찾습니다

사용할 수 있습니다getElementById()메서드는 요소의 유일한 ID를 통해 요소를 선택합니다.

이는 DOM 트리에서 HTML 요소를 찾는 가장 간단한 방법입니다.

다음 예제는 ID 속성을 가진 하나의 요소를 선택합니다.id="msg"요소:

예제

var x = document.getElementById("msg");

테스트를 해보세요‹/›

요소를 찾으면 이 메서드는 해당 요소를 객체로 반환합니다.

요소를 찾지 못하면 myElement이 null을 포함합니다.

태그 이름을 통해 HTML 요소를 찾습니다

또한 사용할 수 있습니다getElementsByTagName()메서드는 태그 이름을 통해 HTML 요소를 선택합니다.

지정된 태그 이름을 가진 문서 내 모든 요소와 유사한 배열 목록을 반환합니다.

이 예제에서 선택한<p>요소:

예제

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

테스트를 해보세요‹/›

문서 내 모든 단락 요소의 배경색 변경:

예제

var x = document.getElementsByTagName("p");
for(let i = 0; i < x.length; i++) {
　　　x[i].style.backgroundColor = "coral";
}

테스트를 해보세요‹/›

이 예제에서 선택한id="wrapper"요소를 선택한 후“wrapper”내부의 모든<p>요소:

예제

var x = document.getElementById("wrapper");
var y = x.getElementsByTagName("p");

테스트를 해보세요‹/›

클래스 이름을 통해 HTML 요소를 찾습니다

이를 사용하여getElementsByClassName()지정된 클래스 이름을 가진 모든 요소를 선택하는 메서드를 통해 선택할 수 있습니다.

이 메서드는 지정된 클래스 이름을 가진 문서 내 모든 요소의 유사 배열 목록을 반환합니다.

이 예제는 모든 다음과 같은 요소를 반환합니다class="demo"의요소 목록:

예제

var x = document.getElementsByClassName("demo");

테스트를 해보세요‹/›

CSS 선택자를 통해 HTML 요소를 찾습니다

이를 사용하여querySelectorAll()지정된 CSS 선택자와 일치하는 요소를 선택하는 메서드를 통해 선택할 수 있습니다

이 메서드는 지정된 선택자와 일치하는 모든 요소의 유사 배열 목록을 반환합니다.

CSS 선택자는 문서 내 HTML 요소를 선택하는 매우 강력하고 효과적인 방법을 제공합니다.

예제

var x = document.querySelectorAll("div");

테스트를 해보세요‹/›

이 예제는 다음과 같은 요소를 반환합니다“note”의 문서에 모든<div>요소 목록:

예제

var x = document.querySelectorAll("div.note");

테스트를 해보세요‹/›

HTML 요소를 HTML 객체 집합을 통해 찾습니다

HTML 문서에서 가장 상위의 요소는 문서 속성으로 직접 사용될 수 있습니다.

예를 들어, 속성을 사용하여 접근할 수 있습니다<html>요소document.documentElement.

되는소자는 접근할 수 있는document.body속성.

예제

var html = document.documentElement;
var body = document.body;

테스트를 해보세요‹/›

주의:만약document.body에서표지기 전에 사용합니다 (예,<head> 내부에서 사용합니다），null 대신 body 요소를 반환합니다.

다음과 같은 HTML 객체(집합)도 접근할 수 있습니다:

속성	설명
document.anchors	이름 속성을 가진 모든 요소를 반환합니다<a>요소
document.applets	모든 것 반환<applet>요소(HTML에서5중지됨)
document.baseURI	문서의 절대 기본 URI를 반환합니다
document.body	반환요소
document.cookie	문서의 쿠키를 반환합니다
document.doctype	문서의 문서 타입을 반환합니다
document.documentElement	반환<html>요소
document.documentMode	브라우저가 사용하는 모드를 반환합니다
document.documentURI	문서의 URI를 반환합니다
document.domain	문서 서버 도메인 반환
document.domConfig	사용되지 않음;DOM 설정 반환
document.embeds	모든 것 반환<embed>요소
document.forms	모든 것 반환<form>요소
document.head	반환<head>요소
document.images	모든 것 반환<img>요소
document.implementation	DOM 구현 반환
document.inputEncoding	문서 인코딩(문자 집합) 반환
document.lastModified	문서 최신 수정 날짜와 시간 반환
document.links	href 속성을 가진 모든 것 반환<area>및<a>요소
document.readyState	문서(로드 중) 상태 반환
document.referrer	참조자 URI(링크 문서) 반환
document.scripts	모든 것 반환<script>요소
document.strictErrorChecking	강제로 오류 검사 수행 여부 반환
document.title	반환<title>요소
document.URL	전체 URL 반환

JS DOM HTML 내용 변경 JS HTML DOM 메서드