一直不知道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. Vistual Studio 2010(VS2010)安装 MVC3.0具体方法

    本文内容部分摘自园子里其他博主的内容,感谢他们的探索和分享,谢谢!本文主要方便自己记录自己的学习和操作过程,同时也希望能够通过搜索引擎通过不同的关键字分享该文章,以方便更多的同学. PS:VS2010 ...

  2. windows下mongodb集群搭建

    本文介绍在windows环境下如何搭建一个高可用性的mongodb集群.系统环境为win7,mongodb版本为3.6.3. 本文采用的是分片+副本集的方式搭建集群,将分别介绍如何使用副本集和分片来提 ...

  3. Java基础——iO（二）

    接着上一篇,继续做学习笔记.学IO这块,突然找到一点好处,好像以后操作电脑,尤其是电脑里的文件啥的,可以很少的用鼠标了.添加.修改.删除啥的,几行代码就可以搞定了.这只是我一个初学者的一点小心思,IO ...

  4. 《Inside Solid State Device》读书笔记

    这周我看了<Inside Solid State Device>一书,了解了解SSD作为软件的补充. 固态硬盘区别于将数据以磁形式存储的机械硬盘,使用了一种名为NAND的闪存颗粒,以电信号 ...

  5. POJ3616(KB12-R dp)

    Milking Time Time Limit: 1000MS    Memory Limit: 65536K Total Submissions: 9459  Accepted: 3935   De ...

  6. PHP定界符<<<eof 使用

    PHP是一个Web编程语言,在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况,如果用传统的输出方法 ——按字符串输出的话,肯定要有大量的转义符来对字符串中的引号等特 ...

  7. 转载文章CSS3的calc()使用

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

  8. ES6--JavaScript的第六个版本

    一.新的变量声明方式 let/cons 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 若是对变量提升不怎么了解的话可以去参考我的其 ...

  9. Maven安装本地jar包

    mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=10.2.0.1.0 -Dpackaging= ...

  10. Nginx控制并发连接数

    ngx_http_limit_conn_module这个模块用于限制每个定义的key值的连接数,特别是单IP的连接数. 不是所有的连接数都会被计数.一个符合计数要求的连接是整个请求头已经被读取的连接. ...