HTML DOM getAttributeNode()는 주어진 요소 속성 노드를 Attr 객체로 반환하는 데 사용됩니다. 다양한 Attr 개체 속성과 메서드를 사용하여 속성을 조작할 수 있습니다.
구문
다음은 getAttributeNode() 메서드의 구문입니다. -
element.getAttributeNode(attributename)
여기에서 attributename은 반환하려는 속성 이름을 지정하는 문자열 유형의 필수 매개변수입니다.
예시
getAttributeNode() 메서드의 예를 살펴보겠습니다. -
<!DOCTYPE html>
<html>
<head>
<script>
function getAttrNode(){
var a = document.getElementsByTagName("a")[0].getAttributeNode("href");
var val=a.value;
document.getElementById("Sample").innerHTML = val;
}
</script>
</head>
<body>
<h1>getAttributeNode() example</h1>
<a href="https://www.google.com">GOOGLE</a>
<p>Get the href attribute value of the above link by clicking the below button</p>
<button onclick="getAttrNode()">GET</button>
<p id="Sample"></p>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
GET 버튼 클릭 시 -
위의 예에서 -
먼저 href 속성 값이 "https://www.google.com"으로 설정된 앵커 요소를 만들었습니다.
<a href="https://www.google.com">GOOGLE</a>
그런 다음 사용자가 클릭할 때 getAttrNode()를 실행할 버튼 GET을 만들었습니다.
<button onclick="getAttrNode()">GET</button>
getAttrNode() 메서드는 getElementByTagName() 메서드를 사용하여 HTML 문서에서 첫 번째 앵커 요소를 가져옵니다. 그런 다음 매개변수 값이 "href"인 getAttributeNode("href") 메서드를 사용합니다.
getAttributeNode() 메서드는 href 속성을 나타내는 attr 객체를 반환하고 이를 변수 a에 할당합니다. 그런 다음 attr 객체 "value" 속성을 사용하여 href 속성 값을 변수 val에 할당합니다. 얻은 href 속성 값은 innerHTML 속성을 사용하여 id가 "Sample"인 단락에 표시됩니다 -
function getAttrNode(){
var a = document.getElementsByTagName("a")[0].getAttributeNode("href");
var val=a.value;
document.getElementById("Sample").innerHTML = val;
}