JavaScript에서 링크의 대상 속성 값을 얻는 방법은 무엇입니까?

王林
풀어 주다: 2023-09-03 09:33:02
앞으로
792명이 탐색했습니다.

JavaScript에서 링크의 대상 속성 값을 얻는 방법은 무엇입니까?

이 튜토리얼에서는 JavaScript에서 링크의 target 속성 값을 얻는 방법을 배웁니다.

target 속성은 링크된 문서나 페이지를 열 위치를 지정합니다.

기본적으로 해당 값은 "_self"로 설정되어 있으며, 이는 연결된 문서가 동일한 창이나 탭에서 열려야 함을 의미합니다. 또한 "_blank", "_self", "_parent", "_top" 및 "frame_name"과 같은 값을 가질 수 있으며, 각 값은 연결된 문서가 열리는 다른 위치를 정의합니다.

대상 속성 사용

JavaScript에서 링크의 대상 속성 값을 얻으려면 대상 속성을 사용하세요. target 속성은 링크된 문서가 열리는 위치, 즉 같은 창, 새 창, 같은 프레임 등을 설정하는 데 사용됩니다.

document.getElementById() 메소드를 사용하여 HTML 요소를 가져올 수 있습니다. 이 메소드는 요소의 ID를 매개변수로 사용하고 요소 객체를 반환합니다. 이 객체에서 "target" 속성을 사용하여 요소의 대상 속성 값을 얻을 수 있습니다.

문법

으아아아

위 구문에서 "mylink"는 링크의 ID(예: 앵커 태그)이며 "target" 속성과 함께 document.getElementById() 메서드를 사용하면 해당 링크에서 대상 속성 값을 가져올 수 있습니다.

예 1

다음 코드를 실행하여 링크의 대상 속성 값을 얻을 수 있습니다. -

으아아아

예 2

아래 예에서는 document.getElementById() 메서드와 target 속성을 사용하여 서로 다른 두 링크의 target 속성 값을 가져옵니다.

으아아아

getElementsByTagName() 메소드 사용

JavaScript에서는 document.getElementsByTagName() 메서드를 사용하여 링크 또는 앵커 태그의 대상 속성 값을 가져올 수 있습니다. 매개변수에 태그 이름을 허용하고 목록이나 배열과 유사한 HTMLCollection을 반환합니다. 여기에는 해당 태그 이름의 모든 요소 개체가 포함되어 있으며 각 개체에서 "target" 속성을 사용하여 대상 속성의 값을 가져올 수도 있습니다.

문법

으아아아

위 구문에서 document.getElementByTagName() 메서드는 'a'를 매개변수로 사용하므로 앵커 태그인 HTMLCollection의 모든 요소를 ​​반환하고 이를 반복하여 다음의 모든 요소에서 대상 속성 값을 가져옵니다. 링크와 콘솔로 녹음하세요.

예 3

아래 예에서는 document.getElementByTagName() 메서드를 사용하여 링크에서 대상 속성의 값을 가져옵니다.

으아아아

querySelectorAll() 메소드 사용

JavaScript에서는 document.querySelectorAll() 메서드를 사용하여 링크 또는 앵커 태그의 대상 속성 값을 가져올 수 있습니다.

문법

대상 속성이 있는 모든 앵커 태그를 가져오는 구문은 다음과 같습니다. -

으아아아

위 구문에서 document.querySelectorAll() 메서드는 "a[target]"을 매개 변수로 사용합니다. 따라서 대상 속성이 포함된 NodeList의 앵커 태그인 모든 요소를 ​​반환하고 이를 반복하면 모든 대상 속성 값을 얻을 수 있습니다.

아래 예에서는 document.querySelectorAll() 메서드를 사용하여 링크의 대상 속성 값을 가져옵니다.

으으으으

위 내용은 JavaScript에서 링크의 대상 속성 값을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!