- Element节点是Element类型的实例;
- Element节点的nodeName与tagName属性元素的标签名的大写;nodeValue为null;
<!DOCTYPE html> <html> <body> <div id="123">123</div> </body> <script> var _div = document.getElementById("123"); console.log(_div.nodeName); console.log(_div.tagName); console.log(_div.nodeValue); </script> </html>
- 最佳实践:在比较标签名与字符串时,最好先将标签名转为为全小写。
HTML元素
- 所有HTML元素都由HTMLElement类型表示,HTMLElement类型继承自Element类型并添加了一些属性和方法;
所有HTML元素都是由HTMLElement或者其子类型表示的,每个HTML元素都由与之关联的类型,如:HTMLAnchorElement, HTMLBodyElement, HTMLDivElement..., 这些类型都继承HTMLElement类型的属性和方法,也有着自己的扩展
- 大部分HTML标签的原生特性作为Element节点对象的属性都可以直接通过"."或"[]"操作符读写,但无法读写自定义的特性(见下面的取得特性一节)
<!DOCTYPE html> <html> <body> <div id="123">123</div> </body> <script> var _div = document.getElementById("123"); console.log(_div.id); console.log(_div.className); console.log(_div.name); console.log(_div["id"]); console.log(_div["className"]); console.log(_div["name"]); </script> </html>
-
class为ES的保留字,使用“.” 或"[]"访问元素类名需要使用className。
取得特性
getAttribute(), setAttribute(), removeAttribute()三个特性操作的方法:
- 传递给getAttribute()的特性名字符串与实际的特性名相同,比如:要获取class的特性值,应该传入'class',而不是'className';
- 通过getAttribute()方法可以取得自定义特性;
- 最佳实践:根据HTML5的规范推荐,自定义特性应该加上data-前缀以便验证;
- getAttribute()方法与节点的访问方法".style"返回值的类型不同,前者返回一个字符串,后者返回CSSStypleDeclaration对象;
<!DOCTYPE html> <html> <body> <div id="123" style="height: 20px;">123</div> </body> <script> var _div = document.getElementById("123"); console.log(_div.getAttribute("style")); // 输出:height: 20px; console.log(_div.style); // 输出:CSSStyleDeclaration {0: "height", alignContent: "", …} </script> </html>
同理,访问节点的"onclick"也分别返回function和字符串
-
最佳实践:只在获取标签的自定义特性值的情况下才使用getAttribute()方法,其余情况直接访问属性。
设置特性
- setAttribute()接收两个字符串参数:name 和value;
- setAttribute()方法可以操作自定义特性;
- setAttribute()设置的特性名会自动转换为小写;
- 最佳实践:只有在设置自定义标签的时候才使用setAttribute()方法,其余情况直接操作属性;
- removeAttribute()用于彻底删除元素的特性和值,包括自定义特性;
attributes属性
- attributes属性是Element类型独有的;
- attributes属性是一个NamedNodeMap对象,类似NodeList,是由特性节点组成对象;
- NamedNodeMap对象中的每一项又是一个单独的特性节点,有nodeName,nodeValue等属性;
- NamedNodeMap对象拥有的方法
<!DOCTYPE html> <html> <body> <div id="123" style="height: 20px;">123</div> </body> <script> var _div = document.getElementById("123"); // item() console.log(_div.attributes.item(1)); // 输出:style="height: 20px;" // getNamedItem() console.log(_div.attributes.getNamedItem("id")); // 输出:id="123" console.log(_div.attributes.getNamedItem("id").nodeValue); // 输出:123 // removeNamedItem() console.log(_div.attributes.removeNamedItem("style")); // 输出:style="height: 20px;" // setNamedItem() var newAttr = document.createAttribute("newAttr"); newAttr.nodeValue = "456"; _div.attributes.setNamedItem(newAttr); </script> </html>
-
使用attributes对象来操作元素节点的特性与直接使用getAttribute(), setAttribute(), removeAttribute()效果一致,attributes的方法可以找到别的简单的替代者;
-
针对attributes对象中的特性,不同浏览器返回的顺序不同;IE7会将没有指定的特性一并返回,需要使用NamedNodeMap中节点的specified属性检测是否为已定义特性
console.log(_div.attributes[1].specified); // 输出:true或false
-
最佳实践:只使用attributes属性对象来遍历元素的特性:
<!DOCTYPE html> <html> <body> <div id="123" style="height: 20px;">123</div> </body> <script> function outputAttributes(element){ var attrs = new Array(), attrName, attrValue, i, len; for(i = 0, len=element.attributes.length; i<len; i++){ attrName = element.attributes[i].nodeName; attrValue = element.attributes[i].nodeValue; if(element.attributes[i].specified){ attrs.push(attrName + '=\"' + attrValue + '\"'); } } return attrs.join(" "); } var _div = document.getElementById("123"); console.log(outputAttributes(_div)); </script> </html>
创建元素
- document.createElement()传入参数为标签名(小写):
<!DOCTYPE html> <html> <body> <div id="123" style="height: 20px;">123</div> </body> <script> var _div = document.createElement("div"); _div.className = 'div'; _div.innerHTML = 'Hi!'; document.body.appendChild(_div); </script> </html>
-
可以创建自定义的非标准标签,例如:
document.createElement("abc");
-
在IE8及以下可以传入整个元素标签,包括属性、content等,其他浏览器不支持;兼容性写法:
<!DOCTYPE html> <html> <body> <div id="123" style="height: 20px;">123</div> </body> <script> if(document.documentMode && document.documentMode <= 8){ var div = document.createElement('<div class=\"demo\">Content</div>'); }else{ var div = document.createElement('div'); div.calssName = 'div'; div.innerHTML = 'Content'; } </script> </html>
元素的子节点
-
不同的浏览器对待元素间的空白符的解析不同。低版本IE会忽略元素之间的无用的空白符,其他浏览器会将空白符视作一个文本节点;
-
需要对元素的childNodes进行操作时,通常先检测一下nodeType属性:
<!DOCTYPE html> <html> <body> <div id="123" style="height: 20px;">123</div> </body> <script> var element = document.getElementById("123"); for(var i=0; i<element.childNodes.length; i++){ if(element.childNodes[i].nodeType == 1){ // do something } } </script> </html>
元素尺寸与位置
关于滚动条:
页面的滚动条是属于html元素的,而不是body元素的
滚动条的宽度是包含在元素的宽度里面的
document.documentElement.clientTop和document.documentElement.clientLeft访问的是盒子上边框和左边框的值;