JavaScript에서 getAttribute 사용 소개

개발 과정에서 JavaScript의 getAttribute() 메소드는 함수이고 getAttribute()에는 단 하나의 매개변수만 있다는 것을 모두가 알고 있다고 생각합니다. 오늘은 속성의 이름을 쿼리하고 싶을 것입니다. JavaScript에서 getAttribute의 사용법을 소개하겠습니다!

getAttribute() 메소드

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

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

위 코드를 앞서 제공된 "쇼핑 목록"에 삽입하면 ” 샘플 문서의 끝을 확인하고 웹 브라우저에서 페이지를 다시 로드하면 "a Gentle Reminder"라는 텍스트 메시지를 보여주는 변경 대화 상자가 화면에 나타납니다.
"쇼핑 목록" 문서에는 제목 속성이 있는 e388a4556c0f65e1904146cc1a846bee 요소가 하나만 있습니다. 이 문서에 제목 속성이 없는 하나 이상의 e388a4556c0f65e1904146cc1a846bee 요소가 있는 경우 해당 getAttribute("title") 호출은 null을 반환합니다. null은 JavaScript 언어의 null 값으로, "당신이 말하는 것은 존재하지 않습니다."를 의미합니다. 이를 직접 확인하려면 먼저 쇼핑 목록 문서의 기존 텍스트 단락 뒤에 다음 텍스트를 삽입하세요.

<p>This is just test</p>

그런 다음 페이지를 다시 로드하세요. 이번에는 두 개의 변경 대화 상자가 표시되며 두 번째 대화 상자는 웹 브라우저가 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)
}
}

이제 이 페이지를 다시 로드하면 그림과 같이 "a 온화한 알림" 메시지가 있는 변경 대화 상자만 표시됩니다. 아래에.
이 코드를 더 짧게 만들 수도 있습니다. 데이터 항목이 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(attribute , value)
아래 예에서 첫 번째 문은 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"));

上面这些语句将在屏幕上弹出两个alert对话框：第一个alter对话框出现在setAttribute()方法被调用之前，它将是一片空白或显示着单词“null”；第二个出现在title属性值被设置之后，它将显示着“a list of goods”消息。
在上例中，我们设置了一个现有节点的title属性，但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作：先把这个属性创建出来，然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。
在“购物清单”示例文档里，e388a4556c0f65e1904146cc1a846bee元素已经有了一个title属性，这个属性的值是a gentle reminder。我们可以用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"))
}
}

上面这段代码将先从文档里把已经带有title属性的e388a4556c0f65e1904146cc1a846bee元素全部检索出来，然后把它们的title属性值全部修改为brand new title text。具体到“购物清单”文档，属性值a gentle reminder将被覆盖。
这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

总结：

相信小伙伴们通过本文的认真学习以后，对JavaScript中getAttribute的使用有了进一步的了解和认识，希望通过本文介绍对你的工作有所帮助！

相关推荐：

javascript setAttribute, getAttribute 在不同浏览器上的不同表现

js中 aaa.style 和 aaa.getAttribute('style') 等价吗，有无区别？

有趣的script标签用getAttribute方法来自脚本吧

위 내용은 JavaScript에서 getAttribute 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!