A brief discussion on JS reading custom attributes of DOM objects (tags)-JS Tutorial-php.cn

A brief discussion on JS reading custom attributes of DOM objects (tags)

高洛峰

Release： 2016-12-06 13:06:02

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:

<div id="test" class="hello"></div>
 
var test = document.getElementById("test");
 
test.adang = "adang";
 
alert(test.adang);

Copy after login

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

A further question comes to mind, these attributes can be added in js, so can they be added in tags like flex? In fact, attributes such as id and src can be added in js or on tags. In both ways, js can obtain data. One thing to say here is that class is special. Class is used in tags, but className must be used to call it in js.

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 my example above? Is the DOM accessible? I 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>
<div id="test"></div>
</body>
</html>

Copy after login

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

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>
<div id="test" adang="adang"></div>
</body>
</html>

Copy after login

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

But it’s 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.