jQuery DOM 操作方法对应的DOM API ——DOM 操作

小编推荐：掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..

英文原文：http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/愚人码头注：

 

• 原作者的写这文章的意图是让我们抛弃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中的大多数功能未使用，并且可以省略。

1. Creating Elements
2. Inserting Elements Before & After
3. Inserting Elements As Children
4. Moving Elements
5. Removing Elements
6. Adding & Removing CSS Classes
7. Adding/Removing/Changing Attributes
8. Adding & Changing Text Content
9. Adding/Updating Element Styles
10. Micro-libraries For More Help
11. Next

Creating Elements（创建元素）

jQuery

js 代码:

1. $('<div></div>');

DOM API

js 代码:

1. // IE 5.5+
2. document.createElement('div');

哇，很容易是吧。 jQuery为我们节省了几个直接，但几乎是不值一提的字节数。

Inserting Elements Before & After（在元素前后插入）

让我们创建一个元素并且在特定元素后插入。

比如初始状态是这样的：

html 代码:

1. <div id="1"></div>
2. <div id="2"></div>
3. <div id="3"></div>

… 我们希望创建一个新的元素，ID为’1.1’，并且插入到第一个和第二个DIV之间，比如说这样：

html 代码:

1. <div id="1"></div>
2. <div id="1.1"></div>
3. <div id="2"></div>
4. <div id="3"></div>

jQuery

js 代码:

1. $('#1').after('<div id="1.1"></div>');

DOM API

js 代码:

1. // IE 4+
2. document.getElementById('1')
3. .insertAdjacentHTML('afterend', '<div id="1.1"></div>');

愚人码头注：关于insertAdjacentHTML方法可以点这里查看更多

哈！，不用jQuery，在每个浏览器中也都很容易,仅仅依靠浏览器内置的方法。

Ok, 如果我们想要在第一个div之前插入一个新的元素，那么就这样：

html 代码:

1. <div id="0.9"></div>
2. <div id="1"></div>
3. <div id="2"></div>
4. <div id="3"></div>

jQuery

js 代码:

1. $('#1').before('<div id="0.9"></div>');

DOM API

js 代码:

1. // IE 4+
2. document.getElementById('1')
3. .insertAdjacentHTML('beforebegin', '<div id="0.9"></div>');

原生的DOM API的方法几乎是相同的，只是参数不同，jQuery的方法是不同的。

Inserting Elements As Children（作为子元素插入，内部插入）

比如，初始化的时候是这样的:

html 代码:

1. <div id="parent">
2. <div id="oldChild"></div>
3. </div>

…我们想要创建一个新元素并使其成为#parent元素的第一个子元素，就像这样：

html 代码:

1. <div id="parent">
2. <div id="newChild"></div>
3. <div id="oldChild"></div>
4. </div>

jQuery

js 代码:

1. $('#parent').prepend('<div id="newChild"></div>');

DOM API

js 代码:

1. // IE 4+
2. document.getElementById('parent')
3. .insertAdjacentHTML('afterbegin', '<div id="newChild"></div>');

…或创建一个新的元素，使之成为#parent的最后一个子元素：

html 代码:

1. <div id="parent">
2. <div id="oldChild"></div>
3. <div id="newChild"></div>
4. </div>

jQuery

js 代码:

1. $('#parent').append('<div id="newChild"></div>');

DOM API

js 代码:

1. // IE 4+
2. document.getElementById('parent')
3. .insertAdjacentHTML('beforeend', '<div id="newChild"></div>');

所有这一切看起来很像前面插入新元素。是很简单的，跨浏览器，而不用jQuery的任何帮助（或任何其他的库）。

Moving Elements（移动元素）

考虑下面的标记：

html 代码:

1. <div id="parent">
2. <div id="c1"></div>
3. <div id="c2"></div>
4. <div id="c3"></div>
5. </div>
6. <div id="orphan"></div>

如果我们想移动#orphan作为#parent的最后一个子元素？

结果就想这样:

html 代码:

1. <div id="parent">
2. <div id="c1"></div>
3. <div id="c2"></div>
4. <div id="c3"></div>
5. <div id="orphan"></div>
6. </div>

jQuery

js 代码:

1. $('#parent').append($('#orphan'));

DOM API

js 代码:

1. // IE 5.5+
2. document.getElementById('parent')
3. .appendChild(document.getElementById('orphan'));

不用jQuery也很简单。但是，如果我们想使#orphan作为#parent的第一个子元素，结果就想这样:

html 代码:

1. <div id="parent">
2. <div id="orphan"></div>
3. <div id="c1"></div>
4. <div id="c2"></div>
5. <div id="c3"></div>
6. </div>

jQuery

js 代码:

1. $('#parent').prepend($('#orphan'));

DOM API

js 代码:

1. // IE 5.5+
2. document.getElementById('parent')
3. .insertBefore(document.getElementById('orphan'), document.getElementById('c1'));

我们仍然用一行代码搞定，但不用jQuery有点不太直观，啰嗦。不过，并不算太糟糕。

Removing Elements（移除元素）

我们怎样才能从DOM中删除一个元素呢？比方说，我们知道一个ID为’foobar’的元素存在。让我们删除它！

jQuery

js 代码:

1. $('#foobar').remove();

DOM API

js 代码:

1. // IE 5.5+
2. document.getElementById('foobar').parentNode
3. .removeChild(document.getElementById('foobar'));

DOM API的方法肯定是有点冗长和丑陋，但它能正常运行！需要注意的是，我们没有必要知道他的直接父元素，这是很好的。

Adding & Removing CSS Classes（添加&移除CSS样式类）

我们有一个简单的元素:

html 代码:

1. <div id="foo"></div>

…让我们添加一个”bold”的CSS样式类到这个元素上，结果就像这样:

html 代码:

1. <div id="foo" class="bold"></div>

jQuery

js 代码:

1. $('#foo').addClass('bold');

DOM API

js 代码:

1. document.getElementById('foo').className += 'bold';

现在让我们移除这个CSS样式类:

jQuery

js 代码:

1. $('#foo').removeClass('bold');

DOM API

js 代码:

1. // IE 5.5+
2. document.getElementById('foo').className =
3. document.getElementById('foo').className.replace(/^bold$/, '');

同样的，不用jQuery仍然很简单，就是多了几个字节。

Adding/Removing/Changing Attributes（添加/移除/改变属性）

让我们从一个简单的元素开始，就像这样：

 

现在，让我们让这个 <div>实际上充当一个按钮功能。我们应该附加恰当的role属性，使这个元素更容易理解。

jQuery

js 代码:

1. $('#foo').attr('role', 'button');

DOM API

js 代码:

1. // IE 5.5+
2. document.getElementById('foo').setAttribute('role', 'button');

在这两种情况下，一个新的属性被创建，或现有的属性可以用相同的代码进行更新。

如果我们的<div>的行为有所变化，它不再作为按钮功能使用。事实上，这只是一个普通的<div>标记。那么让我们删除的role属性…

jQuery

js 代码:

1. $('#foo').removeAttr('role');

DOM API

js 代码:

1. // IE 5.5+
2. document.getElementById('foo').removeAttribute('role');

Adding & Changing Text Content（添加 & 修改文本内容）

假设我们有以下HTML标记:

html 代码:

1. <div id="foo">Hi there!</div>

…但是我们想将文本更新为 “Goodbye!”。

jQuery

js 代码:

1. $('#foo').text('Goodbye!');

请注意，您也可以轻松地设置元素的当前文本。

DOM API

js 代码:

1. // IE 5.5+
2. document.getElementById('foo').innerHTML = 'Goodbye!';
3.  
4. // IE 5.5+ but NOT Firefox
5. document.getElementById('foo').innerText = 'GoodBye!';
6.  
7. // IE 9+
8. document.getElementById('foo').textContent = 'Goodbye!';

上面两个属性都将返回当前元素的HTML/文本。

使用 innerText或textContent优势是可以将任何HTML转义，这是一个很大的优点，如果内容是用户提供的，你永远只希望得到所选元素内容的是文本。

Adding/Updating Element Styles（增加/更新元素的样式）

一般情况下，添加的内联的样式或使用JavaScript添加的样式是“code smell”，但在一些特殊的实例中你可能需要这么做。对于这些情况，我会告诉你如何能够使用jQuery和DOM API来完成。

html 代码:

1. <span id="note">Attention!</span>

..我们想要让他突出一点，所以让我们给他文字加粗。

jQuery

js 代码:

1. $('#note').css('fontWeight', 'bold');

DOM API

js 代码:

1. // IE 5.5+
2. document.getElementById('note').style.fontWeight = 'bold';

事实上，在这种情况下，我更喜欢的DOM API的方法。它似乎比jQuery的css的方法更加直观。

Micro-Libraries For More Help（更多帮助）

所以，你并不真的需要用jQuery来做跨浏览器的DOM操作！我了解jQuery可能使一些复杂的操作变得更容易一些，但是如果你真的只关心复杂的DOM操作，那么再考虑引用只专注于这一点的比较小的库。这里有两个不错的选择jBone 和 dom.js。用自己写的库也没什么不好。DOM操作并不像你想像的那么难。