Element类型用于表示XML或HTML元素，供应了对元素标署名、子节点及特性的访问；
Element类继续自Node接口；它继续了Node接口中的所有属性和方法，比如parentNode、childNode等；同时，它在Node接口的根本上扩展了自己的属性和方法；
Element类型的特色：
var mydiv = document.getElementById("mydiv");console.log(mydiv.nodeType); // 1console.log(mydiv.nodeName); // DIVconsole.log(mydiv.nodeValue); // nullconsole.log(mydiv.parentNode); // <body>console.log(mydiv.childNodes); // NodeList
Element的属性：
id属性：表示元素的标识符，与全局属性id对应；
var mydiv = document.getElementById("mydiv");console.log(mydiv.id);mydiv.id = "yourdiv";console.log(mydiv.id);var yourdiv = document.getElementById("yourdiv");console.log(yourdiv.id);
tagName属性：与nodeName属性一样，可以返回元素的标署名，在HTML文档中返回大写，在XML中返回原生，因此在利用tagName时，末了利用toLowerCase()转换；
var mydiv = document.getElementById("mydiv");console.log(mydiv.tagName); // DIVif(mydiv.tagName.toLowerCase() == "div"){ //...}
一样平常利用tagName，由于从字义上理解更加清晰；
Element的子类型HTMLElement：
HTMLElement类型直接继续自Element，因此，HTML元素即属于HTMLElement类也属于Element类；
所有HTML元素都由HTMLElement类型或其子类型表示，比如：HTMLDIVElement，便是详细的div元素的类型；
HTMLElement类型在Element类的根本上，并添加了一些属性，这些属性分别对应于每个HTML元素中都存在的标准特性：id、title、lang、dir、className；
这些属性都是可读可写的，并且也是动态的；
<div id="mydiv" name="mydiv" title="DIV" lang="en" dir="ltr" class="divclass">// …<script>var mydiv = document.getElementById("mydiv");console.log(mydiv.id);console.log(mydiv.title);console.log(mydiv.lang);console.log(mydiv.dir);console.log(mydiv.className);mydiv.id = "yourdiv";mydiv.title = "你的DIV";mydiv.lang = "fr";mydiv.dir = "rtl";mydiv.className = "reddiv";</script>
Element特性（属性）：
每个元素都有多少个特性，这些特性的用场是给出相应元素或其内容的附加信息；DOM为Element工具定义了一些API来获取或设置这些XML或HTML属性(特性)；
操作特性紧张有三个方法：
getAttribute()、setAttribute()、removeAttribute()；这些方法可以针对任何特性利用，包括那些以HTMLElement类型属性的形式定义的特性；
getAttribute(attributeName)方法：
返回元素上一个指定的特性值，如果指定的特性不存在，则返回null或 ""；特性的名称不区分大小写；
如果取得class，须要传入class，而不是className；
var mydiv = document.getElementById("mydiv");console.log(mydiv.getAttribute("id")); // mydivconsole.log(mydiv.getAttribute("class")); // divclassconsole.log(mydiv.getAttribute("title")); // null
也可以取得自定义特性(即不是HTML元素的标准特性)，但要把稳，根据HTML5的规范，自定义特性该当加上data-前缀以便验证；
console.log(mydiv.getAttribute("custom")); // customvalueconsole.log(mydiv.getAttribute("data-name")); // wangwei
任何元素的所有特性，都可以通过DOM元素本身的属性来访问，不过，只有公认的(非自定义)特性才会以属性的形式添加到DOM工具中；但IE可以为自定义特性创建属性；
console.log(mydiv.id);console.log(mydiv.className);console.log(mydiv.myname); // undefinedconsole.log(mydiv.align); // left，认为align是公认的var img = document.getElementById("myimg");var imgurl = img.src;console.log(img.id === "myimg");var f = document.forms[0];f.action = "https://www.zeronetwork.cn/do.php";f.method = "POST";
HTML属性名不区分大小写，但Javascript属性名则大小写敏感；从HTML属性名转换到Javascript属性名该当采取小写，但是如果属性名包含不止一个单词，则采取小驼峰式，如：defaultCheded和tabIndex；
有些HTML属性名在Javascript中是保留字，对付这些属性，一样平常的规则是为该属性名加前缀”html”，如，HTML的for属性在Javascript中变为htmlFor属性，class属性比较分外，它在Javascript中变成className属性；
表示HTML属性的值常日是字符串，但当属性为布尔值或数值时，Javascript中对应的属性也是布尔值或数值，而不是字符串；
<label id="lbInput" for="txtInput">文本框：</label><input id="txtInput" tabindex="2" type="text" readonly /><script>var txtInput = document.getElementById("txtInput");console.log(txtInput.tabIndex); // 1console.log(txtInput.readOnly); // truevar lbInput = document.getElementById("lbInput");console.log(lbInput.htmlFor); // txtInput</script>
style和事宜处理程序特性：
style：在通过getAttribute()访问时，返回的style特性值中包含的是CSS文本；而通过属性访问它会返回一个CSSStyleDeclaration工具（由于style属性是用于以编程办法访问元素样式的工具，因此并没有直接映射到style特性，有关CSS编程，后面我们会讲到）；
事宜处理程序特性，类似于onclick等这样的事宜处理程序，当在特性中利用时，onclick中包含的便是JS代码，利用getAttribute(）会返回相应的代码的字符串，但在访问onclick属性时，会返回一个Javascript函数；
var mydiv = document.getElementById("mydiv");console.log(mydiv.getAttribute("style")); // font-size: 14px;color:red;console.log(mydiv.style); // CSSStyleDeclaration or CSS2Propertiesconsole.log(mydiv.getAttribute("onclick")); // alert('zeronetwork');console.log(mydiv.onclick); // function onclick(event)
setAttribute(name, value)方法：
设置指定元素上的某个特性值，如果特性已经存在，则更新该值，否则，利用指定的名称和值添加一个新的特性；
该接管两个参数：要设置的特性名和值；
此方法可以操作HTML特性也可以操作自定义特性；
var mydiv = document.getElementById("mydiv");mydiv.setAttribute("id","outerdiv");mydiv.setAttribute("class","outerdivclass");mydiv.setAttribute("title","mydiv title");mydiv.setAttribute("style","border-bottom:1px solid;color:purple;");mydiv.setAttribute("custom","custom value");console.log(mydiv.title); // mydiv titleconsole.log(mydiv.custom); // undefined
通过该方法设置的特性名会被统一转换成小写形式，即“ID”终极会变成“id”；
mydiv.setAttribute("ID","myID"); // idmydiv.setAttribute("CID","customID"); // cid
布尔特性只要涌如今元素上就会被认为是 true，无论它的值是什么；一样平常来说，该当将 value 设置为空字符串，也有人利用这个属性的名称作为值，虽然不会涌现什么问题，但不规范的；
var txtInput = document.getElementById("txtInput");txtInput.setAttribute("readonly",true);// 会渲染成readonly="true"txtInput.setAttribute("readonly",""); // 渲染成readonlyconsole.log(txtInput.readOnly); // true
由于所有特性都是属性，以是直接给属性赋值可以设置特性的值，但如果添加的是一个自定义的属性，该属性不会自动成为元素的特性；
mydiv.title = "mydiv title";mydiv.style = "border-bottom:1px solid;color:purple;";mydiv.custom = "custom value"; // html中并没有渲染customconsole.log(mydiv.title); // mydiv titleconsole.log(mydiv.custom); // custom valueconsole.log(mydiv.getAttribute("title")); // mydiv titleconsole.log(mydiv.getAttribute("custom")); // null
可以通过setAttribute()方法设置class，但不能通过属性设置class，由于class是关键字，须要className进行属性设置；
var mydiv = document.getElementById("mydiv");mydiv.setAttribute("class","att_class");// mydiv.class = "att_class"; // 无效,class是保留字mydiv.className = "att_class";console.log(mydiv.class); // undefinedconsole.log(mydiv.className); // att_class
removeAttribute(attrName)方法：
用于从指定的元素彻底删除元素的特性；
此方法不仅会打消特性的值，而且也会从元素中完备删除特性；
此方法并不常用，但在序列化DOM元素时，可以通过它来确切地指定要包含哪些特性；
var mydiv = document.getElementById("mydiv");mydiv.removeAttribute("class");mydiv.removeAttribute("style");mydiv.setAttribute("custom","custom_value");mydiv.removeAttribute("custom");mydiv.title = "mydiv title";mydiv.removeAttribute("title");
hasAttribute(attrName)方法和hasAttributes()方法：
用于检测特性是否存在；个中hasAttribute()须要一个特性参数，判断该元素是否包含有指定的特性，而hasAttributes()检测的是否有特性，详细是什么特性，则不是它所关心的了；
var mydiv = document.getElementById("mydiv");console.log(mydiv.hasAttribute("title"));if(!mydiv.hasAttribute("align")) mydiv.setAttribute("align","center");console.log(mydiv.hasAttributes()); // true
当属性为布尔值时，hasAttribute()方法特殊有用，比如HTML表单的disabled属性，只要判断它有没有这个属性即可，不用管它的值；
attributes属性：
返回该元素所有属性节点的一个实时凑集，该凑集是一个NamedNodeMap工具，是一个只读的类数组工具，只有Element类型拥有；该属性与NodeList类似，也是一个动态的凑集；也可以利用索引办法访问，并且可以列举；
元素的每个特性都由一个Attr节点表示，Attr工具是一个分外的Node，不会像普通的Node一样去利用；Attr的name和value属性返回该属性的名字和值；
每个Attr节点都保存在NamedNodeMap工具中；此节点都有nodeName、nodeValue等属性，nodeName便是特性的名称，nodeValue便是特性的值；
var mydiv = document.getElementById("mydiv");console.log(mydiv.attributes);console.log(mydiv.attributes[1]);console.log(mydiv.attributes.title);console.log(mydiv.attributes.custom);mydiv.attributes.title = "wangwei"; // 无效console.log(mydiv.attributes[1].nodeType); // ATTRIBUTE_NODEconsole.log(mydiv.attributes[1].nodeName);console.log(mydiv.attributes[1].nodeValue);
NamedNodeMap工具：
表示一个无顺序的属性节点 Attr 工具的凑集；其是类数组工具，同时也是动态的；
属性和方法：
length属性：返回映射(map)中工具的数量；
getNamedItem(name)：返回给定名称name的属性节点；
item(pos)：返回位于数字pos位置处的节点；(注：各个浏览器会返回不同的顺序)；
setNamedItem(node)：向列表中添加或更换特性节点；
removeNamedItem(name)：从列表中移除特性为name的节点；与removeAttribute()相同，但其会返回被删除的特性(Attr)节点；
可以通过attributes属性利用方括号直接访问特性；
var mydiv = document.getElementById("mydiv");console.log(mydiv.attributes);console.log(mydiv.attributes.item(1));console.log(mydiv.attributes.getNamedItem("name"));console.log(mydiv.attributes[1]);console.log(mydiv.attributes["name"]);mydiv.attributes["id"].nodeValue = "newID";mydiv.attributes.getNamedItem("name").nodeValue = "newName";var deleteStyle = mydiv.attributes.removeNamedItem("style");console.log(deleteStyle);var yourdiv = document.getElementById("yourdiv");yourdiv.attributes.setNamedItem(deleteStyle);var attr = document.createAttribute("dir");attr.nodeValue = "ltr";mydiv.attributes.setNamedItem(attr);
利用attributes属性较麻烦，因此利用getAttribute()、removeAttribute()和removeAttribute()方法比较常用；但在遍历元素的特性时，attributes属性比较方便；
遍历attributes属性：
在须要将DOM构造序列化为XML或HTML字符串时，多数都会涉及遍历元素特性；
// 迭代元素的所有特性，布局成name=”value” name=”value”这样的字符串格式var mydiv = document.getElementById("mydiv");function outputAttributes(element){ var pairs = new Array(); for(var attr in element.attributes){ if(element.attributes[attr] instanceof Attr){ // console.log(attr + element.attributes[attr]); var attrName = element.attributes[attr].nodeName; var attrValue = element.attributes[attr].nodeValue; // console.log(attrName); pairs.push(attrName + "=\"" + attrValue + "\""); } } // 或者利用for循环 // for(var i=0,len=element.attributes.length; i<len; i++){ // var attrName = element.attributes[i].nodeName; // var attrValue = element.attributes[i].nodeValue; // // console.log(attrName); // pairs.push(attrName + "=\"" + attrValue + "\""); // } return pairs.join(" ");}console.log(outputAttributes(mydiv));
创建Element元素：
document.createElement(tagName)方法：用于创建一个由标署名称tagName指定的HTML元素，如果用户代理无法识别tagName，则会天生一个未知 HTML 元素；
该方法只接管一个参数，即要创建元素的标署名；此标署名在HTML中不区分大小写，在XML(包括XHTML)中，是区分大小写的；
在创建新元素的同时，也为新元素设置了ownerDocument属性；同时还可以操作元素的特性，为它添加子节点，以及实行其他操作；
新创建的元素，必须添加到文档树中，才能显示出来，可以利用appendChild，insertBefore()或replaceChild()方法；
var div = document.createElement("div");div.innerHTML = "<h2>零点程序员</h2>";div.id = "outerDiv";div.className = "outerDiv";div.setAttribute("style","color:green;");console.log(div.ownerDocument);document.body.appendChild(div);var h3 = document.createElement("h3");h3.setAttribute("onclick","alert('this is zeronetwork');");h3.innerText = "zeronetwork";div.insertBefore(h3, null);
Element的子节点：
元素可以有任意数目的子节点和后代节点，这些子节点可能是元素、文本、注释处处理指令；但HTML中的空缺也会被解析为文本节点；因此在实行某项操作时，要先检讨一下nodeType属性；
<!-- 构造 --><ul id="myList"> <li>HTML</li> <li>CSS</li> <li>Javascript</li></ul><!-- 或者删除空缺 --><ul id="myList"><li>HTML</li><li>CSS</li><li>Javascript</li></ul>// js代码var myList = document.getElementById("myList");console.log(myList.childNodes.length);for(var i=0,len=myList.childNodes.length; i<len; i++){ if(myList.childNodes[i].nodeType == Node.ELEMENT_NODE) console.log(myList.childNodes[i].nodeName);}// 或者// for(var n in myList.childNodes){// if(myList.childNodes[n].nodeType && myList.childNodes[n].nodeType == Node.ELEMENT_NODE)// console.log(myList.childNodes[n].nodeName);// }
元素节点也支持getElementsByTagName() 方法，可以通过它得到某个特定的标署名的子节点或后代节点；
var myList = document.getElementById("myList");var lis = myList.getElementsByTagName("li");console.log(lis); // dom.html:23 HTMLCollection(3)
自定义Element的方法：
Element和HTMLDocument等类型都像String和Array一样是类，它们不是布局函数，但它们有原型工具，可以自定义方法扩展它；
Element.prototype.next = function(){ if(this.nextElementSibling) return this.nextElementSibling; var sib = this.nextSibling; while(sib && sib.nodeType !== 1) sib = sib.nextSibling; return sib;}console.log(document.getElementById("mydiv").next());
Web前端开拓之Javascript-零点程序员-王唯
