Home > Article > Web Front-end > Detailed explanation of how JavaScript reads the attributes of the DOM object and implements the code

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

伊谢尔伦Original: 2017-07-20 11:50:461531browse

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);

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of method examples on how to use javascript and jquery to detect the existence of dom nodesNext article：Detailed explanation of method examples on how to use javascript and jquery to detect the existence of dom nodes

See more

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

Related articles