removeAttribute getAttribute setAttribute(一)

1.removeAttribute() 方法刪除指定的屬性。

注:removeAttributeNode() 方法從元素中刪除指定的屬性節(jié)點(diǎn)。
簡單的來講,removeAttribute() 移除元素內(nèi)的屬性;
菜鳥教程說:Internet Explorer不支持removeAttribute方法。但我測了一下發(fā)現(xiàn)在IE8及以上都沒問題

<style>
  .aaa{
    color:red;
  }
</style>
</head>
<body>
  <h1 class="aaa">Hello World</h1>
  <button onclick="myFunction()">點(diǎn)擊</button>
  <script>
  function myFunction()
  {
  document.getElementsByTagName("h1")[0].removeAttribute("class");     //當(dāng)點(diǎn)擊的時(shí)候,h1的紅色會(huì)變成黑色(默認(rèn)黑色)應(yīng)為移除了class這個(gè)屬性
  }
  </script>
</body>

2.getAttribute() 方法通過名稱獲取屬性的值。(屬性不存在時(shí)返回null)

注:getAttributeNode() 方法從當(dāng)前元素中通過名稱獲取屬性節(jié)點(diǎn)。

<style>
    .aaa{
      color:red;
    }
</style>
</head>
<body>
  <h1 class="aaa">Hello World</h1>
  <button onclick="myFunction()">點(diǎn)擊</button>
  <script>
    function myFunction()
    {
    var h1=document.getElementsByTagName("h1")[0];
    alert(h1.className);                    //兩者都能有效果    aaa
    alert(h1.getAttribute("class"));      //             aaa
    }
  </script>
 </body>

獲取 dom 節(jié)點(diǎn)數(shù)據(jù)請(qǐng)不要用其他方法,統(tǒng)一用getattribute,獲取對(duì)象屬性方括號(hào)是兼容性最廣的,點(diǎn)號(hào)方便,但是低版本 ie 有兼容性問題。良好的編程習(xí)慣是減少bug的保證

3.setAttribute() 方法添加指定的屬性,并為其賦指定的值。

*注意:如果這個(gè)指定的屬性已存在,則僅設(shè)置/更改值。
和getAttribute一樣,setAttribute只是用于元素節(jié)點(diǎn)

<body>
  <input value="OK">
  <p>點(diǎn)擊按鈕來設(shè)置按鈕的 type 屬性。</p>
  <button onclick="myFunction()">點(diǎn)擊</button>
  <script>
    function myFunction()
    {
    document.getElementsByTagName("input")[0].setAttribute("type","button");  
    }
  </script>
</body>
點(diǎn)擊前.png
點(diǎn)擊后.png

Internet Explorer 8 以及更早的版本不支持此方法。

通過setAttribute對(duì)文檔做出修改后,在通過瀏覽器的源代碼查看時(shí)看到的仍然是改變前的屬性值。這種“表里不一”的現(xiàn)象源自DOM的工作模式:先加載文檔的靜態(tài)內(nèi)容,在動(dòng)態(tài)刷新,動(dòng)態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。
-DOM編程藝術(shù)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會(huì)使用HT...
    凜0_0閱讀 2,900評(píng)論 0 8
  • Element 類型 除了 Document 類型之外,Element 類型就要算是 Web 編程中最常用的類型了...
    劼哥stone閱讀 703評(píng)論 0 3
  • 一、樣式篇 第1章 初識(shí)jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,662評(píng)論 0 44
  • 本章內(nèi)容 理解包含不同層次節(jié)點(diǎn)的 DOM 使用不同的節(jié)點(diǎn)類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對(duì) HT...
    悶油瓶小張閱讀 764評(píng)論 0 1
  • 看著別人都在進(jìn)步,我慚愧無比,我羨慕嫉妒,我此時(shí)心情非常低落有種想辭職的欲望,但是我有什么資本有什么資格,一次次的...
    elephon閱讀 457評(píng)論 0 0

友情鏈接更多精彩內(nèi)容