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