摘要：和合并文本节点在父元素上操作和分割文本节点在子元素上操作返回找到匹配的第一元素返回找到匹配的所有元素检测该元素与选择符是否匹配和返回找到匹配的第一元素和返回找到匹配的所有元素。
下面用的代码
Node
childNodes获取到的是父元素下所有的一级子元素，是一个类似数组的对象，例如：boxChildNodes结果是：[ 0:text , 1:ul.banner , 2:text , 3:ul.number , 4:text, length:5]，它会获取到元素和元素之间的空隙（文本），如上面所示的0,2,4。使用Array.prototype.slice(childNode,0)方法，可将伪数组变成数组，或者用遍历的方法也可以将它变成数组。
children和childNodes类似，区别是它不会获取到文本和文本之间的空隙（文本）。
parentNode可以获取子元素的上一级（父元素）。
previousSibling和nextSibling获取上一个或下一个兄弟元素。
firstChild和lastChild获取父元素下第一个或最后一个子元素（包括空隙，也就是文本）。
boxChildNodes的第一个子节点是boxChildNodes[0] === box.firstChild，boxChildNodes[boxChildNodes.length-1] === box.lastChild。
hasChildNodes()可以查询父元素下面是否有子元素（1个或多个），有返回true，没有返回false，要注意：文本节点也是节点。
ownerDocument 查询一个元素的根元素。
appendChild(newNode,oldNode)在父元素上最后一个元素后面添加新的子元素，无法指定添加到某个元素前后。
insertBefore(newNode,oldNode)在父元素下某个子元素前添加新的子元素，如果父元素下的某个子元素找不到，则在父元素下最后一个子元素后添加新的子元素和appendChild()方法一样。
removeChild(oldNode)移除父元素下的某节点
Document
xx
document.documentElement 获得html元素
document.body获得body元素
document.head获得head元素
document.doctype获得doctype的引用
document.title获得title内容
document.anchors获得所有带name的a标签
document.forms获得所有form标签
document.links获得所有带href的标签
ElementnodeTyp===1为标签，nodeType===3为文本。
nodeName和tagName都是返回元素的标签名，返回的都是大写，用的时候需要进行大小写转换。
getAttribute()，setAttribute()，removeAttribute()获取，设置和删除元素的属性，和直接使用box.id效果一样，区别是get...这类方法是能获取自定义属性的。
自定义属性可以通过dataset访问
createElement()和createTextNode()创建元素标签和创建文本，需要用appendChild()添加到页面中去。
normalize()和splitText()合并文本节点（在父元素上操作）和分割文本节点（在子元素上操作）
DOM Selector
querySelector()和querySelectorAll()返回找到匹配的第一元素和返回找到匹配的所有元素。
matches() 检测该元素与选择符是否匹配
div.classList.remove("user")删除class，div.classList.add("current")添加class，div.classList.toggle("user")如果有这个class就删除，没有就添加。
删除或添加class另一种比较复杂的方法
var div = document.getElementById("xx")
var className = div.className.split(/s/g)
var pos = -1
for(var i = 0; i
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96037.html
摘要：的一个突出特点是拥有极速地渲染性能。该功能依靠的就是研发团队弄出的虚拟机制以及其独特的算法。在的算法下，在同一位置对比前后节点只要发现不同，就会删除操作前的节点包括其子节点，替换为操作后的节点。 React的一个突出特点是拥有极速地渲染性能。该功能依靠的就是facebook研发团队弄出的虚拟dom机制以及其独特的diff算法。下面简单解释一下react虚拟dom机制和diff算法的实现...
摘要：界面上的更改都是通过操作实现的，并不是通过传统的刷新页面实现的。操作优化的总原则是尽量减少操作。通过在文档片段上进行操作，可以降低操作对页面性能的影响，这种方式是创建一个文档片段，并在此片段上进行必要的操作，操作完成后将它附加在页面中。 界面上UI的更改都是通过DOM操作实现的，并不是通过传统的刷新页面实现 的。尽管DOM提供了丰富接口供外部调用，但DOM操作的代价很高，页面前端代码的...
摘要：比较虚拟与的差异，以及对节点的操作，其实就是树的差异比较，就是对树的节点进行替换。忽略掉这种特殊的情况后，大胆的修改了算法按直系兄弟节点比较比较。这当中对比的细节才是整个算法最精粹的地方。 一、旧社会的页面渲染 在jQuery横行的时代，FEer们，通过各种的方式去对页面的DOM进行操作，计算大小，变化，来让页面生动活泼起来，丰富的DOM操作，让一个表面简单的页面能展示出...
摘要：摘要想稍微系统的说说对于的操作把和常用操作的内容归纳成思维导图方便阅读同时加入性能上的一些问题前言在前端开发的过程中极为重要的一个功能就是对对象的操作无论增删改查在前端页面操作这一范围内都是比较消耗性能的如何高效率的便捷的操作这就是本文要讲 摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题....
阅读 2775·2021-11-02 14:42
阅读 3164·2021-10-08 10:04
阅读 1185·2019-08-30 15:55
阅读 1027·2019-08-30 15:54
阅读 2315·2019-08-30 15:43
阅读 1681·2019-08-29 15:18
阅读 864·2019-08-29 11:11
阅读 2364·2019-08-26 13:52
