jacascript DOM节点——元素节点、属性节点、文本节点
元素节点
元素节点就是HTML标签元素,元素节点主要提供了对元素标签名、子节点及属性的访问;
元素节点的三个node属性:nodeType:1、nodeName/TagName:元素的标签名大写、nodeValue:null;
其父节点parentNode指向包含该元素节点的元素节点Element或文档节点Document;
元素的childNodes属性中包含了它的所有子节点,这些子节点可能是元素、文本、注释、处理指令节点;
childNodes结合NodeType可以检查有几个元素子节点:
操作属性的方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个,可以针对任何属性使用,包括那些以HTMLElement类型属性的形式定义的属性;
- obj.hasAttribute(attr)方法返回一个布尔值,表示当前元素节点是否包含指定属性;
- IE6/IE7不支持hasAttribute()方法;
- obj.hasAttribute(attr)检测class属性时,直接用class就可以了,不要用className;
- obj.hasAttribute(attr)检测for属性时,直接用for就可以了,不要用htmlFor;
123
- obj.getAttribute(attr)方法用于取得属性的值,如果给定名称的属性不存在或无参数则返回null;
- obj.getAttribute(attr)获取class时,直接用class就可以了;IE6/IE7除外,IE6/IE7的getAttribute(attr)方法要用className;
- obj.getAttribute(attr)获取for时,直接用for就可以了;
- obj.setAttribute(attr,value)方法接受两个参数:要设置的属性名和值,如果已经存在,则替换现有的值。如果属性不存在,则创建该属性并设置相应的值。该方法无返回值;
- obj.setAttribute(attr,value)设置class时,直接用class就可以了;
- obj.setAttribute(attr,value)设置for时,直接用for就可以了;
- obj.setAttribute(attr,value)设置style时,直接用style就可以了;在IE7及以下,用obj.style.setAttribute("cssText",value); 这里的style只是行间样式;
- 我们一般用obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];来获取元素当前样式;
varoTest=document.getElementById('test'); oTest.setAttribute('class','aaa');//setAttribute直接用class就可以了 oTest.setAttribute('className','bbb'); console.log(oTest.class);//undefinedIE8及以下会报错缺少标识符 console.log(oTest.getAttribute('class'));//aaagetAttribute直接用class就可以了 console.log(oTest.className);//aaa console.log(oTest.getAttribute('className'));//bbb oTest.setAttribute('style','border:1pxsolidred;height:100px;');//setAttribute直接用style就可以了 console.log(oTest.style);//所有的style设置,包括你没有设置的,太多了,肯定不是你想要的 console.log(oTest.getAttribute('style')); //border:1pxsolidred;height:100px;getAttribute直接用style就可以了 oTest.setAttribute('for','eee');//setAttribute直接用for就可以了 oTest.setAttribute('htmlFor','fff') console.log(oTest.for);//undefinedIE8及以下会报错缺少标识符 console.log(oTest.htmlFor);//undefined console.log(oTest.getAttribute('for'));//eeegetAttribute直接用for就可以了 console.log(oTest.getAttribute('htmlFor'));//fff console.log(oTest); // 123
- obj.removeAttribute(attr)方法用于彻底删除元素的属性,这个方法不仅会彻底删除元素的属性值,还会删除元素属性。该方法无返回值;
123