一直不知道javascript还有类似jQ里面eq()的函数，原来原生javascript的item()有类似功能：

由于是原生javascript,先补习下children和childNodes的区别：

1，childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。
可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
2，children：非标准属性，它返回指定元素的子元素集合。
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

实例

返回元素的首个子节点：

document.body.childNodes.item(0);

　　测试代码：w3c地址来测试

<!DOCTYPE html>

<html>

<body>

<div id="div1">

 <p class="demo">点击按钮来获得 body 元素0个子节点的名称。</p>

 <p class="demo">点击按钮来获得 body 元素1个子节点的名称。</p>

 <p class="demo">点击按钮来获得 body 元素2个子节点的名称。</p>

 <p class="demo">点击按钮来获得 body 元素3个子节点的名称。</p>

</div>

 <div id="demo"></div>

<button onclick="myFunction()">试一下</button>

<script>

function myFunction()

{

var x = document.getElementById("demo");

var div1 =  document.getElementById("div1");

x.innerHTML = div1.childNodes.item(3).nodeName; 
//x.innerHTML = div1.children.item(1).nodeName; //children得到的是元素节点

}

</script>

</body>

</html>

下面来说明下item()的用法：

定义和用法

item() 方法节点列表中位于指定索引的节点。

以下两条语法产生相同的结果：

document.body.childNodes.item(0);

document.body.childNodes[0];

　

　

HTML DOM item() 方法的更多相关文章

  1. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  2. DOM 对象方法

    DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTagName() 返回包含带有指定 ...

  3. HTML DOM submit() 方法

    HTML DOM submit() 方法 HTML DOM Form 对象 定义和用法 submit() 方法把表单数据提交到 Web 服务器. 语法 formObject.submit() 说明 该 ...

  4. Vue 中 diff 算法后更新 DOM 的方法

    vue 2.0加入了 virtual dom,在 node_modules\vue\src\core\vdom\patch.js 中会对虚拟 DOM 进行 diff 算法等,然后更新 DOM. 网上的 ...

  5. 使用DOM的方法获取所有li元素，然后使用jQuery()构造函数把它封装为jQuery对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery DOM 元素方法（get）

    jQuery DOM 元素方法 1..get() 获得由选择器指定的 DOM 元素. $(selector).get(index)index 可选.规定获取哪个匹配元素(通过 index 编号). 实 ...

  7. item()方法遍历字典

    Python字典的遍历方法有好几种,其中一种是for...in,这个我就不说明,在Python了几乎随处都可见for...in.下面说的这种遍历方式是item()方法. item() item()方法 ...

  8. HTML DOM focus() 方法

    目录 HTML DOM focus() 方法 实例 定义和使用 浏览器支持 语法 参数 技术描述 更多实例 实例 实例 HTML DOM focus() 方法 实例 为 <a> 元素设置焦 ...

  9. python面向对象--item方法

    class Foo: def __getitem__(self, item): print("getitem") return self.__dict__[item] def __ ...

随机推荐

  1. 并发编程之 CopyOnWriteArrayList 源码剖析

    前言 ArrayList 是一个不安全的容器,在多线程调用 add 方法的时候会出现 ArrayIndexOutOfBoundsException 异常,而 Vector 虽然安全,但由于其 add ...

  2. C# Azure 用Webhook添加警报规则

    本篇文章的目的是什么? Azure云端一直困扰着我的是,如果遇到数据库累积数据量过大.数据库DTU过大.应用程序服务访问量过大等,我们都没办法知道他们什么时候过大.只能做的是,我们天天看着我们的应用, ...

  3. jQuery找到GridView控件ItemTemplate模版内的控件

    可以使用下面的方法,jQuery找到GridView控件ItemTemplate模版内的CheckBox: 使用jQuery的find()方法:

  4. 链接正常但IE浏览器无法显示网页的几种情况

    一.感染病毒木马所致 这种情况往往表现在打开IE时,在IE界面的左下框里提示:正在打开网页,但一直无响应. 右击任务栏/任务管理器/进程,查看.如果CPU占用率100%,可以断定是感染了病毒,这时要查 ...

  5. Word文档中多个编号放同一行的方法(非技术)

    最近在帮公司出应届生校招面试题,为了方便,选择题部分的答案用了Word的[编号]功能!如下截图所示: 这么简短的四个答案这么竖着放很占空间(打印时也很浪纸张),能不能让它们全部横放在同一行,或两两一组 ...

  6. Linux常用基本命令(xargs )

    xargs:能够将管道或者标准输入传递的数据转换成xargs命令后面跟随的参数 ghostwu@dev:~/linux/cp$ ls ghostwu_hardlink ghostwu_home gho ...

  7. PHP trick（代码审计关注点）

    随着代码安全的普及,越来越多的开发人员知道了如何防御sqli.xss等与语言无关的漏洞,但是对于和开发语言本身相关的一些漏洞和缺陷却知之甚少,于是这些点也就是我们在Code audit的时候的重点关注 ...

  8. IT的2017，面临数字生态系统新挑战，该怎么办？

    所谓数字生态系统,就是包含一系列基于标准,规模可变的硬件.软件.数字设备和服务,可系统地实现企业信息数字化,数据流通,以帮助企业提高运营效率. 随着越来越多的中国企业加入数字生态系统,中国CIO在技术 ...

  9. 安卓测试【二】eclipse离线安装ADT

    为什么要配置ADT呢?这就相当于在eclipse里插入插件,可以编译android的相关程序. 为什么要离线呢?一个字,快!我在线装了一个下午的ADT,不是报错就是慢的跟头老牛似的. 所以我在网上下了 ...

  10. JSTL、JSTL核心标签库——流程处理标签

    JSTL环境 JSTL是另一个标准规范,并非在JSP的规范中,所以必须另外下载JSTL实现. 要使用JSTL标签库,必须在JSP网页上使用taglib指示元素定义前置名称与uri参考.例如,引入JST ...