寫在2021.這篇文章貌似是18年還是19年寫的 無比唏噓。。
好記性不如爛筆頭 還是要把自己還沒遺忘的東西那出來拿出來寫寫
寫在開頭: 路過的大神看看就好 ~~畢竟我只是一個(gè)小菜雞 。。自娛自樂那種 如果文章內(nèi)有錯(cuò)誤或者您有什么建議的話 肥腸歡迎您的批評指正~
那么就從現(xiàn)在開始吧~~沒法從頭開始寫 想到啥寫啥吧 嘻嘻~
-----------------------------------------------我是嚴(yán)肅的分割線-------------------------------------------
先提一嘴獲取和設(shè)置元素屬性吧 感覺和動(dòng)態(tài)添加元素關(guān)系還挺大的.....
獲取和設(shè)置元素屬性
先了解一下標(biāo)簽內(nèi)能操作的屬性 目前我知道的 a標(biāo)簽的href ,img的title、src ,input的placeholder這種 能通過元素直接調(diào)用 元素.屬性的 屬性 (聽起來很拗口。。語死早系列)
然后就是自定義標(biāo)屬性 舉個(gè)栗子 : aaa 我直接寫進(jìn)元素里面 aaa=“ ” 這種自己設(shè)置(自定義)的屬性 不能直接在js里通過 元素.aaa的方式調(diào)用
那么問題來了 我都能在標(biāo)簽上設(shè)置元素了 那肯定也能用啊 不然豈不是然并卵= =
所以就有下面這東西為我們排憂解難:
獲取元素
語法:元素.getAttribute(‘name’); name就是屬性的名字
設(shè)置元素
語法 :元素.setAttribute('name','value');
移除元素
語法 :元素.removeAttribute(‘name’);
舉栗:
比如說我在 input標(biāo)簽上來了個(gè)aaa屬性
<input type="text" aaa="hahaha">
那么我在js里 要這樣去操作他:
<script>
var input = document.querySelector('input');
var a =input.getAttribute('aaa'); //獲取
input.setAttribute('aaa','hahah');//設(shè)置
input.removeAttribute('aaa');//移除
</script>
當(dāng)然 這幾個(gè)標(biāo)簽還可以操作系統(tǒng)自帶標(biāo)簽屬性 :
<script>
var input = document.querySelector('input');
var b = input.getAttribute('type');
input.setAttribute('type','button');
</script>
注意:上面這幾個(gè)只能用于元素節(jié)點(diǎn)!
既然上面提到了節(jié)點(diǎn) 下面就寫寫節(jié)點(diǎn)相關(guān)的東西
節(jié)點(diǎn)的層級(jí)
根據(jù)節(jié)點(diǎn)的關(guān)系來獲取元素
- 節(jié)點(diǎn)的關(guān)系
1.父子關(guān)系
2.兄弟關(guān)系 - 根據(jù)子節(jié)點(diǎn)獲取父節(jié)點(diǎn)