getAtattribute () 메소드
지금까지 특정 요소 노드를 검색하는 두 가지 방법을 도입했습니다. 하나는 getElementByid () 메소드를 사용하고 다른 하나는 getElementsByTagName () 메소드를 사용하는 것입니다. 해당 요소를 찾은 후 GetAttribute () 메소드를 사용하여 다양한 속성의 값을 쿼리 할 수 있습니다.
getAttribute () 메소드는 함수입니다. 쿼리하려는 속성의 이름 인 매개 변수가 하나뿐입니다.
Object.getAttribute (속성)
그러나 GetAttribute () 메소드는 문서 개체를 통해 호출 할 수 없으며, 이전에 소개 한 다른 방법과 다릅니다. 하나의 요소 노드 객체를 통해서만 호출 할 수 있습니다.
예를 들어, getElementsByTagName () 메소드와 결합하여 아래와 같이 각 <p> 요소의 제목 속성을 쿼리 할 수 있습니다.
var text = document.getElementsByTagName ( "p") for (var i = 0; i <text.length; i ++) {alert (text [i] .getAttribute ( "title"));}이전에 주어진 "쇼핑 목록"샘플 문서 끝에 위의 코드를 삽입하고 웹 브라우저에 페이지를 다시로드하면 문자 메시지 "A Gentle Reminder"가있는 Alter 대화 상자가 화면에 나타납니다.
쇼핑 목록 문서에는 제목 속성이있는 <p> 요소가 하나뿐입니다. 문서에 제목 속성이없는 하나 이상의 <p> 요소가있는 경우 해당 GetAttribute ( "Title") 호출은 NULL을 반환합니다. NULL은 JavaScript 언어의 NULL 가치이며 그 의미는 "당신이 말한 것은 존재하지 않습니다"입니다. 이를 개인적으로 확인하려면 쇼핑 목록 문서의 기존 텍스트 단락에 다음 텍스트를 삽입하십시오.
<p> 이것은 단지 테스트입니다 </p>
그런 다음 페이지를 다시로드하십시오. 이번에는 두 개의 Alter 대화 상자가 표시되며 두 번째 대화 상자는 비워 지거나 "NULL"이라는 단어 만 표시됩니다. 특정 상황은 웹 브라우저가 NULL 값을 표시하는 방법에 따라 다릅니다.
제목 속성이 존재하는 경우에만 메시지가 나타나도록 스크립트를 수정할 수 있습니다. 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)}}이제이 페이지를 다시로드하면 아래에 표시된 것처럼 "부드러운 알림"메시지를 보여주는 Alter 대화 상자 만 표시됩니다.
이 코드를 더 짧은 코드로 줄일 수도 있습니다. 특정 데이터가 널 값인지 확인할 때 실제로 존재하는지 확인합니다. 이러한 종류의 점검은 확인 된 데이터를 IF 문의 조건으로 직접 사용하도록 단순화 할 수 있습니다. if (something)가 if (something! = null)와 완전히 동일하지만 전자는 분명히 더 간결합니다. 현재 무언가가 존재하면 IF 진술의 조건이 사실 일 것입니다. 무언가가 존재하지 않으면 if 문의 조건은 거짓입니다.
이 예에서 if (tittit_text! = null)을 if (tittit_text)로 바꾸면 더 간결한 코드를 얻을 수 있습니다. 또한, 코드의 가독성을 더욱 높이기 위해, 우리는이 기회를 통해 Alter 진술을 작성하고 같은 줄에 진술을 작성하여 일상 생활에서 영어 문장에 더 가깝게 만들 수 있습니다.
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 () 메소드는 두 매개 변수를 전달해야합니다.
obect.setattribute (속성, 값)
다음 예에서 첫 번째 문은 ID 속성 값이 구매하는 요소를 검색하고 두 번째 문은이 요소의 제목 속성 값을 상품 목록으로 설정합니다.
var Shopping = Document.getElementById ( "구매") Shopping.SetAttribute ( "제목", "상품 목록")
getAttribute () 메소드를 사용 하여이 요소의 제목 속성 값이 실제로 변경되었음을 증명할 수 있습니다.
var shopping = document.getElementById ( "구매"); Alert (shopping.getAttribute ( "title")); shopping.setAttribute ( "title", "상품 목록"); Alert (shopping.getAttribute ( "title"));
위의 진술은 화면에서 두 개의 경고 대화 상자를 나타냅니다. stattribute () 메소드가 호출되기 전에 첫 번째 ALTER 대화 상자가 나타나거나 "null"이라는 단어가 표시되기 전에 나타납니다. 두 번째는 제목 속성 값이 설정된 후 나타납니다. "상품 목록"메시지가 표시됩니다.
위의 예에서는 기존 노드의 제목 속성을 설정하지만이 속성은 처음에는 존재하지 않았습니다. 즉, statattribute () 호출은 실제로 두 가지 작업을 완료합니다. 먼저이 속성을 작성한 다음 값을 설정합니다. 요소 노드의 기존 속성에서 setAttribute () 메소드를 사용하면이 속성의 현재 값이 덮어 씁니다.
"쇼핑 목록"샘플 문서에서 <p> 요소에는 이미 제목 속성이 있으며이 속성의 값은 부드러운 알림입니다. stattribute () 메소드를 사용하여 현재 값을 변경할 수 있습니다.
<script type = "text/javaScript"> var ts = document.getElementsByTagName ( "li"); for (var i = 0; i <ts.length; i ++) {var text = ts [i] .getAttribute ( "title"); Alert (title "); alert (title] .getAttribute ("title ")) if (text) {ts [i] .setAttribute ("title ","i sonce! ") alert (ts [i] .getAttribute ("title "))}}}위의 코드는 먼저 문서의 제목 속성이있는 모든 <p> 요소를 검색 한 다음 모든 제목 속성 값을 새로운 제목 텍스트로 수정합니다. 특히 "쇼핑 목록"문서의 경우 부동산 값을 부드럽게 알리는 부동산 값을 덮어 쓸 것입니다.
다음은 매우 주목할만한 세부 사항입니다. statattribute () 메소드를 통한 문서에 대한 수정은 문서가 브라우저 창에 효과 및/또는 동작이 그에 따라 변경 될 수있게하지만 브라우저의 뷰 소스 옵션을 통해 문서의 소스 코드를 볼 때 원래 속성 값을 보게 될 것입니다. 이 "내부 및 외부"의이 현상은 DOM의 작동 모드에서 비롯됩니다. 먼저 문서의 정적 내용을로드 한 다음 동적으로 새로 고치십시오. 동적 새로 고침은 문서의 정적 내용에 영향을 미치지 않습니다. 이것은 정확히 DOM의 진정한 힘과 유혹입니다. 새로 고침 페이지 컨텐츠는 최종 사용자가 브라우저에서 페이지 새로 고침 작업을 수행 할 필요가 없습니다.