關(guān)于Element學(xué)習(xí)筆記

vslam 發(fā)布于2019-08-19 18:13 / 1351人閱讀

摘要：閱讀高級程序設(shè)計(jì)第章的學(xué)習(xí)筆記。獲取特性注意傳遞給的特性名與實(shí)際特性名相同不區(qū)分大小寫。獲取需傳入而不是。不僅會清除特性的值，也會從元素中完全刪除特性。針對上述問題的解決方案在中指定完整的標(biāo)簽來解決。

閱讀《javascript高級程序設(shè)計(jì)》第10章的學(xué)習(xí)筆記。

要訪問元素的標(biāo)簽名 nodeName屬性或 tagName屬性



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

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

HTML元素

每個(gè)HTML元素都存在的標(biāo)準(zhǔn)特性

id 元素在文檔中的唯一標(biāo)識符

title 有關(guān)元素的附加說明信息

lang 元素內(nèi)容的語言代碼

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

className 與元素的class特性對應(yīng)。

獲取特性

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

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

onclick 返回相應(yīng)代碼的字符串通過屬性訪問時(shí)會返回一個(gè)js函數(shù)。

setAttribute()
如果特性已經(jīng)存在，會以指定值替換現(xiàn)有的值；如果特性不存在，則創(chuàng)建該屬性并設(shè)置相應(yīng)值。

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

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

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

創(chuàng)建元素

document.createElement()只接受一個(gè)參數(shù)【要創(chuàng)建元素的標(biāo)簽名】

將新元素添加到文檔樹

appendChild()

insertBefore()

replaceChild(0

需要注意的問題

不能設(shè)置動態(tài)創(chuàng)建的元素的name特性 不能通過表單的reset方法重設(shè)動態(tài)創(chuàng)建的<input>元素 動態(tài)創(chuàng)建的type特性值為"reset"的<button>元素重設(shè)不了表單 動態(tài)創(chuàng)建的一批name相同的單選按鈕彼此毫無關(guān)系。 針對上述問題的解決方案：在createElement中指定完整的HTML標(biāo)簽來解決。 <pre>var iframe = document.createElement("<iframe name="myframe">");