科技獵jQuery選擇器對應(yīng)的DOM API ——DOM 操作 – WEB前端開發(fā)
- 原作者的寫這文章的意圖是讓我們拋棄jQuery,You Don’t Need jQuery!提倡我們使用原生的JavaScript，所以收集整理了jQuery語法對應(yīng)的DOM API ；
- 原作者參數(shù)的原因可以看這里： http://blog.garstasio.com/you-dont-need-jquery/why-not/ ?，個(gè)人同意他的觀點(diǎn)，簡單的頁面或應(yīng)用，完全可以拋棄jQuery；但是出于開發(fā)效率和開發(fā)成本的考慮，我還是比較喜歡用jQuery。
- 本人翻譯或者說拷貝這篇文章的原因是：有一部分前端只會用jQuery，什么都網(wǎng)上找插件，甚至濫用jQuery，一點(diǎn)原生的JavaScript都不會寫。QQ上，微博私信經(jīng)常收到類似的基礎(chǔ)問題。前端就是折騰的活，要從基礎(chǔ)系統(tǒng)的學(xué)習(xí)。所以翻譯了這篇文章，希望對新手和不寫原生腳本的同學(xué)有一點(diǎn)點(diǎn)的幫助。
DOM Manipulation（DOM 操作）
我們已經(jīng)看過 如何輕松地選擇元素，而不依賴于jQuery 。但對于改變元素？怎么樣創(chuàng)建新的元素呢？如何在頁面移動(dòng)元素呢？當(dāng)你知道不用jQuery來實(shí)現(xiàn)這一切，或者更多，你可能會很高興。Web API為我們提供了所有我們所需要的工具。
你會看到j(luò)Query或任何其他庫對一些DOM操作的幫助是微不足道的。然而，其他人可能有點(diǎn)棘手。再次強(qiáng)調(diào)，我不是要抨擊的jQuery， 我也不會斷言jQuery是無用的或完全不必要的。這騙文章的目的是告訴你如何不用jQuery。如果你選擇這樣做。你可能會發(fā)現(xiàn)， 在許多情況下，大多數(shù)的腳本庫，像jQuery中的大多數(shù)功能未使用，并且可以省略。
- Creating Elements
- Inserting Elements Before & After
- Inserting Elements As Children
- Moving Elements
- Removing Elements
- Adding & Removing CSS Classes
- Adding/Removing/Changing Attributes
- Adding & Changing Text Content
- Adding/Updating Element Styles
- Micro-libraries For More Help
- Next
Creating Elements（創(chuàng)建元素）
jQuery
$('<div></div>');
DOM API
// IE 5.5+
document.createElement('div');
哇，很容易是吧。 jQuery為我們節(jié)省了幾個(gè)直接，但幾乎是不值一提的字節(jié)數(shù)。
Inserting Elements Before & After（在元素前后插入）
讓我們創(chuàng)建一個(gè)元素并且在特定元素后插入。
比如初始狀態(tài)是這樣的：
<div id="1"></div> <div id="2"></div> <div id="3"></div>
… 我們希望創(chuàng)建一個(gè)新的元素，ID為’1.1’，并且插入到第一個(gè)和第二個(gè)DIV之間，比如說這樣：
<div id="1"></div> <div id="1.1"></div> <div id="2"></div> <div id="3"></div>
jQuery
$('#1').after('<div id="1.1"></div>');
DOM API
// IE 4+
document.getElementById('1')
.insertAdjacentHTML('afterend', '<div id="1.1"></div>');
愚人碼頭注：關(guān)于 insertAdjacentHTML方法可以點(diǎn)這里 查看更多
哈！，不用jQuery，在每個(gè)瀏覽器中也都很容易,僅僅依靠瀏覽器內(nèi)置的方法。
Ok, 如果我們想要在第一個(gè)div之前插入一個(gè)新的元素，那么就這樣：
<div id="0.9"></div> <div id="1"></div> <div id="2"></div> <div id="3"></div>
jQuery
$('#1').before('<div id="0.9"></div>');
DOM API
// IE 4+
document.getElementById('1')
.insertAdjacentHTML('beforebegin', '<div id="0.9"></div>');
原生的DOM API的方法幾乎是相同的，只是參數(shù)不同，jQuery的方法是不同的。
Inserting Elements As Children（作為子元素插入，內(nèi)部插入）
比如，初始化的時(shí)候是這樣的:
<div id="parent"> <div id="oldChild"></div> </div>
…我們想要?jiǎng)?chuàng)建一個(gè)新元素并使其成為#parent元素的第一個(gè)子元素，就像這樣：
<div id="parent"> <div id="newChild"></div> <div id="oldChild"></div> </div>
jQuery
$('#parent').prepend('<div id="newChild"></div>');
DOM API
// IE 4+
document.getElementById('parent')
.insertAdjacentHTML('afterbegin', '<div id="newChild"></div>');
…或創(chuàng)建一個(gè)新的元素，使之成為#parent的最后一個(gè)子元素：
<div id="parent"> <div id="oldChild"></div> <div id="newChild"></div> </div>
jQuery
$('#parent').append('<div id="newChild"></div>');
DOM API
// IE 4+
document.getElementById('parent')
.insertAdjacentHTML('beforeend', '<div id="newChild"></div>');
所有這一切看起來很像前面插入新元素。是很簡單的，跨瀏覽器，而不用jQuery的任何幫助（或任何其他的庫）。
Moving Elements（移動(dòng)元素）
考慮下面的標(biāo)記：
<div id="parent"> <div id="c1"></div> <div id="c2"></div> <div id="c3"></div> </div> <div id="orphan"></div>
如果我們想移動(dòng)#orphan作為#parent的最后一個(gè)子元素？
結(jié)果就想這樣:
<div id="parent"> <div id="c1"></div> <div id="c2"></div> <div id="c3"></div> <div id="orphan"></div> </div>
jQuery
$('#parent').append($('#orphan'));
DOM API
// IE 5.5+
document.getElementById('parent')
.appendChild(document.getElementById('orphan'));
不用jQuery也很簡單。但是，如果我們想使#orphan作為#parent的第一個(gè)子元素，結(jié)果就想這樣:
<div id="parent"> <div id="orphan"></div> <div id="c1"></div> <div id="c2"></div> <div id="c3"></div> </div>
jQuery
$('#parent').prepend($('#orphan'));
DOM API
// IE 5.5+
document.getElementById('parent')
.insertBefore(document.getElementById('orphan'), document.getElementById('c1'));
我們?nèi)匀挥靡恍写a搞定，但不用jQuery有點(diǎn)不太直觀，啰嗦。不過，并不算太糟糕。
Removing Elements（移除元素）
我們怎樣才能從DOM中刪除一個(gè)元素呢？比方說，我們知道一個(gè)ID為’foobar’的元素存在。讓我們刪除它！
jQuery
$('#foobar').remove();
DOM API
// IE 5.5+
document.getElementById('foobar').parentNode
.removeChild(document.getElementById('foobar'));
DOM API的方法肯定是有點(diǎn)冗長和丑陋，但它能正常運(yùn)行！需要注意的是，我們沒有必要知道他的直接父元素，這是很好的。
Adding & Removing CSS Classes（添加&移除CSS樣式類）
我們有一個(gè)簡單的元素:
<div id="foo"></div>
…讓我們添加一個(gè)”bold”的CSS樣式類到這個(gè)元素上，結(jié)果就像這樣:
<div id="foo" class="bold"></div>
jQuery
$('#foo').addClass('bold');
DOM API
document.getElementById('foo').className += 'bold';
現(xiàn)在讓我們移除這個(gè)CSS樣式類:
jQuery
$('#foo').removeClass('bold');
DOM API
// IE 5.5+
document.getElementById('foo').className =
document.getElementById('foo').className.replace(/^bold$/, '');
同樣的，不用jQuery仍然很簡單，就是多了幾個(gè)字節(jié)。
Adding/Removing/Changing Attributes（添加/移除/改變屬性）
讓我們從一個(gè)簡單的元素開始，就像這樣：
現(xiàn)在，讓我們讓這個(gè)
<div>
實(shí)際上充當(dāng)一個(gè)按鈕功能。我們應(yīng)該附加恰當(dāng)?shù)? role
屬性，使這個(gè)元素更容易理解。
jQuery
$('#foo').attr('role', 'button');
DOM API
// IE 5.5+
document.getElementById('foo').setAttribute('role', 'button');
在這兩種情況下，一個(gè)新的屬性被創(chuàng)建，或現(xiàn)有的屬性可以用相同的代碼進(jìn)行更新。
如果我們的
<div>
的行為有所變化，它不再作為按鈕功能使用。事實(shí)上，這只是一個(gè)普通的
<div>
標(biāo)記。那么讓我們刪除的
role
屬性…
jQuery
$('#foo').removeAttr('role');
DOM API
// IE 5.5+
document.getElementById('foo').removeAttribute('role');
Adding & Changing Text Content（添加 & 修改文本內(nèi)容）
假設(shè)我們有以下HTML標(biāo)記:
<div id="foo">Hi there!</div>
…但是我們想將文本更新為 “Goodbye!”。
jQuery
$('#foo').text('Goodbye!');
請注意，您也可以輕松地設(shè)置元素的當(dāng)前文本。
DOM API
// IE 5.5+
document.getElementById('foo').innerHTML = 'Goodbye!';
// IE 5.5+ but NOT Firefox
document.getElementById('foo').innerText = 'GoodBye!';
// IE 9+
document.getElementById('foo').textContent = 'Goodbye!';
上面兩個(gè)屬性都將返回當(dāng)前元素的HTML/文本。
使用
innerText
或
textContent
優(yōu)勢是可以將任何HTML轉(zhuǎn)義，這是一個(gè)很大的優(yōu)點(diǎn)，如果內(nèi)容是用戶提供的，你永遠(yuǎn)只希望得到所選元素內(nèi)容的是文本。
Adding/Updating Element Styles（增加/更新元素的樣式）
一般情況下，添加的內(nèi)聯(lián)的樣式或使用JavaScript添加的樣式是 “code smell” ，但在一些特殊的實(shí)例中你可能需要這么做。對于這些情況，我會告訴你如何能夠使用jQuery和DOM API來完成。
<span id="note">Attention!</span>
..我們想要讓他突出一點(diǎn)，所以讓我們給他文字加粗。
jQuery
$('#note').css('fontWeight', 'bold');
DOM API
// IE 5.5+
document.getElementById('note').style.fontWeight = 'bold';
事實(shí)上，在這種情況下，我更喜歡的DOM API的方法。它似乎比jQuery的
css
的方法更加直觀。
Micro-Libraries For More Help（更多幫助）
所以，你并不真的需要用jQuery來做跨瀏覽器的DOM操作！我了解jQuery可能使一些復(fù)雜的操作變得更容易一些，但是如果你真的只關(guān)心復(fù)雜的DOM操作，那么再考慮引用只專注于這一點(diǎn)的比較小的庫。這里有兩個(gè)不錯(cuò)的選擇 jBone 和 dom.js 。用自己寫的庫也沒什么不好。DOM操作并不像你想像的那么難。
Next
下一篇：AJAX請求，敬請期待！
本文被轉(zhuǎn)載1次
首發(fā)媒體
| 轉(zhuǎn)發(fā)媒體