day-2.4 标签属性的操作

一、标签属性的属性的类型：

标签属性也叫行内属性，是写在属性标签行内，元素的标签属性又分为合法属性和自定义属性，

合法标签属性

合法属性即html原先就定义好的，比如 id = "" ,class = "", style = "" ,name = "" 等等这些。

自定义行内属性（非法行内属性）即自己根据代码需要自定义的。

合法标签属性在dom元素对象里面会有对应的(标签属性名)的属性存合法标签属性的值，

比如下面的代码，获取元素对象，元素对象的属性ID值为wrap，a.id = "haha" 后，a的id值变haha，

这是dom模型(document object model)为js提供的操作元素对象的api，操作html元素很多时候其实是在操作html元素的标签属性，

合法的标签属性是html既定的，在前端已经是一套标准的东西，要通过js操作一套已知的标准，DOM就为js提供了操作这套标准的对应的API。

注意：标签属性class和其他标签属性不通，它在js的dom元素对象里面对应的属性名是className。

 1 <body>
 2     <div id="wrap"></div>
 3     <script>
 4         var a =  document.getElementById("wrap");
 5         console.log(a.id);  //wrap
 6         console.dir(a);   //id:haha
 7         a.id = "haha";   
 8         console.log(a.id); // haha
 9         console.dir(a);  //id:haha
10     </script>
11 </body>

console.dir输出异步性

关于上面例子的第一个console.dir输出的id值是修改后的haha，让人感觉console.dir好像是个异步函数。

参考了一段资料

js console.log同步异步？这个问题是在调试的时候遇到的，我发现有时候console.log并不会给我预期的结果，后来查查资料（参考《你不知道的javascript中卷》第二部分异步和性能 1.1 异步控制台部分）。

 并没有什么规范或一组需求指定console.* 方法族如何工作——它们并不是JavaScript 正式的一部分，而是由宿主环境（请参考本书的“类型和语法”部分）添加到JavaScript 中的。因此，不同的浏览器

 和JavaScript 环境可以按照自己的意愿来实现，有时候这会引起混淆。尤其要提出的是，在某些条件下，某些浏览器的console.log(..) 并不会把传入的内容立即输出。出现这种情况的主要原因是，在许

 多程序（不只是JavaScript）中，I/O 是非常低速的阻塞部分。所以，（从页面/UI 的角度来说）浏览器在后台异步处理控制台I/O 能够提高性能，这时用户甚至可能根本意识不到其发生。

什么意思呢？我们还是举个例子来说：  

1 var  a={name:"小Q"};
2       console.log(a);
3       a.name="snail";

我们通常认为恰好在执行到console.log(..) 语句的时候会看到a 对象的快照,大多数情况下我们看到的是"小Q”，但是，有时候浏览器可能会吧控制台I/O延迟到后台，这时候我们看到的可能是"snail"，到底什么

时候控制台I/O 会延迟，甚至是否能够被观察到，这都是游移不定的。如果在调试的过程中遇到对象在console.log(..) 语句之后被修改，可你却看到了意料之外的结果，要意识到这可能是这种I/O 的异步化造成的。

如果遇到这种少见的情况，最好的选择是在JavaScript 调试器中使用断点，而不要依赖控制台输出。次优的方案是把对象序列化到一个字符串中，以强制执行一次“快照”，比如通过JSON.stringify(..)。

标签属性需要注意的知识点：

1、图片元素对象里面的src属性存的值不是标签元素src的值（相对路径的值）

 1 <body>
 2     <img id="mm" src="123.png" alt="">
 3     <img id="hh" src="123.png" alt="">
 4     <script>
 5         var oImg = document.getElementById("mm"),
 6         oImg2 = document.getElementById("hh"),
 7         oSrc = oImg.src,
 8         oSrc2 = oImg2.src;  
 9             console.log(oSrc);  ///file:///C:/Users/Administrator/Desktop/123.png,并不是相对路径地址的"1.png"
10         console.log(oSrc=="1.png");  //false
11         console.log(oSrc== oSrc2);  //ture
12     </script>
13 </body>

2、获取元素对象并将其赋值给变量后，元素对象的属性变化，不影响变量对元素对象的引用关系。

a获取文档对象后，即使获取的条件是ID，ID值修改后，扔可以通过变量a指向到文档对象对title属性值进行修改，最终将修改值复写入标签属性title里面。

1 <body>
2     <div id="wrap"></div>
3     <script>
4         var a = document.getElementById("wrap");
5         a.id = "haha"
6         a.title = "修改ID后，由变量引用对象进行title修改。"
7     </script>
8 </body>

 

非法标签属性

非法标签属性，即我们根据自身需要，自定义的标签属性

 自定义标签属性操作的方法：

setAttribute：设置自定义标签属性

getAttribute：读取自定义标签属性

removeAttribute：移除自定义标签属性

自定义标签属性和对象的自定义属性存在的区别：

自定义标签属性只会显示在标签内，不会显示在元素对象的console.dir里面存储，如果需要读取的时候只能通过(对象.get(set/remove)Attribute)等相关方法间接操作。

而自定义属性是元素对象的属性，他不会显示在html文档的标签内，但是会显示在元素对象的console.dir里面，可以直接通过（对象.属性名）直接进行操作。

下一节会讲解对象属性。

 1 <body>
 2      <div id="wrap" haha="123"></div>
 3      <script>
 4          var a = document.getElementById("wrap");
 5          console.log(a.getAttribute("goudan"));
 6          a.setAttribute ("goudan","hahaha");
 7          a.setAttribute("id","xixi");
 8          a.setAttribute("ohaha",("xixixi"));   //
 9          a.removeAttribute("haha");   //移除标签属性goudan。
10          a.id = "";                  // 无法移除标签内的id，标签内的id ="";
11          a.removeAttribute("id");    //移除标签内的id ,但是console.dir(a)，可以看到对象属性里还是有id属性的。
12      </script>
13 </body>

 

posted @ 2018-05-18 14:37  bibiguo  阅读(127)  评论(0)    收藏  举报