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ù)請不要用其他方法将谊,統(tǒng)一用getattribute,獲取對象屬性方括號(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對文檔做出修改后菇用,在通過瀏覽器的源代碼查看時(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)容合作請聯(lián)系作者
  • 序言:七十年代末鹅龄,一起剝皮案震驚了整個(gè)濱河市揩慕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌扮休,老刑警劉巖迎卤,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異玷坠,居然都是意外死亡蜗搔,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進(jìn)店門八堡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來樟凄,“玉大人,你說我怎么就攤上這事兄渺》炝洌” “怎么了?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長叔壤。 經(jīng)常有香客問我瞎饲,道長,這世上最難降的妖魔是什么炼绘? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任嗅战,我火速辦了婚禮,結(jié)果婚禮上俺亮,老公的妹妹穿的比我還像新娘驮捍。我一直安慰自己,他們只是感情好脚曾,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布东且。 她就那樣靜靜地躺著,像睡著了一般本讥。 火紅的嫁衣襯著肌膚如雪苇倡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天囤踩,我揣著相機(jī)與錄音,去河邊找鬼晓褪。 笑死堵漱,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的涣仿。 我是一名探鬼主播勤庐,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼好港!你這毒婦竟也來了愉镰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤钧汹,失蹤者是張志新(化名)和其女友劉穎丈探,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拔莱,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡碗降,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了塘秦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片讼渊。...
    茶點(diǎn)故事閱讀 40,742評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖尊剔,靈堂內(nèi)的尸體忽然破棺而出爪幻,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布挨稿,位于F島的核電站仇轻,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏叶组。R本人自食惡果不足惜拯田,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望甩十。 院中可真熱鬧船庇,春花似錦、人聲如沸侣监。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽橄霉。三九已至窃爷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間姓蜂,已是汗流浹背按厘。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留钱慢,地道東北人逮京。 一個(gè)月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像束莫,于是被迫代替她去往敵國和親懒棉。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容

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