我们已经看过 如何轻松地选择元素,而不依赖于jQuery 。但对于改变元素?怎么样创建新的元素呢?如何在页面移动元素呢?当你知道不用jQuery来实现这一切,或者更多,你可能会很高兴。Web API为我们提供了所有我们所需要的工具。
你会看到jQuery或任何其他库对一些DOM操作的帮助是微不足道的。然而,其他人可能有点棘手。再次强调,我不是要抨击的jQuery, 我也不会断言jQuery是无用的或完全不必要的。这骗文章的目的是告诉你如何不用jQuery。如果你选择这样做。你可能会发现, 在许多情况下,大多数的脚本库,像jQuery中的大多数功能未使用,并且可以省略。
$('<div></div>');
// IE 5.5+ document.createElement('div');
哇,很容易是吧。 jQuery为我们节省了几个直接,但几乎是不值一提的字节数。
让我们创建一个元素并且在特定元素后插入。
比如初始状态是这样的:
<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>
$('#1').after('<div id="1.1"></div>');
// 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>
$('#1').before('<div id="0.9"></div>');
// IE 4+ document.getElementById('1') .insertAdjacentHTML('beforebegin', '<div id="0.9"></div>');
原生的DOM API的方法几乎是相同的,只是参数不同,jQuery的方法是不同的。
比如,初始化的时候是这样的:
<div id="parent"> <div id="oldChild"></div> </div>
…我们想要创建一个新元素并使其成为#parent元素的第一个子元素,就像这样:
<div id="parent"> <div id="newChild"></div> <div id="oldChild"></div> </div>
$('#parent').prepend('<div id="newChild"></div>');
// IE 4+ document.getElementById('parent') .insertAdjacentHTML('afterbegin', '<div id="newChild"></div>');
…或创建一个新的元素,使之成为#parent的最后一个子元素:
<div id="parent"> <div id="oldChild"></div> <div id="newChild"></div> </div>
$('#parent').append('<div id="newChild"></div>');
// IE 4+ document.getElementById('parent') .insertAdjacentHTML('beforeend', '<div id="newChild"></div>');
所有这一切看起来很像前面插入新元素。是很简单的,跨浏览器,而不用jQuery的任何帮助(或任何其他的库)。
考虑下面的标记:
<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>
$('#parent').append($('#orphan'));
// 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>
$('#parent').prepend($('#orphan'));
// IE 5.5+ document.getElementById('parent') .insertBefore(document.getElementById('orphan'), document.getElementById('c1'));
我们仍然用一行代码搞定,但不用jQuery有点不太直观,啰嗦。不过,并不算太糟糕。
我们怎样才能从DOM中删除一个元素呢?比方说,我们知道一个ID为’foobar’的元素存在。让我们删除它!
$('#foobar').remove();
// IE 5.5+ document.getElementById('foobar').parentNode .removeChild(document.getElementById('foobar'));
DOM API的方法肯定是有点冗长和丑陋,但它能正常运行!需要注意的是,我们没有必要知道他的直接父元素,这是很好的。
我们有一个简单的元素:
<div id="foo"></div>
…让我们添加一个”bold”的CSS样式类到这个元素上,结果就像这样:
<div id="foo" class="bold"></div>
$('#foo').addClass('bold');
document.getElementById('foo').className += 'bold';
现在让我们移除这个CSS样式类:
$('#foo').removeClass('bold');
// IE 5.5+ document.getElementById('foo').className = document.getElementById('foo').className.replace(/^bold$/, '');
同样的,不用jQuery仍然很简单,就是多了几个字节。
让我们从一个简单的元素开始,就像这样:
现在,让我们让这个
<div>
实际上充当一个按钮功能。我们应该附加恰当的
role
属性,使这个元素更容易理解。
$('#foo').attr('role', 'button');
// IE 5.5+ document.getElementById('foo').setAttribute('role', 'button');
在这两种情况下,一个新的属性被创建,或现有的属性可以用相同的代码进行更新。
如果我们的
<div>
的行为有所变化,它不再作为按钮功能使用。事实上,这只是一个普通的
<div>
标记。那么让我们删除的
role
属性…
$('#foo').removeAttr('role');
// IE 5.5+ document.getElementById('foo').removeAttribute('role');
假设我们有以下HTML标记:
<div id="foo">Hi there!</div>
…但是我们想将文本更新为 “Goodbye!”。
$('#foo').text('Goodbye!');
请注意,您也可以轻松地设置元素的当前文本。
// 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转义,这是一个很大的优点,如果内容是用户提供的,你永远只希望得到所选元素内容的是文本。
一般情况下,添加的内联的样式或使用JavaScript添加的样式是 “code smell” ,但在一些特殊的实例中你可能需要这么做。对于这些情况,我会告诉你如何能够使用jQuery和DOM API来完成。
<span id="note">Attention!</span>
..我们想要让他突出一点,所以让我们给他文字加粗。
$('#note').css('fontWeight', 'bold');
// IE 5.5+ document.getElementById('note').style.fontWeight = 'bold';
事实上,在这种情况下,我更喜欢的DOM API的方法。它似乎比jQuery的
css
的方法更加直观。
所以,你并不真的需要用jQuery来做跨浏览器的DOM操作!我了解jQuery可能使一些复杂的操作变得更容易一些,但是如果你真的只关心复杂的DOM操作,那么再考虑引用只专注于这一点的比较小的库。这里有两个不错的选择 jBone 和 dom.js 。用自己写的库也没什么不好。DOM操作并不像你想像的那么难。
下一篇:AJAX请求,敬请期待!