本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个:
说直接一点,
writer by:大沙漠 QQ:22969969
举个栗子:
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Documenttitle>
script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js">script>
head>
body>
div>
h1>你好h1>
div>
p>朋友p>
button id="b1">测试1button>
button id="b2">测试2button>
button id="b3">测试3button>
script>
$('h1').click(function(){console.log('h1 click')}); //给h1元素增加一个点击事件
$('p').click(function(){console.log('p click')}); //给P元素增加一个点击事件
//以下给三个按钮都会实现将h1、p元素从DOM树中移除,再插入body的子节点的前面,不同的地方是点击子节点时的输出信息不同
b1.onclick=function(){$('h1,p').remove().prependTo('body')} //点击测试1按钮后 h1和p元素都移动到了body子节点的最前面,但是再点击h1和p元素都没有反应
b2.onclick=function(){$('h1,p').remove('p').prependTo('body')} //点击测试1按钮后 h1和p元素都移动到了body子节点的最前面,点击h1有输出,点击p没有输出
b3.onclick=function(){$('h1,p').detach().prependTo('body')} //点击测试1按钮后 h1和p元素都移动到了body子节点的最前面,点击h1和p都有输出
script>
body>
html>
渲染如下:
对应的DOM树如下:
我们给h1和p元素分别绑定了一个事件,点击分别输出:h1 click和p click,,点击输出如下:
另外不管点击测试1、测试2还是测试3,都会将h1和p元素从DOM树中卸载并插入到body子节点的最前面,如下:
此时再点击h1和p元素就会有不同的输出了:
源码分析
讲解empty()、remove()和detach()之前先介绍一个jQuery的API,就是$.cleanData(elems),参数是DOM节点的集合(可以是document.getElementsByTagName的返回值),它用于移除一个DOM节点上绑定的jQuery事件的,我们举个栗子:
Document Hello World
渲染如下:
初始化时我们点击Hello World控制台会输出信息,如果点击按钮后再点击Hello World就不会输出了,因为$.cleanData把该DOM元素的事件给卸载了,$.cleanData实现如下:
jQuery.extend({ cleanData: function( elems ) { //移除多个DOM元素的全部数据和事件, elems是待移除数据和事件的DOM元素数组。 var data, id, cache = jQuery.cache, special = jQuery.event.special, deleteExpando = jQuery.support.deleteExpando; for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) { //遍历每个匹配元素 if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) { //如果不支持设置属性,则跳过本次循环。 jQuery.noData是一个数组,保存了不支持扩展属性的节点名称。 continue; } id = elem[ jQuery.expando ]; //属性名,注1 if ( id ) { //如果该DOM对象有jQuery.expando属性,则表示设置过数据。 data = cache[ id ]; if ( data && data.events ) { //如果DOM的关联数据缓存对象存在且含有events属性,说明在该DOM上绑定过事件,则移除 for ( var type in data.events ) { //data.events是DOM元素的事件缓存对象,存储了DOM元素的所有事件 if ( special[ type ] ) { jQuery.event.remove( elem, type ); // This is a shortcut to avoid jQuery.event.remove's overhead } else { jQuery.removeEvent( elem, type, data.handle ); } } // Null the DOM reference to avoid IE6/7/8 leak (#7054) if ( data.handle ) { data.handle.elem = null; } } if ( deleteExpando ) { //如果jQuery.support.deleteExpando;返回ture,即浏览器支持删除DOM元素上的扩展属性 delete elem[ jQuery.expando ]; //删除DOM元素的jQuery.expando属性 } else if ( elem.removeAttribute ) { //如果浏览器不支持删除DOM元素上的扩展属性,则调用removeAttribute删除属性 elem.removeAttribute( jQuery.expando ); } delete cache[ id ]; //删除DOM元素的数据缓存对象cache[id] } } } /*略*/ })
注1:jQuery绑定的事件对应的信息都存在$.cache里,键名是对应DOM对象的jQuery.expando,也就是这里的elem[ jQuery.expando ],有疑问可以看看之前事件的讲解:https://www.cnblogs.com/greatdesert/p/11679334.html
cleanData就是删除参数elems里所有DOM元素的事件,本节的empty()和remove()都是基于cleanData实现的,empty()实现如下:
jQuery.fn.extend({ empty: function() { //从文档中移除匹配元素的所有子元素。 for ( var i = 0, elem; (elem = this[i]) != null; i++ ) { //遍历当前匹配的每个元素 // Remove element nodes and prevent memory leaks if ( elem.nodeType === 1 ) { jQuery.cleanData( elem.getElementsByTagName("*") ); ////先移除所有后代元素关联的数据和事件,以避免内存泄漏 } // Remove any remaining nodes while ( elem.firstChild ) { //然后移除子元素。 elem.removeChild( elem.firstChild ); } } return this; }, })
empty()内首先调用cleanData()移除所有子孙节点的数据和事件,然后通过一个while()循环卸载掉每个DOM节点,比较好理解哈,对于remove()来说,实现如下:
jQuery.fn.extend({ remove: function( selector, keepData ) { //从匹配元素中移除selector元素,该方法会遍历匹配元素集合,先删除后代元素和匹配元素的数据和事件,以避免内存泄漏,然后移除匹配元素。 for ( var i = 0, elem; (elem = this[i]) != null; i++ ) { //遍历当前匹配元素 if ( !selector || jQuery.filter( selector, [ elem ] ).length ) { //如果没有传入selector参数,或者传入了selector参数,并且当前元素与之匹配 if ( !keepData && elem.nodeType === 1 ) { //如果没有传入keepData参数且elem是元素节点 jQuery.cleanData( elem.getElementsByTagName("*") ); //移除后代元素的全部数据和事件 jQuery.cleanData( [ elem ] ); //移除元素节点。 } if ( elem.parentNode ) { //调用原生方法removeChild()移除节点。 elem.parentNode.removeChild( elem ); } } } return this; }, detach: function( selector ) { return this.remove( selector, true ); //调用remove()来实现的,参数2传入了true }, })
remove()方法会根据selector来选择匹配元素,并将该匹配元素从DOM树中卸载,如果有传入keepData则保存数据,否则将数据删除,对于detach来说,就是调用remove()来实现的
参与评论
手机查看
返回顶部