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 元素。