xml地图|网站地图|网站标签 [设为首页] [加入收藏]

js获取多个tagname的节点数组

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:179 发布时间:2019-09-13
摘要:来自:mrthink.net 我是p节点,在id下 意义必要,写了个获得三个tagname节点集合的小方法。类似于jQuery的$(‘iput,select,textarea','#form')的功能,再次来到是按节点在本来文书档案流中的顺序重

来自:mrthink.net

我是p节点,在id下

意义必要,写了个获得三个tagname节点集合的小方法。类似于jQuery的$(‘iput,select,textarea','#form')的功能,再次来到是按节点在本来文书档案流中的顺序重返的。

5

//获取钦定标签类型的节点数组 用例:GetTagNames('input,select,textarea',document.getElementById('form'))
function GetTagNames(tagnames,parEl){
 //父节点未定义暗许循document
 var parEl=parEl || document;
 //获取内定父成分的子节点
 var all=parEl.getElementsByTagName('*');
 //寄放全数符合条件的子节点
 var nodes=[];
 //将转入的tagname调换来判别正则
 var reg=eval('/' tagnames.split(',').join('|') '/i');
 //循环,判断,存储
 for(var ii=0;ii<all.length;ii ){
  if(reg.test(all[ii].nodeName)){
   nodes.push(all[ii]);
  }
 }
 //返回
 return nodes;
}

内容1

复制代码 代码如下:

大家要做的正是收获标签里面包车型地铁内容dom的接口方法正是:  node.innerHTML (那些本性既可以够拿走节点内容,又足以赋值内容)我们要出口那几个内容js 提供的办法  alert()  (弹框格局体现内容) dom提供的中坚得到接口:document.getElementById("id")    通过id查找,id具备独一性,再次来到叁个节点成分document.getElementsByTagName("tagname")  通过标签字查找,重临八个要素(伪数组),二个页面加入对div,会油但是生多少个document.getElementsByTagName("*")  通过标签字的通配符查找,重临全数因素(伪数组)document.getElementById("id") .document.getElementsByTagName("tagname")  合作查找,找到内定id的因素,在当下成分下,查找钦定标签字成分重返以上办法是最常用方法,兼容所低级ie和具备高等浏览器,document.querySelectorAll(".demo4 a")    通过css选用器获取格局,会拿走叫demo4类名成分下的持有a成分,重临全部document.querySelector("div")  通过css选用器获取情势,会取得具备div成分,重回第一个地点三个方法包容ie8以上,不对低档ie补助, 相关知识:大家提到的伪数组,和数组的界别就是根不是数组,其余表现完全与数组同样大家新建二个数组  var arr=[123,456,789]    那正是数组的样式。伪数组表现一样,只不过是在那之中内容换来了节点元素 [node1,node2,node3]数组具备length属性 alert(arr.length)  会重临长度为3;同样,数组作为一个凑合,具备索引相配,大家alert(arr[0]) ;alert(arr[1]) ;alert(arr[2]);会二遍获得 123, 456 ,789那样就太费事了,不断正是alert,大家得以接纳for循环for 循环结构for(var i=0;i标题1标题2标题3

jswindow.onload=function(){              var a2=document.getElementById("a2");        var createle=document.createElement("p");        createle.innerHTML="笔者是插入的p内容";          a2.insertBefore(createle,null); }施行代码,创设的的节点作为兄弟元素插入,调用外部插入要求多少个参数,第一个是插入的节点,第3个是插入节点的子成分,可认为null;测量检验removeChild api:html

自家是三个id节点

自身是连接节点

js代码:window.onload=function(){ var list=document.getElementById("list");  var listspan=list.getElementsByTagName("span") var con=document.getElementById("con"); var condiv=con.getElementsByTagName("div") for(var i=0;iaspanjs:window.onload=function(){ var ctarget=document.getElementById("ctarget");  ctarget.onclick=function(event){  var evtcon=event.target;  if(evtcon.innerHTML=="a"){  alert("点击了子成分a")  }else if(evtcon.innerHTML=="span"){  alert("点击了子成分span")  }else{  alert("小编是div")  }  };  }; 相关:if推断语句if(){}else{} if(){}else if(){}else{}借使创设,施行下边代码,别的,试行上边代码,轻便的一看就能够掌握大家依旧分析这段js  点击事件,我们获得event对象的target属性,获得二个细微触发元素借使大家不做地点管理,那将在写多少个单击事件,对div 对a 对 span大家经过判别event.target给父元素加八个事变,就产生了要加3个事件的拍卖,大大简化的代码, 通过页面测量检验,大家也赢得,点击子成分,会脱离判别下的原委,获得target属性再次回到一个微小触发事件要素 提到事件,大家就不可能不提及捕获和冒泡成分 事件 方法,的平地风波是怎样成分上接触的:捕获:事件从最上超级标签最初往下搜索,直到捕获到事件指标(target)冒泡:事件从事件指标(target)开头,往上冒泡直到页面包车型客车最上一级标签。针对管理,大家要用监听事件函数,加多事变ele.add伊芙ntListener('click',function,true)第三个参数假使true,则意味选用事件捕获,若是false,则表示采取事件冒泡。大家有三个这么结构:

ccc

jswindow.onload=function(){  var list=document.getElementById("list");  var listspan=list.childNodes;  var con=document.getElementById("con"); var condiv=con.childNodes;    for(var i=0;ijswindow.onload=function(){              var a1=document.getElementById("a1");        var createle=document.createElement("p");        createle.innerHTML="作者是插入的p内容";          a1.appendChild(createle);        var a2=document.getElementById("a2");        var creattext=document.createTextNode("笔者是文件节点");          a2.appendChild(creattext); }大家测量试验代码,创设成分和文书创建,並且通过  appendCild作() 为子节点插入到钦点成分下本着 insertBefore api:html

内容3

4

点我

3-3

大家率先要明白,大家给页面增添效果用到的js到底是何许?js其实满含三有个别:dom 文书档案对象模型      bom 浏览器对象模型ecmascript 语法  简称(es)大家的职能达成其实是用es语法操作dom和bom去贯彻大家的目标一张图表示大家js的处理情势还算是清晰吧,dom和bom能够看来正是桥梁的效劳,达成html页面与es的组合,大家选择es语法去调用何管理dom、bom的接口就能够达成对html页面包车型大巴来得管理。 看书是很单调的,越发js的书本要不正是仅仅讲了一群es语法,看完对做效果一脸茫然,要不正是从es讲到dom到bom,你看日前es语法就要用多少个星期,已经令你没办法了,等看齐dom也忘得几近,最终如故一脸茫然!我们从dom初步,结合最简易的es语法,做对应管理,初阶动身! 前言,dom正是文书档案对象模型,正是对html页面正是模型化,与html发生映射,1.dom-获取节点我们页面里若是有如下的html机构:

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的惊人,这段代码不要再Google测量试验,Google供给在服务器上运维才方可,要做http公约的

jswindow.onload=function(){ var drag=document.getElementById("drag");  var isd=0;  var elex=0; var eley=0; drag.onmousedown=function(event){  isd=1;    elex=event.clientX-drag.offsetLeft;  eley=event.clientY-drag.offsetTop;  }; drag.onmousemove=function(event){  if(isd==1){  var evx=event.clientX;  var evy=event.clientY;  var cx=evx-elex;  var cy=evy-eley;  drag.style.left=cx "px";  drag.style.top=cy "px";    }else{}    }; drag.onmouseup=function(event){    isd=0; };  };完美的拖拽实现了,大家赢得成分的left和top未有用drag.style.left的措施赢得,而是用了drag.offsetLeftdom针对left、top、width、heigth扩张api:        都以无单位获得 ele.offsetLeft                    获取成分可见left值,针对对父容器带偏移量,正是margin和paddingele.offsetTopele.offsetWidth                获取成分可知宽度ele.offsetHeight ele.clientLeft                        获取成分可知left针  与父容器非亲非故ele.clientTopele.clientWidth                    获取成分可知宽度,加偏移ele.clientHeight ele.scrollLeft                    获取成分滚动条的left值,裁剪宽 与父成分非亲非故    可赋值ele.scrollTop                                                                                      可赋值ele.scrollWidth                  获取成分加上滚动条的总宽度ele.scrollHeight  ele.getBoundingClientRect().top            成分上边距离页面最上部的距离ele.getBoundingClientRect().right          成分左边距离页面左侧的距离ele.getBoundingClientRect().bottom      成分下面距离页面顶部的距离ele.getBoundingClientRect().left            成分侧边距离页面左侧的相距 针对html节点和body节点,dom内有写好的对象document.documentElement      指代html成分 页面根成分document.body                          指代body成分,html4.0从前根成分我们早已掌握通过ele.style能够赢得样式和赋值样式,一样与其有关还恐怕有特意获取样式的api      带单位ele.currentStyle.width          获取有些样式                        低端ie和iegetComputedStyle(ele,false).width      获取某些样式        主流浏览器一样笔者把style的接口也列出来ele.style.width                                    获取成分样式ele.style.width="10px"                        给成分样式赋值,要带单位ele.style.cssText="height:10px;width:20px;"          给成分样式赋值,选拔样式表形式还索要小心的正是,对于有-的体制,大家要去掉-,况且把-后边的首先个字母大写,如:ele.style.marginTop="20px" 大家总结和有着对成分宽高,上下地点的api还会有对体制的拍卖api,大家接下去要做一个实例,轻便利用:4.我们把页面,滑动到最尾部,点击贰个开关,页面回到最上部;壹当中度3000px的div,下边叁个回来最上部按键,点击按键,回到顶上部分便是根成分的滚动条变为0;html

我是p节点,在id下

jswindow.onload=function(){              var a1=document.getElementById("a1");        var z1=document.getElementById("z1");        a1.removeChild(z1) }删除节点,是去除钦命子节点,参数是必得精通找到的八个子节点替换子节点和复制节点 api:html

3-2-1

4564645

我是i子节点111

我是i子节点111

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:js获取多个tagname的节点数组

关键词: 68399皇家赌场 日记本

最火资讯