当前位置: 首页 > Web前端 > HTML5

关于NodeList和HTMLCollection的两三件事

时间:2023-04-05 19:10:08 HTML5

Dom结构如下:

  • 1.dsfs
  • 2.dsfs
  • 3.dsfs
  • 5.dsfs
  • li>
  • 4.dsfs
  • 6.dsfs
  • 7.dsfs
  • 8.dsfs
  • 1.NodeList是querySelectorAll的返回结果2.HtmlCollection是getElementByTagName的结果3.不关心两个数的区别。首先,NodeList是DOM的一个快照,节点的数量和类型,也就是节点的增删改查。NodeList感觉不到,但是修改节点内部内容,是可以感觉到的,比如修改innerHTML;HtmlCollection是活绑定的,节点的增删敏感;4.可写性问题1.直接给NodeList和HtmlCollection赋值是失败的2.元素可读是对dom节点的引用>varef=lis[1]ef<
  • 2.dsfs
  • >lis[1]=ef<
  • 2.dsfs
  • >Object.prototype.toString.call(ef)<"[objectHTMLLIElement]"3.然后我想排序NodeList,或者HtmlCollection什么的。既然直接修改很常见,那我先存到数组转换成可行的,然后直接排序>lis=document.querySelectorAll('li');<(8)[li,li,li,li,li,li,li,li]>myDiv.innerHTML=Array.from(lis).sort((a,b)=>parseInt(b.innerHTML)-parseInt(a.innerHTML)).map((item)=>item.outerHTML).加入('');完美的降序排序是使用HTMlCollection实现升序,完美;..]