js获取第n个元素节点

一个获取第n个元素节点的函数,现在只能通过初入html标签获取元素,功能还不完善

演示:html

<ul id="list">
    <li>1<button>a</button></li>
    <li>2<button>b</button><button>o</button></li>
    <p>test</p>
    <li>3<button>c</button></li>
    <li>4<button>d</button></li>
    <li>5<button>e</button></li>
</ul>

js:

 1 /**
 2   *
 3   * @param parent父节点
 4   * @param ele要选取的元素标签
 5   * @param num第几个元素
 6   * @return {*}
 7   */
 8 function nth(parent,ele,num){
 9     var _ele=Array.prototype.slice.call(parent.childNodes),eleArray=[];
10      //将父节点的子节点转换成数组_ele;eleArray为只储存元素节点的数组
11     for(var i= 0,len=_ele.length;i<len;i++){
12       if(_ele[i].nodeType==1){
13           eleArray.push(_ele[i]);//过滤掉非元素节点
14         }
15     }
16     if(arguments.length===2){
17         //如果只传入2个参数,则如果第二个参数是数字,则选取父节点下的第几个元素
18         //如果第二个参数是字符串,则选取父节点下的所有参数代表的节点
19         if(typeof arguments[1]==="string"){
20             _ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1]));
21             return _ele;
22         }else if(typeof arguments[1]==="number"){
23             return eleArray[arguments[1]];
24         }
25     }else{
26         //如果参数齐全,则返回第几个某节点,索引从0开始
27         _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele));
28         return _ele[num];
29     }
30 }
31  /*
32  测试
33   */
34     var list=document.getElementById("list");
35     console.log(nth(list,"li",2).innerHTML);//选取第三个li元素
36     console.log(nth(list,"button",3).innerHTML)//选取第四个按钮
37     console.log(nth(nth(list,"li",1),"button",1).innerHTML);//选取第二个li下的第二个按钮
38     console.log(nth(nth(list,"li",1),"button"));//选取第二个li下的所有按钮
39     console.log(nth(list,2));//选取第二个元素
时间: 2025-01-15 21:44:05

js获取第n个元素节点的相关文章

JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName ###adv### 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: <a id="link1" name="link1" href=http://homepage.yesky.com>

javascript_获取iframe框架中元素节点的属性值

1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档. 2. JS原生方法获得iframe的window对象 document.getElementById("ifr").contentWindow; 3. 获取iframe框架的思路: (1)找到iframe框架 (2)获取iframe框架的window对象 (3)获取w

js 获取数组最后一个元素

javascript获取数组最后一个元素,js获取Array末尾元素 一.JavaScript pop() 方法 pop() 方法用于删除并返回数组的最后一个元素. var arr = new Array("js","JavaScript","jQuery"); var end = arr.pop() console.log(end);//jQuery console.log(arr);//["js", "JavaS

js获取frame内的元素

遇到这个问题在网上搜的时候感觉很乱,有很多的说法,但有的都不对,最后试了很多次才修改成功,在这里做下记录. 这个是获取父frame内的元素: var doc= window.parent.document.getElementById("leftFrame").contentWindow.document.getElementById("bookli"); 这句代码的意思是获取id="leftFrame"的frame中的一个id="bo

【笔记】js获取当前点击元素的索引

以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何获取index的如下: js代码 var ul = document.getElementById("list"); var ul_child = ul.getElementsByTagName('li'); for (var i = 0; i < ul_child.length;

js操作document文档元素 节点交换交换

<input type="text" value="1" id='text1'> <input type="text" value="2" id='text2'> <script> function a1(){ var a=document.getElementById('text1'); var b=document.getElementById('text2'); var c=a; a.

js获取iframe中的元素以及在iframe中获取父级的元素(包括iframe中不存在name和id的情况)

第一种情况:iframe中不存在name和id的方法:(通过contentWindow获取) var iframe = document.getElementsByTagName('iframe')[0];var ifr_document = iframe.contentWindow.document;//iframe中的文档内容 或者: var _iframe = document.getElementByIdx_x('iframeId').contentWindow; var _div =_

js获取数组中相同元素数量

<script> var array = new Array(1,2,5,1,4,4,2,3,5,1,1,5,5,5,6,7,3,9,9,10); var arr = new Array(); var test = new Array(); var num = 1; var temp = ""; var size = array.length; for(var i=0;i<size; i++){ for(var j=i+1;j<size; j++){ if(ar

js获取页面及个元素高度、宽度

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高(f