JSDOMAPI有些API功能可以互相替换，其实还是有细节区别的。注意：本文中的这些比较不考虑兼容性差异。1、innerText和textContent的比较，之前有一篇文章介绍过。详见：《JSDOMinnerText和textContent的区别》。大体总结就是：innerText获取到的文本的换行符依然保留；innerText无法获取隐藏文本；innerText的性能比较差；具体测试可以参考上述文章，这里不再赘述。2.GetAttributevsdatasetobject例如有如下HTML：作者是谁？getAttribute和dataset对象都可以用来获取data-author属性值，例如：//结果是：zhangxinxubutton.getAttribute('data-author');//结果也是：zhangxinxubutton。数据集.author;如果你对数据集对象有点陌生，可以参考我差不多10年前写的这篇文章：《HTML5自定义属性对象数据集简介》。乍一看，在获取data-*自定义属性的场景下，getAttribute和dataset对象似乎是等价的。其实两者还是有区别的。区别在于区分大小写。getAttribute方法忽略大小写。例如：作者是谁？//结果是：zhangxinxubutton.getAttribute('DATA-author');//结果是：undefinedbutton.dataset.AUTHOR;截图：本例中，如果想让dataset对象正确获取data-AUTHOR属性值，需要使用小写：//结果为：zhangxinxubutton.dataset.author;如果自定义属性包含多个短语，则需要使用驼峰式获取数据集对象的属性值，例如：感谢阅读！//结果为：zhangxinxubutton.getAttribute('data-article-author');button.dataset.articleAuthor;并且只能使用驼峰命名方式，例如下面的语句仍然返回undefined：//结果为：undefinedbutton.dataset['article-author'];运行结果如下图所示：3.GetElementById比较querySelector知道一个元素的ID是'thanksForShare'，下面两行DOMAPI返回的结果是一样的：//结果是：truedocument。getElementById('thanksForShare')===document.querySelector('#thanksForShare')Chrome控制台运行，结果如下：这样，getElementById和querySelector对于通过ID选择器获取的元素的方法似乎是等价的，其中一个用一个就看心情，是这样的吗？事实上，它不是。推荐使用getElementById()方法，因为这个API容错性最强，不容易导致JS运行中断。假设一个元素的ID未知，通过参数传递，但是这个字符串参数可能是多种多样的，假设这个字符串是'thanksForShare!'，此时分别运行如下代码：//结果是什么？document.getElementById('thanksForShare!');document.querySelector('#thanksForShare!');结果getElementById()方法安全返回null，querySelector()方法却直接报错：VM309:1UncaughtDOMException:Failedtoexecute'querySelector'on'Document':'#thanksForShare!'不是有效的选择器。眼见为实，特意跑来给大家看看：也就是说，在使用querySelector()方法的时候，我们需要对里面的选择器进行合法性验证，或者try...catch处理，否则会影响整个JavaScript代码的运行。麻烦！因此，如果条件允许，首选getElementById()方法获取DOM元素。4.Appendvs.appendChildappend()API方法其实前面已经介绍过了。它与许多API一起引入。你可能没有注意到它。就说到这里吧。对于节点来说，append和appendChild的作用基本相同。例如：让div=document.createElement('div');div.content='欢迎分享到你的朋友圈';//下面两行和document.body.append(div)作用相同;//等同于document.body.appendChild(div);可以在元素后面添加DOM节点元素，包括文本节点、注释节点、元素等。区别在于：append()方法可以一次追加多个元素，例如：dom.append(node1,node2,node3,...)appendChild方法一次只能追加一个元素。append()方法还可以附加字符串（使用自动HTML转义）。例如：document.body.append('','');最后一页出现的不是图片，而是相关的转义HTML字符串，如下图：5.scrollIntoView和scrollIntoViewIfNeeded的区别scrollIntoView和scrollIntoViewIfNeeded方法主要有2点：行为上的区别如果元素已经在视口，执行scrollIntoViewIfNeeded()方法时不会滚动和定位页面。语法差异scrollIntoView()设置滚动定位时支持是否平滑滚动，参数smooth。详见我的文章《CSSscroll-behavior和JSscrollIntoView让页面滚动流畅》。scrollIntoViewIfNeeded()的滚动定位只能是硬效果。并且scrollIntoView()支持精确设置定位元素是位于视口上方、下方还是中间。语法参数使用如下：element.scrollIntoView({//也支持起始值和结束值block:'center',//平滑滚动行为:'smooth'});而scrollIntoViewIfNeeded()的定位位置比较粗糙，不能精确，它只支持一个布尔参数值，true表示居中的JSDOMAPI中的一些API函数可以相互替换，其实在细节上是有区别的.注意：本文中的这些比较不考虑兼容性差异。1、innerText和textContent的比较，之前有一篇文章介绍过。详见：《JSDOMinnerText和textContent的区别》。大体总结就是：innerText获取到的文本的换行符依然保留；innerText无法获取隐藏文本；innerText的性能比较差；具体测试可以参考上述文章，这里不再赘述。2.GetAttributevsdatasetobject例如有如下HTML：作者是谁？getAttribute和dataset对象都可以用来获取data-author属性值，例如：//结果是：zhangxinxubutton.getAttribute('data-author');//结果也是：zhangxinxubutton。数据集.author;如果你对数据集对象有点陌生，可以参考我差不多10年前写的这篇文章：《HTML5自定义属性对象数据集简介》。乍一看，在获取data-*自定义属性的场景下，getAttribute和dataset对象似乎是等价的。其实两者还是有区别的。区别在于区分大小写。getAttribute方法忽略大小写。例如：作者是谁？//结果是：zhangxinxubutton.getAttribute('DATA-author');//结果是：undefinedbutton.dataset.AUTHOR;截图：本例中，如果想让dataset对象正确获取data-AUTHOR属性值，需要使用小写：//结果为：zhangxinxubutton.dataset.author;如果自定义属性包含多个短语，则需要使用驼峰式获取数据集对象的属性值，例如：感谢阅读！//结果为：zhangxinxubutton.getAttribute('data-article-author');button.dataset.articleAuthor;并且只能使用驼峰命名方式，例如下面的语句仍然返回undefined：//结果为：undefinedbutton.dataset['article-author'];运行结果如下图所示：3.GetElementById比较querySelector知道一个元素的ID是'thanksForShare'，下面两行DOMAPI返回的结果是一样的：//结果是：truedocument。getElementById('thanksForShare')===document.querySelector('#thanksForShare')Chrome控制台运行，结果如下：这样，getElementById和querySelector对于通过ID选择器获取的元素的方法似乎是等价的，其中一个用一个就看心情，是这样的吗？事实上，它不是。推荐使用getElementById()方法，因为这个API容错性最强，不容易导致JS运行中断。假设一个元素的ID未知，通过参数传递，但是这个字符串参数可能是多种多样的，假设这个字符串是'thanksForShare!'，此时分别运行如下代码：//结果是什么？document.getElementById('thanksForShare!');document.querySelector('#thanksForShare!');结果getElementById()方法安全返回null，querySelector()方法却直接报错：VM309:1UncaughtDOMException:Failedtoexecute'querySelector'on'Document':'#thanksForShare!'不是有效的选择器。眼见为实，特意跑来给大家看看：也就是说，在使用querySelector()方法的时候，我们需要对里面的选择器进行合法性验证，或者try...catch处理，否则会影响整个JavaScript代码的运行。麻烦！因此，如果条件允许，首选getElementById()方法获取DOM元素。4.Appendvs.appendChildappend()API方法其实前面已经介绍过了。它与许多API一起引入。你可能没有注意到它。就说到这里吧。对于节点来说，append和appendChild的作用基本相同。例如：让div=document.createElement('div');div.content='欢迎分享到你的朋友圈';//下面两行和document.body.append(div)作用相同;//等同于document.body.appendChild(div);可以在元素后面添加DOM节点元素，包括文本节点、注释节点、元素等。区别在于：append()方法可以一次追加多个元素，例如：dom.append(node1,node2,node3,...)appendChild方法一次只能追加一个元素。append()方法还可以附加字符串（使用自动HTML转义）。例如：document.body.append('','');最后一页出现的不是图片，而是相关的转义HTML字符串，如下图：5.scrollIntoView和scrollIntoViewIfNeeded的区别scrollIntoView和scrollIntoViewIfNeeded方法主要有2点：行为上的区别如果元素已经在视口，执行scrollIntoViewIfNeeded()方法时不会滚动和定位页面。语法差异scrollIntoView()设置滚动定位时支持是否平滑滚动，参数smooth。详见我的文章《CSSscroll-behavior和JSscrollIntoView让页面滚动流畅》。scrollIntoViewIfNeeded()的滚动定位只能是硬效果。并且scrollIntoView()支持精确设置定位元素是位于视口上方、下方还是中间。语法参数使用如下：element.scrollIntoView({//也支持起始值和结束值block:'center',//smooth滚动行为:'smooth'});而scrollIntoViewIfNeeded()的定位位置比较粗略，无法精确，只支持一个布尔参数值，true表示居中，false表示要么上边，要么下边。//使视口居中element.scrollIntoViewIfNeeded(true);//滚动视口element的上边缘或下边缘.scrollIntoViewIfNeeded(false);在大多数情况下，这两种方法可以互换使用。6.结语当然还有很多其他的功能可以相互替代，但其实DOMAPI是有不同细节的，欢迎补充，我会及时更新的。感谢您阅读。如果您觉得这篇文章的内容还不错，请转发出去，让更多的朋友知道。最后祝大家圣诞快乐，马瑞贵Reimes，永远微笑，^_^，false要么是上缘，要么是下缘。//使视口居中element.scrollIntoViewIfNeeded(true);//滚动视口element的上边缘或下边缘.scrollIntoViewIfNeeded(false);在大多数情况下，这两种方法可以互换使用。6.结语当然还有很多其他的功能可以相互替代，但其实DOMAPI是有不同细节的，欢迎补充，我会及时更新的。感谢您阅读。如果您觉得这篇文章的内容还不错，请转发出去，让更多的朋友知道。最后，祝大家圣诞快乐，永远微笑的马瑞贵Remus，^_^
