js_javascript 스킬의 getAttribute 메소드 사용 예

getAttribute() 메서드

지금까지 특정 요소 노드를 검색하는 두 가지 방법을 소개했습니다. 하나는 getElementById() 메서드를 사용하는 것이고, 다른 하나는 getElementsByTagName() 메서드를 사용하는 것입니다. 해당 요소를 찾은 후 getAttribute() 메서드를 사용하여 다양한 속성 값을 쿼리할 수 있습니다.
getAttribute() 메소드는 함수입니다. 여기에는 쿼리하려는 속성의 이름인 매개변수가 하나만 있습니다.
object.getAttribute(속성)
그러나 getAttribute() 메소드는 이전에 소개한 다른 메소드와 달리 문서 객체를 통해 호출할 수 없습니다. 요소 노드 객체를 통해서만 호출할 수 있습니다.
예를 들어, 다음과 같이 getElementsByTagName() 메소드와 결합하여 각

요소의 제목 속성을 쿼리할 수 있습니다.

var text=document.getElementsByTagName("p")
for (var i=0;i<text.length;i++)
{
alert(text[i].getAttribute("title"));
}

앞서 제공한 "쇼핑 목록" 예제 문서 끝에 위 코드를 삽입하고 웹 브라우저에서 페이지를 다시 로드하면 화면에 "a Gentle Reminder"라는 텍스트 메시지가 나타납니다. .

"쇼핑 목록" 문서에는 제목 속성이 있는

요소가 하나만 있습니다. 이 문서에 제목 속성이 없는 하나 이상의

요소가 있는 경우 해당 getAttribute("title") 호출은 null을 반환합니다. null은 JavaScript 언어의 null 값으로, "당신이 말하는 것은 존재하지 않습니다."를 의미합니다. 이를 직접 확인하려면 먼저 쇼핑 목록 문서의 기존 텍스트 단락 뒤에 다음 텍스트를 삽입하세요.

이것은 단지 테스트입니다

그런 다음 페이지를 다시 로드하세요. 이번에는 두 개의 변경 대화 상자가 표시되며 두 번째 대화 상자는 웹 브라우저가 null 값을 표시하는 방법에 따라 비어 있거나 "null"이라는 단어만 표시됩니다.
title 속성이 존재할 때만 메시지가 표시되도록 스크립트를 수정할 수 있습니다. getAttribute() 메서드의 반환 값이 null인지 확인하기 위해 if 문을 추가하겠습니다. 이 기회를 활용하여 스크립트의 가독성을 높이기 위해 몇 가지 변수도 추가했습니다.

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text!=null)
{
alert(text)
}
}

이제 이 페이지를 다시 로드하면 아래와 같이 "알림" 메시지가 포함된 변경 대화 상자만 표시됩니다.

이 코드를 더 짧게 만들 수도 있습니다. 데이터 항목이 null인지 여부를 확인할 때 실제로 존재하는지 확인하는 것입니다. if 문의 조건으로 확인 중인 데이터를 직접 사용하면 이 확인을 단순화할 수 있습니다. if(something)는 if(something != null)와 완전히 동일하지만 전자가 확실히 더 간결합니다. 이때, 어떤 것이 존재하면 if 문의 조건은 true가 되고, 어떤 것이 존재하지 않으면 if 문의 조건은 false가 됩니다.
이 예에서는 if (title_text != null)을 if (title_text)로 바꾸면 더 간결한 코드를 얻을 수 있습니다. 또한 코드의 가독성을 더욱 높이기 위해 이번 기회에 alter 문과 if 문을 같은 줄에 작성할 수도 있는데, 이는 일상 생활에서 사용되는 영어 문장에 더 가까워질 수 있습니다.

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text) alert(text)
}

3.4.2 setAttribute() 메소드

이전에 소개한 모든 방법은 정보를 검색하는 데에만 사용할 수 있습니다. setAttribute() 메소드에는 이들 메소드와 한 가지 중요한 차이점이 있습니다. 즉, 속성 노드의 값을 수정할 수 있다는 것입니다.
getAttribute() 메소드와 유사하게 setAttribute() 메소드도 요소 노드 객체를 통해서만 호출할 수 있는 함수이지만 setAttribute() 메소드를 사용하려면 두 개의 매개변수를 전달해야 합니다.
obiect.setAttribute(속성,값)
다음 예에서 첫 번째 문은 id 속성 값이 buy인 요소를 검색하고, 두 번째 문은 이 요소의 title 속성 값을 상품 목록으로 설정합니다.

var shopping=document.getElementById("purchases")
shopping.setAttribute("title","a list of goods")

getAttribute() 메소드를 사용하여 이 요소의 title 속성 값이 실제로 변경되었음을 증명할 수 있습니다.

var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));

위 명령문은 화면에 두 개의 경고 대화 상자를 표시합니다. 첫 번째 변경 대화 상자는 setAttribute() 메서드가 호출되기 전에 나타나며, 비어 있거나 "null"이라는 단어가 표시됩니다. title 속성 값이 설정되면 "상품 목록" 메시지가 표시됩니다.

위의 예에서는 기존 노드의 제목 속성을 설정했지만 이 속성은 원래 존재하지 않았습니다. 이는 우리가 발행한 setAttribute() 호출이 실제로 두 가지 작업을 완료했음을 의미합니다. 먼저 속성을 생성한 다음 해당 값을 설정합니다. 요소 노드의 기존 속성에 대해 setAttribute() 메서드를 사용하면 이 속성의 현재 값을 덮어쓰게 됩니다.
"쇼핑 목록" 예제 문서에서

요소에는 이미 알림 값을 갖는 제목 속성이 있습니다. setAttribute() 메소드를 사용하여 현재 값을 변경할 수 있습니다:

<script type="text/javascript">
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{
var text=ts[i].getAttribute("title");
alert(ts[i].getAttribute("title"))
if(text)
{
ts[i].setAttribute("title","我会成功！")
alert(ts[i].getAttribute("title"))
}
}

위 코드는 먼저 문서에서 제목 속성이 있는 모든

요소를 검색한 다음 모든 제목 속성 값을 새로운 제목 텍스트로 수정합니다. "쇼핑 목록" 문서의 경우 단순 알림 속성 값이 재정의됩니다.
여기에 주목할 만한 세부 사항이 있습니다. setAttribute() 메서드를 통해 문서를 수정하면 브라우저 창에서 문서의 표시 효과 및/또는 동작이 그에 따라 변경됩니다. 그러나 브라우저 보기를 사용할 때는 source 옵션을 사용하여 문서의 소스 코드를 수정하더라도 원래 속성 값은 계속 표시됩니다. 즉, setAttribute() 메서드로 변경한 내용은 문서 자체의 소스 코드에 반영되지 않습니다. 이러한 "외관과 내부의 불일치" 현상은 DOM의 작업 모드에서 발생합니다. 먼저 문서의 정적 콘텐츠를 로드한 다음 동적으로 새로 고치면 문서의 정적 콘텐츠에 영향을 주지 않습니다. 이것이 DOM의 진정한 힘이자 매력입니다. 페이지 콘텐츠를 새로 고칠 때 최종 사용자가 브라우저에서 페이지 새로 고침 작업을 수행할 필요가 없습니다.