属性操作两种方法：
1、 dom对象.属性 == dom对象[属性] ;
2、 dom对象.get/set/removeAttribute()
- 获取属性：dom对象.getAttribute(名称)
- 设置属性：dom对象.setAttribute(名称, 值)
- 删除属性：dom对象.removeAttribute(名称)
//案例-body代码
<body>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="show" title="a标签">我是a链接</a>
</body>
1、dom对象.属性 == dom对象[属性] ;
【这两种方法的区别：
如果我们需要一个变量来绑定属性。那么使用[]方法比较好,变量方便随时修改或者替换其他的属性名。
第一种.属性 无法识别变量，无法修改。】
//可以设置标签原有的属性
var a = document.getElementsByTagName("a")[];
console.log(a.title);//a标签
a.title = "我是b标签"；
console.log(a.title);//我是b标签
//也可以设置标签没有的属性.如果设置标签没有的属性，将以对象的自定义属性形式存在。不出现在标签上.
a.className = "hide";
console.log(a.className);
a.aaa = "我是aaa";
console.log(a.aaa);
//可以赋值获取但是无法删除属性，只能将属性设置为""
a.title = "";
2、 dom对象.get/set/removeAttribute();
//可以设置标签原有的属性
var a = document.getElementsByTagName("a")[];
console.log(a.getArribute("title"));//获取
a.setAtteibute("title","我是b标签")；//设置属性
//如果设置标签没有的属性，将以对象的自定义属性形式存在。出现在标签上.
a.setAttribute("class","hide");
a.setAttribute("bbb","bbb");
//可以删除属性。removeAttrbute()方法连带属性一起删除。
a.removeAttribute("href");
a.removeAttribute("title");
注意：
两种方法自定义的属性(非标签自带)，不能相互交叉设置获取。谁设置的谁用。
设置类：class。不能用className
属性类型：
（在这里为了方便学习记忆，我分为三类。）
1、常规属性
2、表单属性
3、style属性
1、常规属性操作：
普通属性数据类型一般都是string
- title、src（src属性不能直接获取）
- href、innerHTML、className(class属性比较特殊。因为class是关键字，所以class属性在js中为className;)
之所以把href放在第二排，是因为href的值有点特殊： 1. href="" target="_blank" rel="external nofollow" ——刷新页面 2. href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ——跳转到当前页面的最顶端 3. href="javaScript：； " target="_blank" rel="external nofollow" ——禁用a链接点击 4. href="javascript:void(0)；" target="_blank" rel="external nofollow"
切换图片（技术点：需要解决a链接页面跳转的问题。解决办法：return false; a链接默认的跳转被关闭。）
案例源码下载地址：https://github.com/luyu1314/03-DOM-case
2、表单属性操作
- type、value
- checked、selected、disabled————表单属性的数据类型很多是布尔类型值
（注：checkbox选中checked、option选中selected、文本框input禁用disabled）
注：
案例12– 淘宝/京东获取焦点:
标签为input元素定义标记。label元素不会向用户呈现任何特殊效果，不过，它为鼠标用户增进了可用性。如果您在label元素内点击文本，就会出发此控件。
也就是说，用户选择此标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。
案例源码下载地址：https://github.com/luyu1314/03-DOM-case
3、style属性操作
style属性的数据类型是对象object ！
//body案例
<style>
div {
border: px solid #000;
}
</style>
<body>
<div id="box" title="我是div" style="width: 100px;height: 100px;background-color: pink;">我是div的内容</div>
</body>
1.className和style都可以设置样式。
样式少的时候使用style。样式多的时候用class.
- div.className——样式多的时候放进一个class里
- div.style.属性——既可以获取值，又可以赋值
2.style是对象(方便获取样式中的每一个属性和对应的值)
console.log(typeof div.title);//string（第一种普通属性）
console.log(typeof div.id);//string
console.log(typeof div.innerHTML);//string
console.log(typeof div.style);//object
console.log( div.style.height);//获取属性相应值
console.log(div.style.backgroundColor);//获取属性相应值
3.style属性值是字符串，没有设置值是空字符串”“；
console.log(typeof div.style.width);//string
console.log(div.style.top);//空字符串
console.log(11+div.style.top+22);//1122
4.命名规则，驼峰命名。和css不一样（CSS书写样式是background-color，CSS都是用-连接）
console.log(div.style.backgroundColor);
5.无论是设置还是获取只能操作行内式。（只和行内式交互，和内嵌和外链无关）
console.log(div.style.border);//空字符串，因为是内嵌样式
console.log(div.style.border);//100px
6.box.style.cssText = “字符串形式样式”；
让盒子的行内样式以字符串形式存在。（可赋值，可获取值）
console.log(div.style.cssText);//width: 100px; height: 100px; background-color: pink;
//赋值
div.style.cssText = "width: 300px; height: 300px; background-color: red;";
7.style常用属性
- backgroundColor
- backgroundImage
- color
- width
- height
- border
- opacity (IE8以前filter: alpha(opacity=xx))
注意：DOM对象style的属性和标签中style内的值不一样，因为在JS中-不能作为标识符
在 DOM中 写法： backgroundColor
在 CSS中 写法： background-color
案例源码下载地址：https://github.com/luyu1314/03-DOM-case