<style>
#div1{
color: red;
}
</style>
</head>
<body>
<div>我是div</div>
<script>
// 给标签添加属性
// 标签对象.setAttribute('属性名称' , 属性值);
// 一次只能定义一个属性,如果要定义多个属性,要执行多次
// 获取标签属性的属性值
// 标签对象.getAttribute('属性名称');
// 获取到的结果,都是字符串类型
var oDiv = document.querySelector('div');
// 给 div 标签,添加属性index 属性值是0
oDiv.setAttribute('index' , 0);
oDiv.setAttribute('key' , '第一个div');
// 获取标签属性的属性值
console.log( oDiv.getAttribute('index') );
// 几个特殊的属性设定方式
// id属性 class属性 直接定义在标签对象上的方法
// 可以直接定义或者获取,不同通过 get ,set
console.dir(oDiv)
// 标签对象.id = 属性值 设定id属性的属性值
oDiv.id = 'div1';
// 标签对象.className = 属性值 设定class属性的属性值
oDiv.className = 'div2';
// 标签对象.id 获取标签对象,id属性值
console.log( oDiv.id )
// 标签对象.className 获取标签对象,class属性值
console.log( oDiv.className )
// 直接操作name属性, 并不是所有的浏览器都支持的
// 使用set,get最安全
oDiv.name = '张三';
console.log(oDiv.name);
// 总结
// 1,可以通过 setAttribute() 设定标签所有的属性 包括 id , class
// 可以通过 getAttribute() 所有标签所有的属性的属性值 包括 id , class
// 所有的属性,设定或者获取,都建议,通过set,get完成
// 2,id和class属性可以直接通过 标签对象.id和标签对象.className
// 来设定或者获取
// 3,根据不同版本的浏览器,有一些不在标签对象本身属性上的,也可以直接设定
// 例如 name , title
// 但是因为浏览器兼容问题,推荐还是使用set,get
// 4,这里属性值的设定,是替换操作,会覆盖之前的设定属性
// 而不是新增添加属性操作
