JS基本功系列-DOM小结

admin 2022年5月2日14:29:10安全开发评论7 views2034字阅读6分46秒阅读模式


DOM小结

1.只有getElementById是Element单数,其余为复数;

  • 1.getElementById,getElementsByName只有Document.prototype才有!!!!!!
  • 2.getElementsByTagName ,getElementsByClassName ,querySelector(),querySelectorAll(),这四个函数在Document.prototype Element.prototype里面都有!!!!!!

2.querySelector() querySelectorAll一般不用;

3.nextSiblingnextElementSibling区别:
nextSibling属性返回元素节点之后的兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等);
nextElementSibling属性只返回元素节点之后的兄弟元素节点(不包括文本节点、注释节点);

4.节点类型:

  • 1.元素节点  -> 1
  • 2.属性节点   --> 2
  • 3.文本节点    -> 3
  • 4.注释节点   -> 8
  • 5.document -> 9
  • 6.DocumentFragment  -> 11
 div.nodeType
  // 1
  div.getAttributeNode('class').nodeType
  //2
  div.getAttributeNode('id')
  // box
  div.getAttributeNode('id').nodeType//2
  div.firstChild.nodeValue = "hello"
  div.firstChild.nodeType
  // 3

5.判断对象类型,这里可以判断是什么类型的标签

Object.prototype.toString.call(div)
//"[object HTMLDivElement]"
  1. * --->获取标签用的,只能配getElementsByTagName, 获取所有元素节点
  var all = document.getElementsByTagName('*')
    console.log(all)

var body = document.body;//这里的body是通过document.body来使用的,这个属性是系统内置的,只能使用,不能访问
//HTMLDocument.prototype.body  //会报错
var head = document.head;

7.添加自定义属性:

<a href="javascript:;"  data-uri="txwz" data-sort="free">天下无贼</a><br/>
<a href="javascript:;"  data-uri="fczlm" data-sort="pay">复仇者联盟</a><br/>
<a href="javascript:;"  data-uri="hgf" data-sort="free">黑寡妇</a><br/>
<a href="javascript:;"  data-uri="gtx" data-sort="pay">钢铁侠</a><br/>
//HTML5给元素增加了一个 data- * 属性
var p = document.getElementsByTagName('p')[0];
  p.dataset
  // DOMStringMap {name: 'linus', age: '18'}
  // age: "18"
  // name: "linus"
  p.dataset.name
  // 'linus'
  p.dataset.age
  // '18'
  p.getAttribute('data-name')
  // 'linus'
  p.getAttribute('data-age')
  // '18'

8.与ulli相关的文档碎片操作(可以提高性能)

<ul id="list"></ul>
var oUI = document.getElementById('list');

  var oFrag = document.createDocumentFragment();
  for (let i = 0; i < 1000; i++) {
    var oLi = document.createElement('li');
    oLi.innerHTML = i + ': 这是第' + i + '个项目';
    oLi.className = 'list-item';
    // oUI.appendChild(oLi)
    oFrag.appendChild(oLi)//注意:这里的oFrag不在DOM节点树里面!!!
  }
 oUI.appendChild(oFrag);

原文始发于微信公众号(迪哥讲事):JS基本功系列-DOM小结

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年5月2日14:29:10
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  JS基本功系列-DOM小结 http://cn-sec.com/archives/969509.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: