js(BOM,DOM,事件)

本文深入探讨了DOM(文档对象模型)的基本概念,包括节点类型、父子及兄弟节点的关系,以及如何通过各种方法如appendChild(), removeChild(), replaceChild()等进行DOM节点的增删改查。同时,对比了getElement(s)By...与querySelector的选择器性能,介绍了批量DOM操作的技巧,如createDocumentFragment()和innerHTML的使用,并讨论了它们的优缺点。最后,文章详细解析了事件处理,包括事件级别、事件流(捕获、目标、冒泡)、事件对象的属性及事件委托的实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

DOM

DOM节点:

父子:parentNode,childNodes,first-childNode,last-childNode;

兄弟:nextSibling,previousSibling;

DOM节点操作:(增删改查)

  • 增:appendChild();
  • 删:removeChild();
  • 改:replaceChild(newNode,oldNode);
  • 查:document.getElementById();document.getElementsByClassName();document.getElementsByTagName();querySelector();
  • 插入:insertBefore(newNode,existingNode);
  • 复制 :Node.clone(boolean) =>true 深度克隆 false 只克隆标签
  • 创建 :document.createElement()

getElement(s)By...与querySelector的区别

  1. 性能:getElement(s)By...的性能要比querySelector快很多。
  2. querySelector选择出来的是静态的,getElement选出来的是动态的=>比如动态生成的元素可以用querySelector给每一个该对象生成方法。(新建文件夹);

批量DOM操作

  • createDocumentFragment()
var docFragment = document.createDocumentFragment();

for (var i = counts; i > 0; i--) {
    var node = document.createElement('p');
    var node_text = document.createTextNode(i + ', hehe');

    node.appendChild(node_text);

    docFragment.appendChild(node);
}

document.body.appendChild(docFragment);
  • innerHTML
var d= document.createElement('div');
	var html="";
	for (var i = counts; i > 0; i--) {
		html += '<p>i+' hehe'</p>';
	}
	d.innerHTMl = html;
	document.body.appendChild(d);

对比:

  • innerHTML与createDocumentFragment 都比createElement和append占优势,少量数据时innerHTml最优,多数据或者改数据createDocumentFragment最优
  • 但是innerHTML还有两个缺点:
    • 1.如果你在原来的子元素上绑定了事件的话,重写后事件绑定仍然还在;
    • 2.js代码和html代码耦合程度高,不利于维护;

获取DOM的各种属性:

  • style
    • (行间样式):elem.style[attr]
    • (当前样式):elem.currentStyle?elem.currentStyle[attr]:window.getComputedStyle(elem,null)[attr];
  • offset
    • ​​​​​​​元素的可视高与宽,包括边框border与padding,滚动条宽度,元素高度/宽度本身; 值为Number类型。
    • 很多inline-block时,不设置具体高度时,获取offsetTop不准确;
  • client
    • 元素的可视高与宽,不包括边框border与padding,滚动条宽度,只为元素高度/宽度本身;值为Number类型;
  • getBoundingClientRect()[attr]
    • ​​​​​​​元素相对页面的距离。相当于chrome下相对body的offsetLeft;值为Number类型;
  • clientX
    • ​​​​​​​鼠标事件距离页面的距离;

事件:

事件级别:

  • DOM0 elem.onclick = function(){};
  • DOM2 elem.addEventListener('click',function(){},false); ie-> elem.attachEvent(on+event,fn);
  • DOM3 elem.addEventListener('keyup',function(){},false);

事件的三个阶段:

  • 捕获:事件由页面元素接受,逐级向下,直到目标元素;
  • 目标:具体元素本身;
  • 冒泡:事件由具体元素接受,逐级向上,直到页面元素;

event:

  • e = e || window.event;
  • target = e.target || e.srcElement;
  • 阻止事件冒泡:e.stopPropagation();window.cancelBubble = true;
  • 阻止默认行为:e.preventDefault();

target 与 currentTarget区别:

  • currentTarge、this是和“注册监听器的对象”是一伙。target和“当前目标对象”是一对。

事件委托:

  • 概念:利用事件冒泡的原理将事件绑定到父元素或者祖先元素上,触发执行效果;
  • 优点:减少内存,减少事件绑定;新增子元素也不用再绑定事件;​​​​​​​
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值