Detailed explanation of how JavaScript reads the attributes of the DOM object and implements the code-JS Tutorial-php.cn

Detailed explanation of how JavaScript reads the attributes of the DOM object and implements the code

伊谢尔伦

Release： 2017-07-20 11:50:46

Original

1561 people have browsed it

The DOM object is a very basic element for js. Generally speaking, when we write js, we will definitely operate on it. We can easily add custom attributes to it, such as:

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

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

test.adang = "adang";

alert(test.adang);

Copy after login

We will find that the DOM element with the id of test has been added There is an attribute called adang, and then in js, this attribute can be called. This method is often used when writing js. It can easily add some special data to a certain DOM object. It feels like the DOM object is like a useful container into which a bunch of data can be put.

Attributes supported in HTML such as id, title, and src can be set in tags and then accessed by js. So, what if it is a custom attribute like adang in the above example? Is the DOM accessible? We did an experiment, as follows:

<!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>

Copy after login

Using js to extend custom attributes, the result is that the result we want is output normally, under IE and FF All normal.

Then I wrote a second piece of code, as follows:

<!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>

Copy after login

This time I wrote the extended attributes to the html tag. The normal output of adang is under IE, but the output under FF is undefined.

But it is very strange. If you use the method getAttribute("") provided by DOM, you can get the custom attributes we wrote in the tag, whether under IE or FF.

So, for compatibility, we need to use getAttribute("") to get the value of the custom label attribute.

The above is the detailed content of Detailed explanation of how JavaScript reads the attributes of the DOM object and implements the code. For more information, please follow other related articles on the PHP Chinese website!