一 js中的Dom操作處理
一 獲取元素
-
querySelector的性能會(huì)比get系列的要高鸠匀，因?yàn)榉祷氐氖莕odeList的快照须喂。 -
querySelector獲取的是快照喊式，所以當(dāng)元素更新的時(shí)候僻他，獲取的快照不會(huì)更新笆包。 -
querySelector系列是靜態(tài)的环揽，get系列是動(dòng)態(tài)的。 - 其中色查，
document.getElementById('mybtn')只有document才有
document.querySelector('.mybtn') /// 返回第一個(gè)與選擇器匹配的元素
document.querySelectorAll('.mybtn') // 返回所有與選擇器匹配的元素
document.getElementsByClassName('mybtn') // 返回所有className 為mybtn的元素
document.getElementsByTagName('div')
document.getElementById('mybtn')
document.getElementByName('mybtn') // 可以通過(guò)name獲取表單（表單的id與label的for要保持一致薯演。）
document.getElementByTagName('*') // 可以獲取頁(yè)面中所有的元素
轉(zhuǎn)載自知乎的一個(gè)demo,
因?yàn)?Demo 2 中的 lis 是一個(gè)動(dòng)態(tài)的 Node List， 每一次調(diào)用 lis 都會(huì)重新對(duì)文檔進(jìn)行查詢(xún)秧了，導(dǎo)致無(wú)限循環(huán)的問(wèn)題跨扮。而 Demo 1 中的 lis 是一個(gè)靜態(tài)的 Node List，是一個(gè) li 集合的快照验毡，對(duì)文檔的任何操作都不會(huì)對(duì)其產(chǎn)生影響衡创。
作者：簡(jiǎn)生
鏈接：https://www.zhihu.com/question/24702250/answer/28695133
來(lái)源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)晶通，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處璃氢。
// Demo 1
var ul = document.querySelectorAll('ul')[0],
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
// Demo 2
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
作者：簡(jiǎn)生
鏈接：https://www.zhihu.com/question/24702250/answer/28695133
來(lái)源：知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)狮辽，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處一也。
二 增刪class,使用classList
-
element.classList.add增加class -
element.classList.remove刪除class -
element.classList.containes是否包含class，返回true或者false -
element.classList.toggle切換class -
div.classList.replace("foo", "bar");替換class
三 直接修改整個(gè)class 喉脖，使用className
-
ele.className = 'foo goo do '設(shè)置ele的class,也可以用這個(gè)屬性去獲取ele的class
let elm = document.getElementById('item');
if(elm.className === 'active'){
elm.className = 'inactive';
} else {
elm.className = 'active';
}
四 自定義數(shù)據(jù)屬性
-
data-set,獲取自定義屬性的方法椰苟，ele.dataset.name - 主要用在跟蹤連接上會(huì)有用處，可以設(shè)置相應(yīng)的自定義屬性树叽，進(jìn)行跟蹤連接舆蝴。
<div id="myDiv" data-name="myDiv" data-id="myId"
data-my-custom-key="This is the value"></div>
// 獲取的方法
ele.dataset.name
ele.dataset.myCustomKey
ele.dataset.id
// 也可以直接定義
ele.dataset.name = ‘katherine’
ele.dataset.myCustomKey = ‘new value’
ele.dataset.id = 'newID'
五 獲取dom元素的屬性的方法，獲取某一個(gè)屬性atrr的方法有哪些呢题诵？
- ele.attr 設(shè)置獲取獲取元素的屬性,但是不能設(shè)置或者獲取自定義屬性
-
getAttribute(attr) setAttribute(attr,'new'),的方法獲取或者設(shè)置屬性
這兩種方法的比較和對(duì)比
- ele.attr 不能設(shè)置或者獲取自定義屬性,使用getAttribute相關(guān)方法則可以設(shè)置或者獲取自定義屬性洁仗。
- 當(dāng)使用ele.style 得到的是一個(gè)style的對(duì)象值，所以可以通過(guò)
ele.style.color獲得某一個(gè)樣式的值性锭；而使用getAttribute 相關(guān)方法獲取的style是字符串赠潦。 - 使用ele.attri獲取class的時(shí)候，是使用ele.className.而使用getAttribute方法的時(shí)候篷店，是直接使用ele.getAttribute('class')
<div id="myDiv" data-name="myDiv" data-id="myId" class='test'
data-my-custom-key="This is the value"></div>
var Odiv = document.getElementById('myDiv');
//
Odiv.id //myDiv
Odiv.className // test
//
Odiv.getAttribute('id') // myDiv
Odiv.getAttribute('class') .. //test
Odiv.getAttribute('data-name') // myDiv
六 使用ele.tagName的時(shí)候要注意
- 使用ele.tagName會(huì)返回該元素的標(biāo)簽名祭椰，但是要比較的話(huà)臭家，最好是用ele.tagName.toLowerCase === 'div'去比較和使用最好疲陕。
七 節(jié)點(diǎn)與元素節(jié)點(diǎn)
傳統(tǒng)的獲取不同的節(jié)點(diǎn)的方法有如下
- ele.childNodes // 返回某一個(gè)元素的所有子節(jié)點(diǎn),包括文本節(jié)點(diǎn)
- ele.previousSibling // 返回同級(jí)的前面的兄弟元素
- ele.nextSibling // 返回同級(jí)的后面的兄弟元素
- ele.firstChild // 返回第一個(gè)子元素
- ele.lastChild //返回最后一個(gè)子元素
新的不包含文本節(jié)點(diǎn)的獲取元素節(jié)點(diǎn)的方法方淤，不包含空元素節(jié)點(diǎn)和文本節(jié)點(diǎn)
- ele.childElementCount // 返回某一個(gè)元素的所有子節(jié)點(diǎn)的個(gè)數(shù)
- ele.previousElementSibling // 返回同級(jí)的前面的兄弟元素
- ele.nextElementSibling // 返回同級(jí)的后面的兄弟元素
- ele.firstElementChild // 返回第一個(gè)子元素
- ele.lastElementChild //返回最后一個(gè)子元素
七 設(shè)置和獲取 innerHTML innerText
相比于創(chuàng)建節(jié)點(diǎn)，再將節(jié)點(diǎn)append或者穿插到某一個(gè)節(jié)點(diǎn)處蹄殃，innerHTML還是比較高效率的携茂。
- 當(dāng)設(shè)置了一個(gè)元素的innerHTML和innerText之后，之前的內(nèi)部元素都會(huì)被清除诅岩，重新覆蓋讳苦。
- 使用
innerHTML的時(shí)候，要注意盡量減少使用的次數(shù)吩谦，因?yàn)轭l繁使用innerHTML會(huì)造成性能問(wèn)題鸳谜。
下面的例子就是，盡量少用innerHTML
for (var i = 0; i < length; i++) {
ul.innerHTML += "<li>" + values[i] + "</li>";
}
// 高效率的做法應(yīng)該是這樣子
var newHtml = ''
for (var i = 0; i < length; i++) {
newHtml += "<li>" + values[i] + "</li>";
}
ul.innerHTML = newHtml;
八 創(chuàng)建以及插入節(jié)點(diǎn)的相關(guān)方法式廷。
?注意： 如果使用appendChild的時(shí)候咐扭，插入的元素已經(jīng)是文檔的節(jié)點(diǎn)，那么這個(gè)文檔的節(jié)點(diǎn)就會(huì)從原來(lái)的位置偏移到新的位置去滑废，即文檔中的任何節(jié)點(diǎn)都不能同時(shí)出現(xiàn)在兩個(gè)位置蝗肪。
document.createElement('div') //創(chuàng)建一個(gè)div的節(jié)點(diǎn)。
father.appendChild(newNode) //在father節(jié)點(diǎn)的最后添加new節(jié)點(diǎn)
father.insertBefore(newNode,father.firstChild) // 將newnode插入到father的第一個(gè)子元素之前
