常用 DOM 方法比较

innerText 对比 textContent

总结如下:

  • innerText 获取的文字的换行符依然保留;
  • innerText 无法获取隐藏文字;
  • innerText 性能要相对差一些;

innerText 由于存在诸多特别的特性、以及兼容性差异,以及性能方面问题,以及实际开发的需求的考量,不推荐使用,推荐使用 textContent 获取文本内容

var text = dom.textContent

如果你的项目还需要兼容 IE8 浏览器,则使用下面的代码:

var text = dom.textContent || dom.innerText

注:vue 的 v-text 指令就是更新元素的 textContent

getAttribute 对比 dataset 对象

例如,有如下 HTML:

<button id="button" data-author="zhangxinxu">作者是谁?</button>

使用 getAttribute 和 dataset 对象都能获取 data-author 属性值:

button.getAttribute('data-author') // zhangxinxu
button.dataset.author // zhangxinxu

差别在于大小写敏感的区别,getAttribute 方法是无视大小写的,而 dataset 对象必需要使用小写,例如:

<button id="button" data-AUTHOR="zhangxinxu">作者是谁?</button>
button.getAttribute('DATA-author') // zhangxinxu
button.dataset.AUTHOR // undefined
button.dataset.author // zhangxinxu

如果自定义属性包含多个词组,则 dataset 对象属性值需要使用驼峰命名获取

<button id="button" data-article-author="zhangxinxu">感谢阅读!</button>
button.getAttribute('data-article-author') // zhangxinxu
button.dataset.articleAuthor // zhangxinxu

getElementById 对比 querySelector

一般情况下这两个方法是等效的,但推荐使用 getElementById() 方法,因为这个 API 的容错性最强,不容易导致 JS 运行中断。

假设某个元素的 ID 是未知的,通过参数传过来的,但是这个字符串参数可能各种各样,假设这个字符串是’thanksForShare!’,此时分别运行下面的代码:

document.getElementById('thanksForShare!') // 正常运行
document.querySelector('#thanksForShare!') // 报错

结果 getElementById() 方法安全地返回了 null,但是 querySelector() 方法直接报错了:

VM309:1 Uncaught DOMException: Failed to execute ‘querySelector’ on ‘Document’: ‘#thanksForShare!’ is not a valid selector.

也就是说,在使用 querySelector() 方法的时候,我们需要对里面的选择器进行合法性校验,或者 try…catch 处理,否则就会影响整个 JavaScript 代码的运行。因此优先使用 getElementById() 方法去获取 DOM 元素

暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇