JavaScript가 DOM 객체의 속성을 읽고 코드를 구현하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript가 DOM 객체의 속성을 읽고 코드를 구현하는 방법에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-07-20 11:50:46

원래의

1561명이 탐색했습니다.

DOM 객체는 js의 매우 기본적인 요소입니다. 일반적으로 우리는 js를 작성할 때 반드시 DOM 객체를 사용하게 됩니다. 다음과 같이 사용자 정의 속성을 쉽게 추가할 수 있습니다.

<p id="test" class="hello"></p>

var test = document.getElementById("test");

test.adang = "adang";

alert(test.adang);

로그인 후 복사

adang이라는 속성이 test라는 ID를 가진 DOM 요소에 추가된 다음 js에서 이 속성을 호출할 수 있습니다. . 이 방법은 js를 작성할 때 자주 사용되며 특정 DOM 객체에 특별한 데이터를 쉽게 추가할 수 있습니다. DOM 객체가 많은 데이터를 넣을 수 있는 유용한 컨테이너처럼 느껴집니다.

ID, 제목, 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>
<p id="test"></p> 
</body>
</html>

로그인 후 복사

js를 사용하여 custom 속성을 확장한 결과, 우리가 원하는 결과가 정상적으로 출력되었으며, 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>
<p id="test" adang="adang"></p> 
</body>
</html>

로그인 후 복사

이번에는 html 태그에 확장 속성을 작성했습니다. adang의 일반적인 출력은 IE에서이지만 FF에서의 출력은 정의되지 않습니다.

하지만 매우 이상합니다. DOM에서 제공하는 getAttribute("") 메소드를 사용하면 IE 또는 FF에서 태그에 작성한 사용자 정의 속성을 얻을 수 있습니다.

따라서 호환성을 위해 getAttribute("")를 사용하여 사용자 정의 라벨 속성의 값을 가져와야 합니다.

위 내용은 JavaScript가 DOM 객체의 속성을 읽고 코드를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!