DOM 객체(태그)의 사용자 정의 속성을 읽는 JS에 대한 간략한 토론
- 高洛峰원래의
- 2016-12-06 13:06:021615검색
DOM 객체는 js의 매우 기본적인 요소입니다. 일반적으로 js를 작성할 때 우리는 반드시 DOM 객체를 사용하게 됩니다. 다음과 같은 사용자 정의 속성을 쉽게 추가할 수 있습니다.
<div id="test" class="hello"></div>
var test = document.getElementById("test");
test.adang = "adang";
alert(test.adang);
ID가 test인 DOM 요소에 속성이 부여되었음을 알 수 있습니다. adang이라는 속성이 추가되었으며, 이 속성을 js에서 호출할 수 있습니다. 저는 js를 작성할 때 이 방법을 자주 사용하는데, 특정 DOM 객체에 특별한 데이터를 쉽게 추가할 수 있습니다. DOM 객체는 많은 데이터를 넣을 수 있는 매우 유용한 컨테이너와 같다고 생각합니다.
추가 질문이 떠오릅니다. 이러한 속성은 js에 추가할 수 있는데 flex와 같은 태그에도 추가할 수 있나요? 실제로 id 및 src와 같은 속성은 js 또는 태그에 추가될 수 있습니다. 두 가지 방법 모두 js가 데이터를 얻을 수 있습니다. 여기서 한 가지 말씀드릴 점은 class는 특별하다는 것입니다. Class는 태그에서 사용하지만, js에서는 className을 사용해야 합니다.
id, title, src 등 HTML에서 지원하는 속성은 태그에 설정한 후 js에서 액세스할 수 있습니다. 그렇다면 위의 예에서 adang과 같은 사용자 정의 속성이라면 어떻게 될까요? DOM에 접근할 수 있나요? 다음과 같이 실험을 했습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
var test = document.getElementById("test");
test.adang = "adang";
alert(test.adang);
}
</script>
<body>
<div id="test"></div>
</body>
</html>
js를 사용하여 사용자 정의 속성을 확장한 결과 우리가 원하는 결과가 IE와 정상적으로 출력되었습니다. FF에서는 모든 것이 정상입니다.
그런 다음 다음과 같은 두 번째 코드를 작성했습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
var test = document.getElementById("test");
alert(test.adang);
}
</script>
<body>
<div id="test" adang="adang"></div>
</body>
</html>
이번에는 html 태그에 확장 속성을 작성했습니다. . adang의 일반적인 출력은 IE에서이지만 FF에서의 출력은 정의되지 않습니다.
그런데 아주 이상합니다. DOM에서 제공하는 getAttribute("") 메서드를 사용하면 IE든 FF든 태그에 작성한 맞춤 속성을 가져올 수 있습니다.
따라서 호환성을 위해 getAttribute("")를 사용하여 맞춤 라벨 속성 값을 가져와야 합니다.