이전 예에서와 같이 스크립트 자체는 상호 작용하려는 요소의 코드 아래에 있어야 합니다.

따라서 클래스 속성이 설정된 요소와 상호 작용할 수 있는 두 가지 방법이 있습니다. 가장 적합한 것을 선택하고 실제로 사용하십시오.

지난 강의에서는 배열( 그룹) 태그 이름으로 페이지 요소.

여기 계속 실무 javascript 및 getElementById 메소드를 사용하면 다음과 같이 간주됩니다. 요소에 대한 참조를 반환, 고유 ID를 기반으로 합니다.

getElementsByTagName 과 같은 getElementById 메소드는 문서 객체의 메소드입니다.

메서드의 이름은 문자 그대로 번역됩니다. id로 요소 가져오기.

모든 요소( 테구) 웹 문서에 고유한 id - 식별자를 할당할 수 있습니다. 요소가 고유해짐액세스하여 작업할 수 있습니다.

주의를 기울이다 e: Element( getElementsByTagName 메소드와 달리). 이는 편의를 위한 것으로 요소를 선택하는 데 메서드가 사용됨을 나타냅니다.

위의 코드 스니펫에 대한 설명...

• img 태그( 이미지 f) id가 있습니다 - 식별자 펭귄;
• getElementById 메서드를 사용하여 이 img 태그는 펭귄 식별자로 선택됩니다.
• 변수로 독특한 링크가 입력되었습니다선택한 태그로;
• 그런 다음 태그로 작업할 수 있습니다. 변수를 통한 객체와 마찬가지로임의의 변수를 통해 Date 객체로 작업하는 것처럼 고유합니다.

요소에 액세스한 후( 테구) getElementById 메서드를 사용하여 id로 웹 페이지를 만들 때 이미 Object와 같이 작업하고 있습니다. 즉, 태그 속성에 Object의 속성으로 액세스할 수 있습니다.

따라서 속성 값은 이미 속성 값입니다.

이전 예제를 계속 진행하겠습니다...

"수심에 찬 펭귄">

예제 코드에 대한 설명...

• img 태그( 이미지 f) 특정 속성이 있습니다. src - 파일 주소, 너비 및 높이 - 이미지 너비 및 높이, alt - 대체 텍스트
• getElementById 메소드를 객체로 사용하여 태그에 액세스하면 태그의 속성에 액세스할 수 있습니다. 속성을 반대하는 방법;
• 하지만 속성 값지금 속성 값;
• 자바스크립트에서 객체 속성은 점을 통해 액세스됩니다. 다음으로, 화면에 alert 메소드를 사용하여 img 태그의 대체 텍스트인 alt를 표시합니다.

이 모든 것에 혼동이 없으시길 바랍니다. 자바스크립트 프로그램 수준과 문서 마크업 수준에서 일어나는 일을 동시에 이해해야 합니다.

img 태그는 고유한 객체입니다.

태그의 너비 및 Alt 속성은 개체의 속성입니다.

속성 값 "128" 및 "수심에 찬 펭귄"속성 값입니다.

// 자바스크립트 관점에서 보면 다음과 같습니다.

var 고유 = (

너비: "128" ,

대체 : "수심에 찬 펭귄"

}

이것은 getElementById 메소드가 작동하는 방식으로 모든 요소에 대한 참조를 반환합니다( 꼬리표) 고유 id 가 있는 경우 웹 페이지 . 다음으로 자바스크립트 수준에서 이 요소를 사용합니다. 물건과 마찬가지로...

라는 점을 고려해야 한다.: 이전 레슨에서와 같이 여기 - getElementById 메소드로 작업할 때 스크립트 호출 라인은 html 문서의 끝에 위치해야 합니다.

jQuery는 웹 문서의 요소를 선택하기 위한 다른 옵션을 제공합니다.

초보 자바 스크립트 개발자가 매우 자주 직면하는 작업은 id 속성으로 웹 페이지의 요소를 선택하는 것입니다.

페이지에 코드가 있다고 가정해 보겠습니다.

id="elem"인 요소를 선택하고 일부 작업을 수행하려면 어떻게 해야 합니까?

여기에 문제를 해결하기 위한 몇 가지 옵션이 있습니다. 이제 살펴보겠습니다.

옵션 1: Javascript getElementById 메서드를 사용합니다.

타사 라이브러리를 사용하지 않고 "순수한" 자바스크립트 코드를 사용하여 해당 ID로 요소에 액세스하는 방법이 있습니다. 이 방법은 ggetElementById("element_id") 방법을 사용하는 것입니다. 따라서 id로 필요한 요소를 참조합니다.

간단한 예를 들어 이것이 어떻게 작동하는지 봅시다.

이러한 코드 줄(스크립트)은 요소 자체 아래에 있습니다. 이것은 이 스크립트가 작동하기 위한 전제 조건입니다. 자바스크립트 코드는 페이지가 로드될 때 실행됩니다. 위의 코드를 배치하면 아직 로드되지 않은 페이지의 요소, 즉 스크립트 실행 시 코드에 없습니다. 이를 피하는 방법이 있지만 이는 이 기사의 범위를 벗어납니다.

결과적으로 모든 것이 올바르게 작동하면 팝업 창이 나타납니다. 이 창은 div 블록 안에 있는 텍스트를 표시합니다.

이제 이 문제를 다른 방식으로 해결할 수 있는 방법을 살펴보겠습니다.

옵션 2. Jquery 라이브러리 사용.

id로 요소를 선택하는 두 번째 옵션은 Jquery 라이브러리를 사용하는 것입니다. 실제로 현대 스크립트에서 이 방법이 가장 자주 사용됩니다. 훨씬 더 편리하고 기억하기 쉽습니다.

id로 요소를 참조하려면 다음 구성을 사용해야 합니다.

$(#요소")

여기서 elem은 id 속성에 포함된 이름입니다.

왜냐하면 우리는 제 3자를 사용할 것입니다 자바스크립트 라이브러리, Jquery라고 하는 이 라이브러리를 먼저 연결해야 합니다.

섹션에 추가됩니다. , 이를 수행하는 한 가지 방법은 다음 코드 줄을 추가하는 것입니다.

라이브러리를 로드하려면 인터넷에 연결되어 있어야 합니다.

이전 예에서와 같이 스크립트 자체는 상호 작용하려는 요소의 코드 아래에 있어야 합니다.

따라서 id 속성으로 웹 페이지에서 요소를 선택하고 상호 작용하는 두 가지 방법을 분석했습니다. 자신에게 맞는 방법을 선택하여 실전에 활용하세요.

스크립트가 페이지의 일부 요소와 함께 작동하려면 이 요소를 먼저 찾아야 합니다. JavaScript에서 이를 수행하는 몇 가지 방법이 있습니다. 발견된 요소는 일반적으로 변수에 할당되고 나중에 이 변수를 통해 스크립트가 요소에 액세스하여 일부 작업을 수행합니다.

아이디로 검색

요소에 페이지 코드에서 id 속성이 주어지면 요소는 id로 찾을 수 있습니다. 이것이 가장 쉬운 방법입니다. 문서 전역 객체의 getElementById() 메서드를 사용하여 요소를 검색합니다.

문서.getElementById(ID)

옵션:

id - 발견되는 요소의 ID. id는 문자열이므로 따옴표로 묶어야 합니다.

페이지를 만들고 요소를 추가하고 id를 부여하고 스크립트에서 이 요소를 찾습니다.

HTML 코드:

자바스크립트:

블록 변수에 찾은 요소를 할당하고 콘솔에 변수를 표시했습니다. 브라우저 콘솔을 열면 요소가 포함되어야 합니다.

아이디로 검색하는 것이 가장 쉽고 편리한 방법이기 때문에 자주 사용됩니다. 스크립트의 일부 요소로 작업해야 하는 경우 이전에 설정되지 않은 경우에도 페이지 코드에서 이 요소에 대해 id 속성이 설정됩니다. 그리고 id로 요소를 찾습니다.

클래스로 검색

getElementsByClassName() 메서드를 사용하면 특정 클래스에 속한 모든 요소를 ​​찾을 수 있습니다.

document.getElementsByClassName(클래스)

옵션:

class - 찾을 요소의 클래스

메서드는 발견된 요소를 포함하는 의사 배열을 반환합니다. 많은 배열 방법이 작동하지 않기 때문에 의사 배열이라고 합니다. 그러나 주요 속성은 남아 있습니다. 배열의 모든 요소를 ​​참조할 수 있습니다. 하나의 요소만 발견된 경우에도 여전히 배열에 있습니다.

페이지에 요소를 추가하고 클래스를 지정해 보겠습니다. 일부 요소는 이전에 만든 블록 내부에 배치됩니다. 다른 부분은 블록 외부에 생성됩니다. 이것의 의미는 조금 후에 밝혀질 것입니다. 이제 페이지가 다음과 같이 표시됩니다.

HTML 코드:

자바스크립트:

이제 블록에 있는 요소만 찾습니다.

태그로 검색

getElementsByTagName() 메서드는 특정 태그가 있는 모든 요소를 ​​찾습니다. 또한 발견된 요소가 포함된 의사 배열을 반환합니다.

document.getElementsByTagName(태그)

옵션:

tag - 찾을 요소의 태그

페이지에 있는 모든 p 태그를 찾아보겠습니다.

이 방법은 문서 전체가 아니라 특정 요소에 적용할 수도 있습니다. 블록에서 모든 p 태그를 찾습니다.

선택기로 검색

주어진 선택자와 일치하는 요소를 찾는 querySelector() 및 querySelectorAll() 메서드가 있습니다. 즉, 스타일이 그러한 선택기에 지정되었다면 적용되었을 요소를 찾을 수 있습니다. 동시에 페이지 스타일에 이러한 선택기가 있을 필요는 전혀 없습니다. 이러한 방법은 CSS와 관련이 없습니다. querySelectorAll() 메소드는 선택자와 일치하는 모든 요소를 ​​찾습니다. 그리고 querySelector() 메서드는 페이지 코드의 첫 번째 요소인 하나의 요소를 찾습니다. 이러한 방법은 id 선택기, 태그 선택기 및 기타 여러 가지가 있기 때문에 앞에서 설명한 요소를 찾는 모든 방법을 대체할 수 있습니다.

document.querySelector(선택기)

document.querySelectorAll(선택기)

선택자는 CSS에서와 같은 방식으로 작성되며 따옴표를 넣는 것을 잊지 마십시오.

페이지에 목록을 추가하고 선택기로 찾아봅시다. 우리는 단 하나의 요소를 찾고 있으며 그것이 페이지의 유일한 요소이기 때문에 그것이 첫 번째 요소일 것이라는 것을 확실히 알고 있습니다. 따라서 이 경우 querySelector() 메서드를 사용하는 것이 더 편리합니다. 그러나 이 방법을 사용할 때는 나중에 동일한 요소가 페이지에 추가될 수 있다는 점을 고려해야 합니다. 그러나 이것은 대부분의 방법에 적용됩니다.

HTML 코드:

이러한 메서드는 전체 문서가 아니라 단일 요소 내에서 요소를 검색할 수도 있습니다.

예제에서는 태그별로 선택기만 사용했습니다. 다른 선택기를 사용하여 페이지 요소를 찾아보십시오.

인접 요소

발견된 요소에 대해 이웃을 찾을 수 있습니다. 각 요소는 객체이며 이 객체의 속성을 통해 주변 요소를 얻을 수 있습니다. previousElementSibling 속성은 이전 요소를 포함하고 nextElementSibling 속성은 다음 요소를 포함합니다.

element.previousElement형제

element.nextElement형제

블록 다음에 오는 요소를 찾습니다.

자식 요소

children 속성은 자식 배열을 포함합니다.

element.children

블록의 자식 요소를 찾습니다.

속성이 지정된 문자열과 일치합니다. 요소 ID는 지정된 경우 고유해야 하므로 특정 요소에 빠르게 액세스할 수 있는 유용한 방법입니다.

ID가 없는 요소에 액세스해야 하는 경우 당신은 할 수 있습니다 selector를 사용하여 요소를 찾으려면 querySelector()를 사용하십시오.

통사론

매개변수

반환 값

지정된 ID와 일치하는 DOM 요소 개체를 설명하는 Element 개체이거나 문서에서 일치하는 요소가 없으면 null입니다.

예시

HTML

여기에 일부 텍스트

자바스크립트

결과

사용 참고 사항

이 메소드의 이름에서 "Id"의 대문자 ~ 해야 하다코드가 올바르게 작동해야 합니다. getElementByID()는 ~ 아니다유효하고 작동하지 않을 수 있지만 자연스러워 보일 수 있습니다.

Document.querySelector() 및 Document.querySelectorAll() 과 같은 다른 요소 조회 메서드와 달리 getElementById()는 전역 문서 객체의 메서드로만 사용할 수 있으며 ~ 아니다 DOM의 모든 요소 개체에 대한 메서드로 사용할 수 있습니다. ID 값은 문서 전체에서 고유해야 하므로 필요함수의 "로컬" 버전.

예시

주어진 ID를 가진 요소가 없으면 이 함수는 null을 반환합니다. id 매개변수는 대소문자를 구분하므로 document.getElementById(" 중 ain")은 요소 대신 null을 반환합니다.