抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/
我的Blog:http://cabbit.me/you-dont-need-jquery/manipulation/
在上一篇文章里我们讨论了如何在没有jQuery的支持下选择元素,这次我们来聊一聊如何使用DOM API创建新元素、修改已有元素的属性或者移动元素的位置。原生的浏览器API已经给我们提供了DOM操作的所有功能,我们能够不借助jQuery或者其他函数库的帮助就完成这些。
当然有些操作会显得比较冗长,所以我必须再强调一遍,这系列文章的用意不是让开发人员不分情况的彻底丢弃jQuery,而是希望我们能够在没有jQuery的帮助时也能完成这些任务。在实际生产中我们依然会使用各种函数库,但是我们可以仔细选择,使用更加适合我们需要的库,而不是部分情况的把整个jQuery都加载到页面里。
创建元素
jQuery
如果我们要创建一个 div 元素:
$('<div></div>');
DOM API,createElement这个很常见了:
// IE 5.5+
document.createElement('div');
或许有人会说,jQuery省去了好些字符。这没错,但确实要依照工程实际而定,如果我们只是用到jQuery的小部分功能,那省去的字数可能还没有jQuery自身的文件大。
在元素前/后插入元素
假设我们已经有了如下HTML结构:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
现在我们要在 id=1 的 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,有Web开发新人会认为链式调用是jQuery的专利,事实上没有jQuery我们也可以使用链式调用:
// IE 4+
document.getElementById('1')
.insertAdjacentHTML('afterend', '<div id="1.1"></div>');
哈哈,这可能是DOM API里不多的从IE 4开始就没怎么变化过的函数了~
假设我们希望在 id=1 的 div 前面插入一个 id=0.9 的新 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>');
同在后面插入相比,只有一个参数不同。不得不说,看到一个函数被IE 4以上所有的浏览器都支持的时候,作为一个前端开发人员我还是挺惊讶的 _
作为子元素插入
假设我们已经有了如下HTML结构:
<div id="parent">
<div id="oldChild"></div>
</div>
现在我们希望在 parent 容器的第一个子元素之前插入一个新的 div 元素,就象这样:
<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>');
如果我们希望在第一个子元素的后面插入那个 div 元素,期望得到这样的结构:
<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>');
这一节看上去和上一节差不多,总之我们发现使用DOM API操作元素也不是很复杂,而且到目前为止对浏览器的兼容性都很不错,包括古老的IE浏览器也能很好的适应。
移动元素
假设有以下HTML结构:
<div id="parent">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
<div id="orphan"></div>
在这里希望把 #orphan 移动到 parent 容器中作为最后一个元素,期望的HTML是:
<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'));
也还是蛮好记的对不对?如果我们希望把 #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'));
直接使用DOM API看上去确实很长,这都是拜 document.getElementById 所赐。
删除元素
假设我们的HTML元素中有一个 id="foobar" 的元素,我们希望把他从DOM树中删除:
jQuery
$('#foobar').remove();
DOM API
// IE 5.5+
document.getElementById('foobar')
.parentNode.removeChild(document.getElementById('foobar'));
添加/删除 CSS Classes
假设在HTML中有这样一个 div :
<div id="foo"></div>
我们希望给他加入名为 bold 的CSS Class,期望DOM变成这样:
<div id="foo" class="bold"></div>
jQuery
$('#foo').addClass('bold');
DOM API
document.getElementById('foo').className += 'bold';
当然我们还可以把刚刚加上的Class删除掉:
jQuery
$('#foo').removeClass('bold');
DOM API
// IE 5.5+
document.getElementById('foo').className =
document.getElementById('foo').className.replace(/^bold$/, '');
添加/删除/修改元素属性
仍然从简单的 foo 元素开始:
<div id="foo"></div>
我们希望在 div 元素上设定 role="button" 来让它能够充当一个 button,这样能够在可访问性设备(屏幕阅读器等)上获得较好的可访问性:
jQuery
$('#foo').attr('role', 'button');
DOM API
// IE 5.5+
document.getElementById('foo').setAttribute('role', 'button');
这两种方法都可以识别元素是否已经具备了这个属性,然后自动创建/更新这个属性。现在让我们再把这个 role 删除掉(我都觉得自己好烦…)
jQuery
$('#foo').removeAttr('role');
DOM API
// IE 5.5+
document.getElementById('foo').removeAttribute('role');
添加/修改内容
这次的 foo 元素比原来复杂多了(_):
<div id="foo">Hi there!</div>
如果要把 foo 的内容改成 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!';
最常见的 innerHTML 属性在各种条件下都工作的很好。但是 innerText 和 textContent 的好处在于他们只是处理目标元素内的文字,而不是像 innerHTML 一样直接插入标签。当插入的内容是用户输入的内容时,这样能够一定程度上避免注入的问题。
添加/修改 Style
一般来说,直接用JavaScript脚本操作DOM元素的 style 是代码中的“坏味道”,当然就像 goto 一样我们总会有些时候需要这样做。
假设HTML的结构是这样的:
<span id="note">Attention!</span>
可以通过JavaScript代码让这段文字变得醒目一些,比如变成粗体(或者闪烁三下/转体三圈):
jQuery
$('#note').css('fontWeight', 'bold');
DOM API
// IE 5.5+
document.getElementById('note').style.fontWeight = 'bold';
这里很难得我比较喜欢DOM API写法,style.fontWeight 看上去比较像是正常的对象-属性的逻辑。
专用的DOM操作库
看到这里比上一篇[选择元素]({% post_url /you-dont-need-jquery/2014-12-21-selector %}/)要容易一些,在IE 6及以上的版本中跨浏览器使用DOM API操作元素相对比较容易。jQuery确实使得冗长的DOM API变得简单易懂,但是如果只是把jQuery用作DOM操作,似乎还是有些大材小用。我们可以试试jBone和dom.js这两个库,他们都可以在跨浏览器的情况下很好的兼容DOM元素操作,著名的Backbone中使用的正是前者。很多使用jQuery的开发人员觉得原生的DOM API不堪入目,但是我想他们并不真的掌握DOM API,其实DOM API并没有比jQuery复杂太多。
如果我有漏掉什么重要的DOM元素操作,请在评论中告诉我。
抛弃jQuery:DOM API之操作元素的更多相关文章
- 抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery -- DOM节点的操作
DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...
- 【JS】Intermediate7:jQuery:DOM API
1.jQuery also makes performing actions on many elements at the same time simple 2.eg:$('.note').css( ...
- Jquery Dom节点常用操作
select 标签 form提交的时候 提交select标签选中的value值 1. 添加项 $("#select_id").append("<option val ...
- 抛弃jQuery:Why?
原文链接:http://blog.garstasio.com/you-dont-need-jquery/ 我的Blog:http://cabbit.me/you-dont-need-jquery/wh ...
- jQuery DOM
请尊重知识,请尊重原创 更多资料参考请见 http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1 jQuer ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
随机推荐
- node中的cmd规范
你应该熟悉nodejs模块中的exports对象,你可以用它创建你的模块.例如:(假设这是rocker.js文件) exports.name = function() { console.log('M ...
- 【开源】.Net 动态脚本引擎NScript
开源地址: https://git.oschina.net/chejiangyi/NScript 开源QQ群: .net 开源基础服务 238543768 .Net 动态脚本引擎 NScript ...
- webstorm下载&&安装过程&&打开项目
一.webstorm下载 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为"Web前端开发神器"."最强大的HT ...
- 拼图小游戏之计算后样式与CSS动画的冲突
先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...
- bzoj3207--Hash+主席树
题目大意: 给定一个n个数的序列和m个询问(n,m<=100000)和k,每个询问包含k+2个数字:l,r,b[1],b[2]...b[k],要求输出b[1]~b[k]在[l,r]中是否出现. ...
- iOS -- CocoaPods
CocoaPods 是什么? CocoaPods 是一个负责管理 iOS 项目中第三方开源库的工具.CocoaPods 的项目源码在 GitHub( https://github.com/CocoaP ...
- 在开源中国(oschina)git中新建标签(tags)
我今天提交代码到主干上面,本来想打个标签(tags)的. 因为我以前新建过标签(tags),但是我现在新建的时候不知道入库在哪了.怎么找也找不到了. 从网上找资料也没有,找客服没有人理我,看到一个交流 ...
- FineReport如何用JDBC连接阿里云ADS数据库
在使用FineReport连接阿里云的ADS(AnalyticDB)数据库,很多时候在测试连接时就失败了.此时,该如何连接ADS数据库呢? 我们只需要手动将连接ads数据库需要使用到的jar放置到%F ...
- angularJS(6)
angularJS(6) 一:angularJs的事件. 1.ng-click指令定义了AngularJS点击事件. <div ng-app="myapp" ng-contr ...
- ReSharper详解Index0
JetBrains ReSharper可以帮助Visual Studio用户编写出更好的代码.支持对C#,VB.NET,XAML,JavaScript,TypeScript,JSON,XML,HTML ...