本內容是《Web前端開發之Javascript影片》的課件，請配合大師哥《Javascript》影片課程學習。
Element型別用於表示XML或HTML元素，提供了對元素標籤名、子節點及特性的訪問；
Element類繼承自Node介面；它繼承了Node介面中的所有屬性和方法，比如parentNode、childNode等；同時，它在Node介面的基礎上擴充套件了自己的屬性和方法；
Element型別的特徵：
nodeType值為1；nodeName的值為元素的標籤名；nodeValue的值為null；parentNode可能是Document或Element；其子節點可能是Element、Text,Comment、ProcessingInstruction、CATASection或EntityReference；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); // NodeListElement的屬性：
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_classremoveAttribute(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)：向列表中新增或替換特性節點；
可以透過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()方法；
元素可以有任意數目的子節點和後代節點，這些子節點可能是元素、文字、註釋處處理指令；但HTML中的空白也會被解析為文字節點；因此在執行某項操作時，要先檢查一下nodeType屬性；
var myList = document.getElementById("myList");var lis = myList.getElementsByTagName("li");console.log(lis); // dom.html:23 HTMLCollection(3)自定義Element的方法：
Element和HTMLDocument等型別都像String和Array一樣是類，它們不是建構函式，但它們有原型物件，可以自定義方法擴充套件它；