document.getElementsByTagName()返回的真的是数组吗?

这是这几天开发中遇到的问题。

一个如下的HTML结构:

  1. <ul>
  2. <li>
  3. <li>
  4. ...
  5. <li>
  6. </ul>

document.getElementsByTagName()方法获取其中的<li>节点:

  1. var li = document.getElementsByTagName("li");
  2. var content = li.slice(0,5);

居然出现TypeError,这说明li中没有slice()方法,怎么会这样呢?

于是我查了查li的原型:

  1. console.log(li.__proto__
  2. /*
  3. Object {}
  4. constructor:HTMLCollection()
  5. item:item()
  6. length:(...)
  7. get length:()
  8. namedItem:namedItem()
  9. __proto__:Object
  10. */

果然,li确实是一个数组,然而并没有继承自Array.prototype,而是一个HTML对象实例,也就是《JS高程》里所说的NodeList,所以我们不能直接使用任何数组方法,想要使用数组方法,我们可以借助call()apply(),比如:

  1. var content = Array.prototype.slice.apply(li,[0,5]);

用document.getElementsByTagName()返回的真的是数组吗?的更多相关文章

  1. document.getElementsByClassName返回的是一个数组

    转载自:https://www.cnblogs.com/shark1100913/p/6713327.html   document.getElementsByClassName("a&qu ...

  2. document.getElementsByTagName()方法的返回值

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

  3. js 原生 document.querySelectorAll document.getElementsByTagName document.querySelector document.getElementById的区别

    1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.querySelectorAll返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组). ...

  4. 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截

    程序猿修仙之路--数据结构之你是否真的懂数组?   数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构  .要想在之后的江湖历练中通关,数据结构必不可少. ...

  5. document.getElementsByTagName

    var elems = document.forms[form_name].getElementsByTagName("INPUT"); getElementsByTagName( ...

  6. 关于querySelector 和 document.getElementsByTagName 选中集合问题

    本文解决的问题是 :运用for..of..循环时,edge浏览器报Object doesn't support property or method 'symbol.iterator'问题 以及 符号 ...

  7. 第四十三条:返回零长度的数组或者集合,而不是null

    如果一个方法的返回值类型是集合或者数组 ,如果在方法内部需要返回的集合或者数组是零长度的,也就是没有实际对象在里面, 我们也应该放回一个零长度的数组或者集合,而不是返回null.如果返回了null,客 ...

  8. 函数指针的返回值是指针数组,数组里放的是int;函数指针的返回值是指针数组,数组里放的是int指针

    函数指针的返回值是指针数组,数组里放的是int 函数指针的返回值是指针数组,数组里放的是int指针 #include <stdio.h> #include <stdlib.h> ...

  9. lastIndexOf() 找出指定元素出现的所有位置(返回的是下标数组)---lastIndexOf() 这个方法是倒叙查找,正序的是indexOf()

    var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.las ...

随机推荐

  1. Mysql表复制及备份还原

    1.复制表结构   1.1 含有主键等信息的完整表结构   CREATE table 新表名 LIKE book;     1.2 只有表结构,没有主键等信息   create table 新表名 s ...

  2. android 如何解决模块之间的通讯的耦合问题

    使用EventBus http://wuyexiong.github.io/blog/2013/04/30/android-fragment/ http://yunfeng.sinaapp.com/? ...

  3. angularjs 将带标签的内容解析后返回

    参考地址:http://okashii.lofter.com/post/1cba87e8_29e0fab 引入angular-sanitize.js文件 注入ngSanitize 页面数据绑定 ng- ...

  4. apache httpd配置ajp报错:ap_proxy_connect_backend disabling worker for (localhost)

    报错信息: (13)Permission denied: proxy: AJP: attempt to connect to 127.0.0.1:9019 (localhost) failed[Wed ...

  5. js 表单不为空,数字长度验证

    $(document).ready(function() {    //聚焦第一个输入框    $("#invtype").focus();                     ...

  6. javascript事件详解1

    事件流讲解来袭,嘎嘎嘎嘎嘎 ---------------------------------------------------------------- 1.事件流:描述的是在页面中接受事件的顺序 ...

  7. 文字超出DIV的边框

    已经给div设置了高宽,但是文字还是会戳出div而不是换行 鼓捣了一下好像是因为这个原因 如果全是 aaaaaaaaaaaaaaaaaaaaa 这样的纯英文,那么测试的时候是不会换行的,因为浏览器认为 ...

  8. java——输入流FileInputStream

    写一个简单的程序,实现从电脑中的一个盘里的文件中往程序中输入内容. package com.liaojianya.chapter5; import java.io.FileInputStream; i ...

  9. MATLAB中mexFunction函数的接口规范

    MEX文件的调用极为方便,其调用方式与MATALAB的内建函数完全相同,只需要在命令窗口内输入对应的文件名称即可. C语言MEX程序代码文件有计算子例程(Computational routine)和 ...

  10. 泛型? extents super

    ?可以接受任何泛型集合,但是不能编辑集合值.所以一般只在方法参数中用 例子: ? extends Number  则类型只能是Number类的子孙类 ? super String  则类型只能是Str ...