在阅读《JS DOM 编程一书》一书时,看到getElementByTagName函数返回值为数组,然后自己验证了下,发现不是数组,而是一个可遍历的HTMLCollection对象

HTML:

    <h1>需要买什么</h1>
<p>不要忘记买以下东西</p>
<ul id='purchase'>
<li>香蕉</li>
<li>苹果</li>
<li>桃子</li>
</ul>
<div>这是你要买的东西</div>
<div id='hello'>你好</div>
<div id="info"></div>

JS:

window.onload=function(){
var divs=document.getElementsByTagName('div');
console.log(divs);
console.log(typeof divs); //object
console.log(divs instanceof Array);//返回false //由此可见,getElementsByTagName方法,返回的不是一个Array
//而是一个dom对象,可以遍历 var info=document.getElementById('info');
info.innerHTML=Object.prototype.toString.call(divs); }

控制台显示结果如下:

geteLElementsByTagName()返回值可使用for循环进行遍历,且集合内是一个一个的对象。以上面的例子为例

for(var i=0;i<divs.length;i++){
  console.log(divs[i]);
   console.log(typeof divs[i]);
}

控制台输出为:

那么如何获取HTMLCollection对象中的对象呢

方式一:通过index获取,继续上面的栗子

var div1=divs[0];
console.log(div1);
console.log(typeof div1);

输出:

方式二:通过["id"]获取

var hdiv=divs["hello"];
console.log(hdiv);
console.log(typeof hdiv);

输出为:

好读书,求甚解

document.getElementsByTagName()方法的返回值的更多相关文章

  1. 一个方法中的ajax在success中renturn一个值,但是方法的返回值是undefind?

    https://segmentfault.com/q/1010000003762379 A页面 console.log(handleData("search_list", &quo ...

  2. Controller方法的返回值

    方法的返回值1.ModelAndView这个就不多说,这是最基础的,前面定义一个ModelAndView,中途使用addObject方法添加属性,再返回.视图解析器会自动扫描到的.2.String这个 ...

  3. java中Arrays类中,binarySearch()方法的返回值问题

    最近在复习Java知识,发现果然不经常使用忘得非常快... 看到binarySearch()方法的使用时,发现书上有点错误,于是就自己上机实验了一下,最后总结一下该方法的返回值. 总结:binaryS ...

  4. SSM-SpringMVC-21:SpringMVC中处理器方法之返回值Object篇

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 今天要记录的是处理方法,返回值为Object的那种,我给它分了一下类: 1.返回值为Object数值(例如1) ...

  5. Java反射机制二 获取方法的返回值或参数的泛型信息

    在使用反射机制时,我们经常需要知道方法的参数和返回值类型,很简单  ,下面上示例,示例中的两个方法非常相似 package deadLockThread; import java.lang.refle ...

  6. SpringMVC由浅入深day01_10@RequestMapping_11controller方法的返回值

    10 @RequestMapping 10.1 Url路径映射 @RequestMapping(value="/item")或@RequestMapping("/item ...

  7. 7 -- Spring的基本用法 -- 10... 获取其他Bean的属性值;获取Field值;获取任意方法的返回值

    7.10 高级依赖关系配置 组件与组件之间的耦合,采用依赖注入管理:但基本类型的成员变量值,应直接在代码中设置. Spring支持将任意方法的返回值.类或对象的Field值.其他Bean的getter ...

  8. getSqlMapClientTemplate().insert()方法的返回值问题

    insert方法的返回值     今天碰到一个问题,就是关于ibatis的insert方法的返回值的问题.在网上找了很多例子,自己也亲自试了一下. 最后得出结论:insert方法返回的是在表中插入记录 ...

  9. 【mybatis】mybatis执行一个update方法,返回值为1,但是数据库中数据并未更新,粘贴sql语句直接在数据库执行,等待好久报错:Lock wait timeout exceeded; try restarting transaction

    今天使用mybatis和jpa的过程中,发现这样一个问题: mybatis执行一个update方法,返回值为1,但是数据库中数据并未更新,粘贴sql语句直接在数据库执行,等待好久报错:Lock wai ...

随机推荐

  1. jQuery字体图标的三种方法

    BootStrap框架原生图标 在导入BootStrap包的同时,导入bootstrap-3.3.7-dist/css/bootstrap.css层叠样式; <button type=" ...

  2. bash配置文件

    bash的配置文件 一.shell的两种登录方式: 1.交互式登录: (1)直接通过终端输入账号密码登录 (2)使用"su - UserName" 切换的用户 执行顺序:/etc/ ...

  3. springboot(一).初识springboot以及基本项目搭建

    初识springboot 以及基本项目搭建 由于新的项目需要搭建后台框架,之前的springmvc架构也使用多次,在我印象中springboot的微服务架构更轻量级更容易搭建,所以想去试试spring ...

  4. Comparable接口与Comparator接口的比较————Comparable接口详解

    Comparable接口位于:java.lang包中. Comparable接口: 1. 实现了这个接口的类,会被强制进行自然排序. 问题又来了:那什么是自然排序呢? 自然排序:就是字典序排序,不分大 ...

  5. 二次封装axios,根据参数来实现多个请求多次拦截

    1. 新建 axiosTool.js 文件,设置请求拦截和处理的逻辑 import Vue from 'vue' import axios from 'axios' //取消请求 let Cancel ...

  6. 读写锁StampedLock的思想

    该类是一个读写锁的改进,它的思想是读写锁中读不仅不阻塞读,同时也不应该阻塞写. 读不阻塞写的实现思路: 在读的时候如果发生了写,则应当重读而不是在读的时候直接阻塞写! 因为在读线程非常多而写线程比较少 ...

  7. 【后台管理系统】—— Ant Design Pro 项目爬坑(一)

    1.表单rule中可以分对象处理不同规则 <FormItem label="类型名称" {...formLayout}> { form.getFieldDecorato ...

  8. docker常用软件安装及使用

    linux安装docker: sudo wget -qO- https://get.docker.com | sh 启动docker: service docker start 搜索镜像: docke ...

  9. 【C++ STL 优先队列priority_queue】

    https://www.cnblogs.com/fzuljz/p/6171963.html

  10. 测开之路一百四十八:WTForms表单验证

    使用WTForms表单验证,可以在数据建模时就设置验证信息和错误提示 创建模型时,设置验证内容,如必填.格式.长度 from flask_wtf import Formfrom wtforms imp ...