类数组对象HTMLCollenction
<!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的更多相关文章
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- js之数组，对象，类数组对象
许久不写了,实在是不知道写点什么,正好最近有个同事问了个问题,关于数组,对象和类数组的,仔细说起来都是基础,其实都没什么好讲的,不过看到还是有很多朋友有些迷糊,这里就简单对于定义以及一下相同点,不同点 ...
- [Effective JavaScript 笔记]第51条：在类数组对象上复用通用的数组方法
前面有几条都讲过关于Array.prototype的标准方法.这些标准方法被设计成其他对象可复用的方法,即使这些对象并没有继承Array. arguments对象 在22条中提到的函数argument ...
- [Effective JavaScript 笔记]第58条：区分数组对象和类数组对象
示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...
- jQuery的类数组对象结构
Query就是为了获取DOM.操作DOM而存在的 所以为了更方便这些操作,让节点与实例对象通过一个桥梁给关联起来,jQuery内部就采用了一种叫"类数组对象"的方式作为存储结构,所 ...
- 将类数组对象(array-like object)转化为数组对象(Array object)
用法:Array.prototype.slice.call(array-like object) // 创建一个类数组对象 var alo = {0:"a", 1:"b& ...
- JavaScript类数组对象参考
JavaScript和DOM中有很多类数组对象,它们有以下特点 1.有length属性 2.可以使用[]通过下标访问 3.部分类数组对象使用[]访问成员时不只可以使用下标,还可以使用id或name 4 ...
- 浅谈JavaScript和DOM中的类数组对象
JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...
- javascript 类数组对象
原文:https://segmentfault.com/a/1190000000415572 定义: 拥有length属性,其他属性(索引)为非负整数(对象中的所有会被当做字符串来处理,这里你可以当做 ...
随机推荐
- bat命令教程
转自:https://www.jb51.net/article/151923.htm 第一章 批处理基础 第一节 常用批处理内部命令简介 批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合 ...
- orcale备份语句
1.创建一个文件夹,比如d盘下创建一个expdp的文件夹 d:\expdp2.使用一个用户,必须具有DBA权限 比如 sqlplus /nolog conn system/password@数据库连接 ...
- 【AtCoder】AGC007
AGC007 A - Shik and Stone 如果i + j走过的格子只有一个,那么就是可以走到 #include <bits/stdc++.h> #define fi first ...
- [python]近日 用3种库 实现简单的窗口 的回顾~
最近任务:利用python 实现以下4个窗口弹窗. 信息提示框 文本输入框(需在窗口消失后,返回 用户输入的值) 文件选择(需在窗口消失后, 返回 用户选择的文件名的全路径) 文件夹选择(需在窗口消失 ...
- 编写函数模拟strcpy()函数功能
strcpy(字符数组1,字符串2) strcpy( )用于将字符串2复制到字符数组1中 /* strcpy(字符数组1,字符串2) strcpy( )用于将字符串2复制到字符数组1中 模拟strcp ...
- 【搜索】Partition problem
题目链接:传送门 题面: [题意] 给定2×n个人的相互竞争值,请把他们分到两个队伍里,如果是队友,那么竞争值为0,否则就为v[i][j]. [题解] 爆搜,C(28,14)*28,其实可以稍加优化, ...
- docker 入门3 - 服务 【翻译】
入门,第 3 部分:服务 先决条件 安装 Docker 版本 1.13 或更高版本. 获取 Docker Compose.在适用于 Mac 和 Docker 桌面的 Windows 上,它已预安装,因 ...
- idea中创建的go项目，添加project sdk时没有go sdk选项的解决方式
同样是后端开发,年薪50万和年薪20万的差距在哪里>>> 更新: 为了防止你被我这个流水账气到,先看这个结论吧:这个问题的结局方法:忽略,没有什么影响. -------------- ...
- 图数据库-Neo4j-初探
图数据库-Neo4j-初探 2018-08-17 本次初探主要学习如何安装Neo4j,以及Cypher的基本语法. 1. 安装Neo4j Desktop版本 neo4j-desktop Server版 ...
- 怎样理解 display:none 和 visibility:hidden
1. display: none会使元素节点 "消失" , 就像 死亡后灰飞烟灭了. 它是不占位置的. 2. visibility: hidden会使元素节点 "隐藏&q ...