One 获取标签属性
语法：元素 . 属性名
<body>
<div class= 'box' id='wrap' title='阿理'></div>
<script>
var x = document.getElementById( ' wrap' );
var a = x.title;
alert( a );
</script>
</body>
00.png
Two 对合法标签属性操作 →HTML规定的一些标签属性
语法：元素 . 属性名 = ‘xxx’;
<body>
<div class= 'box' id='wrap' title='阿理'></div>
<script>
document.getElementById( 'box' ).id = 'wrap2';(图1)
document.getElementById( 'box' ).title= '阿飞'； 这时候会报错（图2）
</script>
</body>
图一.png
图2.png
为什么会报错呢？Cannot set property 'title' of null (不能设置title给空对象)
因为：上面已经修改了id值了 再次通过原来的id值已经获取不到元素了；要用修改后的id值；
利用变量来设置
var x = document.getElementById( 'wrap' );
x.id= 'wrap2';
x.title = '阿飞';
1.png
为什么可以呢？
因为：x已经在id修改存储了元素了，一直存放在x里面，后面无论对元素修改什么永远也改变不了x里的元素；
特殊 class
我们之前有讲过class是保留词；对class不能直接用class = 直接操作；要通过 className
x.class = 'box2';修改不了
2.png
通过：
x.className = 'box2';
3.png
修改多个属性值： 属性值与属性值中间用 空格 隔开；
x.className = 'box2 box3 box4';
3.png
Three 不合法标签属性(自定义的标签属性)
<body>
<div id='wrap' ali='nav'></div>
<script>
var x = document.getElementById( 'wrap' );
a = x.ali;
alert( a );
</script>
</body>
4.png
弹出undefined说明没办法获取到→所以针对自定义标签通过 . 操作是无效；
那么用什么呢？
自定义属性三剑客：
x.getAttribute( ' ' );获取
x.setAttribute( ' ' );设置
x.removeAttribute( ' ' );删除
attributes 查询标签里的属性
getAttribute( ' ' );获取
<body>
<div id='wrap' ali='nav'></div>
<script>
var x = document.getElementById( 'wrap' );
var y = x.getAttribute( 'ali' );
alert( y );
</script>
</body>
5.png
x.setAttribute( ' ' );设置
<body>
<div id='wrap' ali='nav'></div>
<script>
var x = document.getElementById( 'wrap' );
x.setAttribute( 'ali' , '阿里' );
</script>
</body>
6.png
也可以进行添加标签属性
<body>
<div id='wrap' ali='nav'></div>
<script>
var x = document.getElementById( 'wrap' );
x.setAttribute( 'ali2' , '阿里' );
</script>
</body>
7.png
x.removeAttribute( );
<body>
<div id='wrap' ali='nav'></div>
<script>
var x = document.getElementById( 'wrap' );
x.removeAttribute( 'ali' );
</script>
</body>
8.png
有人问用
var x = document.getElementById( 'wrap' );
x.setAttribute( 'ali' , ' ');
x.removeAttribute( 'ali' );
9.png
从图片可以看到
x.setAttribute( 'ali' , ' ');只是把属性值变为空、属性名还在；
x.removeAttribute( 'ali' );是把属性名、属性值删掉；
注意：三剑客对合法标签属性也起作用；
attributes 查询标签里的属性
<div class="bg"> </div>
<script type="text/javascript">
var x = document.getElementsByTagName('div')[0];
console.log( x.attributes ); 获取所有的里面属性（图一）
console.log( x.attributes[0] );第几个属性显示属性跟值（图二）
console.log( x.attributes[0].name );第1个属性的名字（图三）
console.log( x.attributes[0]. value);第1个属性的值（图四）
</script>
图一
图二
图三
图四
