属性与属性节点

什么是属性？简单说，属性就是对象身上保存的变量。在以前的js代码里面（虽然个人感觉这里有点像Java，不过还是这么看一下叭），我们可以这样创建一个对象：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7 
 8         </style>
 9         <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11             $(function(){
12                 function Person(){ //定义一个类
13                     
14                 }
15                 
16                 var p = new Person();  //根据类来创建对象
17                 p.name="小明"；  //这就是给对象添加了name属性
18             });
19         </script>
20     </head>
21     <body>
22         
23     </body>
24 </html>

此外，我们还可以操作属性，如何操作属性？p.name="小明";就是在对属性进行操作。

或者也可以这样：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7 
 8         </style>
 9         <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11             $(function(){
12                 function Person(){ //定义一个类
13                     
14                 }
15                 
16                 var p = new Person();  //根据类来创建对象
17                 p.name="小明";  //这就是给对象添加了name属性
18                 console.log(p.name);
19                 
20                 //第二种方式
21                 var t = new Person();
22                 t["name"] = "小红";
23                 console.log(t["name"]);  //这就是在对属性进行一种操作
24             });
25         </script>
26     </head>
27     <body>
28         
29     </body>
30 </html>

 

 

什么是属性节点？

在编写html代码中，添加在标签中的属性就是属性节点。例如在<body></body>标签中的<span name="哈哈哈"></span>。或者，在浏览器中找到span这个DOM元素之后，展开看到的都是属性。如图：

 

 在attributes属性中保持的所有内容都是属性节点。另外要注意区别：任何对象都有属性，而属性节点是只有DOM元素才有的。

我们可以进行一些别的操作：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7 
 8         </style>
 9         <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
10         <script type="text/javascript">
11             $(function(){
12                 function Person(){ //定义一个类
13                     
14                 }
15                 
16                 var p = new Person();  //根据类来创建对象
17                 p.name="小明";  //这就是给对象添加了name属性
18                 console.log(p.name);
19                 
20                 var span = document.getElementsByTagName("span")[0];  //把它的第0个元素取出来
21                 span.setAttribute("name","小明");
22                 
23             });
24         </script>
25     </head>
26     <body>
27         <span name="哈哈哈"></span>
28     </body>
29 </html>

 

 可以看到在浏览器页面按了F12之后查看elements，span标签的name发生了改变。获取也十分简单：console.log(span.getAttribute("name"));就可以了：

 

 

posted @ 2021-02-15 17:23  EvanTheBoy  阅读(240)  评论(0)    收藏  举报