// 获取根节点,点击有惊喜

以前一个现在不用的帐号发布的随笔,现在人肉搬过来吧。 注册用户有一段时间了,一直很忙,到现在还没有写一篇,忽然觉的一定要花点时间记录和总结一些东西。好吧,就从这里开始了。今天客户提出要点击菜单的父级节点时,展开节点。心想这个应该是很常见的功能吧,特意google了一下,发现大部分是将的不是js实现的,有些js实现的写的麻烦,干脆自己写一个吧,应该不难的。首先思路是,,让文本点击的时候执行左边‘+'号的事件,查看源码看到,‘+'号的事件是: javascript:TreeView_ToggleNode(ctl00_body__menuTree_Data,0,document.getElementById('ctl00_body__menuTreen0'),' ',document.getElementById('ctl00_body__menuTreen0Nodes')) Ok,接下来就是筛选出所有的父级节点,加上处理事件就ok了,下面是完整代码: 复制代码 代码如下:

// document.getElementById('p1').remove();

内容3

二、事件委托机制

       知道了事件的捕获冒泡机制,我们可以利用它来实现更方便的程序控制,事件委托便是最典型的应用之一。下面来说说javascript中的事件委托机制。什么叫委托呢?想想我们现实生活中,自己不想干的事,让别人来帮忙完成,这就是把事情“委托”给别人。Javascript的事件委托机制也是这个道理,本来一个监听函数要处理节点a触发的事件,现在把这个监听函数绑定到节点a的父层节点上,让它的父辈来完成事件的监听,这样就把事情“委托”了过去。在父辈元素的监听函数中,可通过event.target属性拿到触发事件的原始元素,然后再对其进行相关处理。

       那这样做有什么好处呢?最大的用处便是监听动态增加的元素。比如我们现在有这样的需求,点击下面每个列表项弹出各自的内容,现在随着web应用的盛行,网页中使用异步请求来动态加载节点已经变的很普遍,所以我们点击下方的按钮要在列表中增加一项,并且点击新增加的节点也要弹出内容。HTML结构如下:

图片 1

<ol id="olist">
    <li>列表内容1</li>
    <li>列表内容2</li>
    <li>列表内容3</li>
    <li>列表内容4</li>
    <li>列表内容5</li>
</ol>

图片 2

  若我们使用之前的监听器绑定方式,需要遍历所有的li元素并监听,代码应该是这样的:

图片 3

var listArray = document.getElementById('olist').childNodes;
for(var i=0;i<listArray.length;i++){
    listArray[i].addEventListener('click',function({
            alert(this.innerText);
        });
}

图片 4

  运行效果如下:

  1. 列表内容1
  2. 列表内容2
  3. 列表内容3
  4. 列表内容4
  5. 列表内容5

 

  可以发现当新增元素后,点击它并没有弹出内容。那是当然的了,因为我们并没有给新增的元素绑定监听器,为了实现点击新增元素也弹出内容,我们不得不在每次新增一个元素后,再进行一次绑定。加一个绑一个,加一个绑一个,累不累啊!你不累浏览器都累了!这样做导致的性能开销是可想而知的,而且浏览器还要维系n多元素与应的监听函数的映射关系,会占用大量内存。

       面对这样拖沓冗杂的代码,你是不是已经不能忍,想要高喊一声:大地!快使用光能力量!好,接下来该秘密武器登场了,看看使用事件委托的效果,代码如下:

var olist = document.getElementById('olist');
olist.addEventListener('click',function(){
    alert(event.target.innerText);
},false);

  看看实际运行的效果:

  1. 列表内容1
  2. 列表内容2
  3. 列表内容3
  4. 列表内容4
  5. 列表内容5

 

  我们并未给li元素绑定任何监听器,而是监听它的父元素ul,等到事件冒泡上来的时候,在处理函数中通过event.target获得触发事件的li元素,进行相关处理。这样做的好处是显而易见的,首先只进行了一次监听器的绑定,浏览器轻松,其次动态增加元素后你也不必要再绑定监听器,你也轻松。正所谓大家好才是真的好!

       本篇的基本内容就介绍完了,你是不是感觉有点奇妙,我平时写程序的时候没关心这些也仍然能完成工作呀?那我就得问你是不是使用js框架,使用jQuery了,事实上,jQuery提供的on、live等方法就已经对事件委托进行了封装,为委托机制的推广悄悄做了底层贡献,你没感觉到而已。jQuery中的各种事件监听方式也需要我们有一个清楚的了解,才能正确的使用,高效的完成工作。这些内容将放在下一篇介绍。

 

点击有惊喜

图片 5

// 给img标签设置src属性

jswindow.onload=function(){              var a1=document.getElementById("a1");        var z1=document.getElementById("z1");        alert(a1.hasChildNodes());        alert(z1.hasChildNodes());}父节点调用,有子节点返回true,没有false。无需参数总结:基本节点处理,类型判断(为1),属性设置、获取,类名获取、设置,标签名获取节点关系,父亲,兄弟,孩子操作处理,创建,插入,替换,删除,复制,有无子节点我们使用节点关系获取子节点,下一个、上一个兄弟节点,最后子节点,发现发挥的节点,都是空格文本节点我们要做的就是对html元素的处理,就是node的类型为1,才是我们想要的也就是,获取子节点,获取的子节点都是元素标签兄弟节点也要是元素标签节点,这样才能为我们所工作我们以这些节点操作为核心,用节点类型为1作为判断依据,返回一个数组(存放元素集合)为结果,做函数的封装处理我们前面介绍了,获取html元素和body接口,我们的页面还会有一些很特殊的标签,需要在、提供特殊接口去处理,如:iframeiframe回载入一个html页面作为子页面,dom提供的接口获取:ifrmaeele.contentDocument  找到iframe,调用属性得到子html页面,htmljswindow.onload=function(){      var if1=document.getElementById("if1");          alert(if1.contentDocument.documentElement.offsetHeight); }会弹出内部html的高度,这段代码不要再谷歌测试,谷歌需要在服务器上运行才可以,要做http协议的

点击有惊喜

// p.innerHTML='我是插班';

我是p节点,在id下

一、事件的捕获与冒泡

 

   由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监听函数。以下面的HTML结构为例:

<div id="parentdiv">
       父亲
       <div id="childdiv">孩子</div>
</div>

  执行的流程应该是这样的:

图片 6

  下面是一组例子,分别点击孩子节点可以清楚的看到第三个参数的影响:

父亲

孩子

     

父亲节点的监听函数在捕获阶段执行:
var parent1 = document.getElementById('parentdiv1');
var child1 = document.getElementById('childdiv1');
parent.addEventListener('click',function(){alert('父亲被点击了');},true);//第三个参数为true
child.addEventListener('click',function(){alert('孩子被点击了');},false);

     

父亲

孩子

     

父亲节点的监听函数在冒泡阶段执行:
var parent2 = document.getElementById('parentdiv2');
var child2 = document.getElementById('childdiv2');
parent.addEventListener('click',function(){alert('父亲被点击了');},false);//第三个参数为false
child.addEventListener('click',function(){alert('孩子被点击了');},false);

     

父亲

孩子

     

父亲节点的监听函数在捕获冒泡阶段都执行:
var parent3 = document.getElementById('parentdiv3');
var child3 = document.getElementById('childdiv3');
parent.addEventListener('click',function(){alert('父亲被点击了');},true);//第三个参数为true
parent.addEventListener('click',function(){alert('父亲被点击了');},false);//第三个参数为false
child.addEventListener('click',function(){alert('孩子被点击了');},false);

  如果不想让事件向上冒泡,可以在监听函数中调用event.stopPrapagation()来完成,这样父亲节点就捕捉不到该事件了。在实际的开发中,这一用处还是挺多的。

// 前/后一个同级节点

jswindow.onload=function(){              var a1=document.getElementById("a1");        var z1=document.getElementById("z1");        var newnode=document.createElement("a");        newnode.innerHTML="aaa";        a1.replaceChild(newnode,z1) ;        var a2=document.getElementById("a2");        var c1=document.getElementById("c1");        var clonenode=c1.cloneNode(true);        clonenode.id="c2";        a2=appendChild(clonenode);}替换方法需要两个参数,第一个新节点,第二个被替换子节点复制操作,复制得到相同节点,id具有唯一性,对id属性重新复制判断子节点是否存在方法 hasChildNodes      api:html

 

// 把子标签拼接进副标签

4564645

 

// console.log(body.previousSibling);

标题1标题2标题3

// 获取当前节点下的所有子节点

3-3

// 创建一个新标签

都添加click事件,当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。document.documentElement指向html元素,可以得到根节点,我们做一个例子:html

// var img=document.createElement('img');

内容1

// var p=document.createElement('p');

内容1

// return false;

我是类名节点

var str='skldfjalk';

我是连接节点

本文由必威发布于必威-运维,转载请注明出处:// 获取根节点,点击有惊喜

相关阅读