閱讀《javascript高級程序設計》第10章的學習筆記。

要訪問元素的標簽名 nodeName屬性或 tagName屬性

<div id = "myDiv"></div>//js獲取元素及標簽名 var div = document.getElementById("myDiv"); console.log(div.tagName); //"DIV" console.log(div.nodeName); //"DIV"

其中要注意的是，HTML中標簽名始終以大寫表示，而XML有時與源代碼中保持一致

HTML元素

每個HTML元素都存在的標準特性

• id 元素在文檔中的唯一標識符

• title 有關元素的附加說明信息

• lang 元素內容的語言代碼

• dir 語言方向。值為"ltr"【從左至右】| "rtl"【從右至左】

• className 與元素的class特性對應。

獲取特性

• getAttribute()
  【注意】傳遞給getAttribute的特性名與實際特性名相同（不區分大小寫）。獲取class需傳入"class"而不是"className"。可獲取自定義特性。通常只有在取得自定義特性值的情況下使用getAttribute()方法。【特殊情況如下】

  • style 通過getAttribute訪問時返回的style特性值中包含的是css文本，通過屬性訪問則會返回一個對象

  • onclick 返回相應代碼的字符串 通過屬性訪問時會返回一個js函數。

---

• setAttribute()
  如果特性已經存在，會以指定值替換現有的值；如果特性不存在，則創建該屬性并設置相應值。

【通過這個方法設置的特性名會統一轉為小寫形式】
【可以直接給屬性賦值設置特性的值，具體看下面代碼】
【為DOM元素添加一個自定義屬性，該屬性不會自動成為元素的特性，但自定義屬性會在IE中被當作元素特性】

div.setAttribute("id","myId"); div.setAttribute("class","myClass"); //可以直接給屬性賦值設置特性的值 div.id="myId"; // div.mycolor="red"; div.getAttribute("mycolor");//null(IE除外)

---

• removeAttribute()
  用于徹底刪除元素特性。不僅會清除特性的值，也會從元素中完全刪除特性。

---

創建元素

• document.createElement()只接受一個參數【要創建元素的標簽名】

• 將新元素添加到文檔樹

  • appendChild()

  • insertBefore()

  • replaceChild(0

• 需要注意的問題

  • 不能設置動態創建的<iframe>元素的name特性

  • 不能通過表單的reset方法重設動態創建的<input>元素

  • 動態創建的type特性值為"reset"的<button>元素重設不了表單

  • 動態創建的一批name相同的單選按鈕彼此毫無關系。

• 針對上述問題的解決方案：在createElement中指定完整的HTML標簽來解決。

  var iframe = document.createElement("<iframe name=\"myframe\"></iframe>");

總結

以上是生活随笔為你收集整理的关于Element学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。