document.getElementById('box').className; // 获取class;
document.getElementById('box').className='pox'; // 设置class;
document.getElementById('box').bbb; // 获取自定义属性的值,非IE不支持;
2.getElementsByTagName()
// 方法返回一个对象数组HTMLCollection(NodeList)数组,这个数组保存着所有相同元素名的节点列表;
document.getElementsByTagName('*'); // 利用通配符获取所有元素;
// PS:IE在使用通配符时,会把文档最开始的html的规范声明当作第一个元素节点;
document.getElementsByTagName('li'); // =>[object HTMLCollection];获取所有li元素;
document.getElementsByTagName('li').[0]; // 获取第一个li元素;
3.getElementsByName()
获取相同名称(name)设置的元素,返回一个对象数组HTMLCollection(NodeList);
document.getElementsByName('add'); // 获取具有name='add'的input元素集合;
// PS:对于并不是HTML合法的属性,那么在JS获取的兼容性上也会存在差异;
// IE支持合法的name属性,但对于自定义的属性会出现不兼容问题;
4.getAttribute()
方法将获取元素中某个属性值;
但它和直接使用".attr"获取属性值的方法有一定区别;
document.getElementById('box').getAttribute('mydiv'); // 获取自定义属性值;
document.getElementById('box').mydiv; // 获取自定义属性值,仅IE支持;
5.setAttribute()
方法将设置元素中某个属性和值;接收两个参数:属性名和值;
如果属性本身已存在,那么就会覆盖;
document.getElementById('box').setAttribute('align','center'); // 设置属性和值;
// PS:在IE7及以下,使用setAttribute()方法设置class和style属性没有效果;
6.removeAttribute()
方法可以移除HTML属性;
document.getElementById('box').removeAttribute('style'); // 移除style样式属性;
三 DOM节点
1.node节点属性
// 节点可以分为:元素节点/属性节点和文本节点;
// 这些节点都有三个属性:nodeName/nodeType和nodeValue;
信息节点属性
节点类型 nodeName nodeType nodeValue
元素 元素名称 1 null
属性 属性名称 2 属性值
文本 #text 3 文本内容
document.getElementById('box').nodeType; // =>1; 元素节点;
2.层次节点属性
// 层次节点可以划分为:父节点与子节点/兄弟节点;
// 当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点;
节点关系示意图