<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/domready.js"></script><!--必须导入该文件，搜狗输入domready.js-->
    <script>
        myReady(function(){
            //以下是HTMLCollection类数组对象//
            //var scripts=document.scripts;
            //console.log(scripts);//返回：HTMLCollection(2) [script, script]
            //var links=document.links;
            //console.log(links);//返回：HTMLCollection(10) [a, a#onea, a, a, a, a, a, a, a, a, onea: a#onea]
            //var images=document.images;
            //console.log(images);//返回：HTMLCollection(2) [img, img]
            //var forms=document.forms;
            //console.log(forms);//返回：HTMLCollection(2) [form, form]
            //var cells=document.getElementById("tr").cells;
            //console.log(cells);//返回：HTMLCollection(3) [td, td, td](火狐)
            //var options=document.getElementById("city").options;
            //console.log(options);//返回：HTMLOptionsCollection(5) [option, option, option, option, option, selectedIndex: 0]
            //var ps=document.getElementsByTagName("p");
            //console.log(ps);//返回：HTMLCollection(3) [p, p, p]
            
            //var cells=document.getElementById("tr").cells;
            //console.log(cells);//返回HTMLCollection类数组对象：HTMLCollection(3) [td#td, td, td, td: td#td]（谷歌）
            //console.log(cells.length);
            //console.log(cells.item(2));
            //console.log(cells.item(3));//超过类数组对象的长度时，显示为null
            //console.log(cells.namedItem("td"));//返回 cells 类数组中先查找 id="td"的cell对象，如不存在，则查找name="td"的cell对象，如果存在多个name="td"，则返回第一个。如果两个都不存在，则返回null对象。
            //=================以上是HTMLCollection类数组对象======================

//=================以下是NamedNodeMap类数组对象======================
            var box=document.getElementById("tab");//获取table对象
            var attributes=box.attributes;//获得box对象的属性。
            //console.log(attributes);
            //console.log(attributes.length);
            //console.log(attributes.style);
            //console.log(attributes.item(0));
            //console.log(attributes.item(1));
            //console.log(attributes.getNamedItem("style"));//获取指定属性的值。
            //console.log(attributes.removeNamedItem("style"));//删除指定属性,页面内的样式就会消失
            
            
            //=================HTMLCollection类数组对象创建节点实例======================
            var ps=document.getElementsByTagName("p");//获得HTMLCollection类数组对象
            var length=ps.length;
            alert(length);
            var i=0;
            while (i<length) {//这里不能写i=ps.length，(死循环),因为HTMLCollection类数组对象活的，每当文档结构发生变化时，都会进行更新。HTMLCollection,NamedNodeMap,NodeList
              var a=document.createElement("p");
              var txt=document.createTextNode("<h1>you are my sumshime"+i);
              a.appendChild(txt);
             document.getElementById("div").appendChild(a);
             i++;
            }
            
        })
    </script>
</head>
<body id="body">
    <div id="div">
        <ul id="ul1">
            <li id="oneLi"><a href="">1111</a><a href="" id="onea">22222</a><span id="span1"> </span> <span id="span2"></span></li>
            <li id="twoLi" name="oneLi"><a href="">4444</a><a href="" >5555</a><a href="">6666</a></li>
            <li id="threeLi"><a href="">7777</a><a href="" >8888</a><a href="">9999</a></li>
        </ul>
        <table id="tab" style="border: 1px solid #333; display:block;">
          <tr id="tr1" name="tr1">
            <td id="td">table</td>
            <td name="td">table1</td>
            <td name="td">table2</td>
          </tr>
          <tr id="tr2">
            <td>table</td>
            <td>table</td>
            <td>table</td>
          </tr>
        </table>
        <img src="" alt="" style="display: block; border: 1px solid; width: 100px; height: 100px; "><img src="" alt="" style="display: block; border: 1px solid; width: 100px; height: 100px; ">
        <form action="">
          姓名：<input type="text" name="name" value="张三">
          <input type="button" name="submit" value="提交">
        </form>
        <form action="">
          地址：<input type="text" name="address" value="中国">
          <input type="button" name="submit" value="提交">
        </form>
        <a href=""></a><a href=""></a>
        <select name="city" id="city">
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">深圳</option>
          <option value="3">重庆</option>
          <option value="4">厦门</option>
        </select>
        <p>基础挤出机会</p>
        <p>基础挤出机会</p>
        <p>基础挤出机会</p>
    </div>
</body>

==============

NodeList实例对象是一个类数组对象，它的成员是节点对象，包括childNodes和querySelectorAll()方法返回值

NamedNodeMap 会自我更新。如果在节点列表或 XML 文档中删除或添加一个元素，那么该列表将会自动更新

HTMLCollection集合包括getElementsByTagName()、getElementsByClassName()、getElementsByName()等方法的返回值，以及children、document.links、document.forms等元素集合

类数组对象HTMLCollenction的更多相关文章

  1. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

  2. js之数组，对象，类数组对象

    许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...

  3. [Effective JavaScript 笔记]第51条：在类数组对象上复用通用的数组方法

    前面有几条都讲过关于Array.prototype的标准方法.这些标准方法被设计成其他对象可复用的方法,即使这些对象并没有继承Array. arguments对象 在22条中提到的函数argument ...

  4. [Effective JavaScript 笔记]第58条：区分数组对象和类数组对象

    示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...

  5. jQuery的类数组对象结构

    Query就是为了获取DOM.操作DOM而存在的 所以为了更方便这些操作,让节点与实例对象通过一个桥梁给关联起来,jQuery内部就采用了一种叫"类数组对象"的方式作为存储结构,所 ...

  6. 将类数组对象(array-like object)转化为数组对象(Array object)

    用法:Array.prototype.slice.call(array-like object) // 创建一个类数组对象 var alo = {0:"a", 1:"b& ...

  7. JavaScript类数组对象参考

    JavaScript和DOM中有很多类数组对象,它们有以下特点 1.有length属性 2.可以使用[]通过下标访问 3.部分类数组对象使用[]访问成员时不只可以使用下标,还可以使用id或name 4 ...

  8. 浅谈JavaScript和DOM中的类数组对象

    JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...

  9. javascript 类数组对象

    原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做 ...

随机推荐

  1. [转帖]localectl

    localectl http://linux.51yip.com/search/localectl localectl 命令简介. 相关命令:暂无相关命令 localectl — 控制系统的本地化与键 ...

  2. MySQL主从同步报错1507

    mysql 从库上手动删除partiton后,主库未做修改.后期主库上删除partiton后,出现问题. 故障现场 Last_Errno: 1507 Last_Error: Error 'Error ...

  3. 【Jmeter源码解读】003——TCP采样器代码解析

    采样器地址为src.protocol.tcp.sampler 1.结构图 还有两个文件 ReadException:响应的异常,举例子就是服务端发生读取文本的问题,会产生异常 TCPSampler:采 ...

  4. fastdfs 集群搭建

    1.部署FastDFS及Nginx (本套FastDFS为简化版安装部署,只需解压至普通用户家目录下或者任意目录,解压后修改脚本,执行脚本后即可使用.) 说明:FastDFS分为tracker(默认端 ...

  5. 第十二章 ZYNQ-MIZ701 PL中断请求

      本篇文章主要介绍外设(PL)产生的中断请求,在PS端进行处理. 在PL端通过按键产生中断,PS接受到之后点亮相应的LED. 本文所使用的开发板是Miz701 PC 开发环境版本:Vivado 20 ...

  6. shell习题第12题：批量创建用户

    [题目要求] 用shell脚本实现如下需求 添加user_00 -- user_09 10个用户,并且给他们设置一个随机密码,密码要求10位包含大小写字母及数字,注意要把每个用户的密码记录到一个日志文 ...

  7. System.Data.EntityException: The underlying provider failed on Open.

    场景:IIS默认站点建立程序,使用Windows集成身份验证方式,连接SQLServer数据库也是采用集成身份验证.我报“System.Data.EntityException: The underl ...

  8. Unity 屏幕坐标到UGUI RectTransform本地坐标的转换

    public static bool ScreenPointToLocalPointInRectangle(RectTransform rect, Vector2 screenPoint, Camer ...

  9. python+django学习四

    1.setting.py中设置好   STATIC_URL = '/static/'STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')] 前端文件存 ...

  10. luogu1005矩阵取数游戏题解--区间DP

    题目链接 https://www.luogu.org/problemnew/show/P1005 分析 忽然发现这篇题解好像并没有什么意义...因为跟奶牛零食那道题一模一样,博主比较懒如果您想看题解的 ...