一直不知道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. pdf.js 使用汇总

    https://www.cnblogs.com/iPing9/p/7154753.htmlhttp://blog.csdn.net/m0_38021128/article/details/708684 ...

  2. .net解决Xss攻击

    首先要明白什么是Xss攻击 XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中.比如这些代码包括HTML代码和客户端脚本.攻击者利用XSS漏 ...

  3. Linux常用基本命令( mkdir )

    mkdir: 作用:创建目录( make directories ) 命令格式: make [option] 目录 1,创建目录, 当目录存在时,再次创建会提示文件已经存在 ghostwu@dev:~ ...

  4. Codeforces841A

    A. Generous Kefa time limit per test:2 seconds memory limit per test:256 megabytes input:standard in ...

  5. php中的或运算

    1.今天碰到一个php或运算的面试题,很有趣,和大家分享一下.开始不明白什么原因. <?php $a = 0; $b = 0; if($a=3)>0 || ($b=3)>0) { $ ...

  6. python学习之老男孩python全栈第九期_数据库day005知识点总结 —— MySQL数据库day5

    三. MySQL视图(不常用) 给某个查询语句设置个别名(视图名),日后方便使用 - 创建: create view 视图名 as SQL; PS:视图是虚拟的 - 修改: alter view 视图 ...

  7. easyui+webuploader+ckeditor实现插件式多图片上传

    需求:在ckeditor编辑器上实现多图片上传并要求另外单独选择ckeditor上传的图片作为封面 页面效果说明: 动态效果图: 第一步:页面布局 <html xmlns="http: ...

  8. <Android 基础（三十五）> RecyclerView多类型Item的正确实现姿势

    简介 RecyclerView是我们开发过程中经常使用到的一个元素,原生的RecyclerView.Adapter基本上可以满足一般的需求,关于RecyclerView的基础介绍请移步: Recycl ...

  9. 简单三招，设计复杂ERP报表

    报表无疑是ERP系统中用到的最频繁的单据之一.比如每天采购要打印采购明细帐:仓库每天要导出收货或者出货明细:销售每天要打印订单明细等.故报表的设计在ERP系统开发中占据大半江山. 不过笔者在实际工作中 ...

  10. Python使用MySQLConnector/Python操作MySQL、MariaDB数据库

    使用MySQL Connector/Python操作MySQL.MariaDB数据库   by:授客 QQ:1033553122 因目前MySQLdb并不支持python3.x,而MySQL官方已经提 ...