获取html元素有三种方法,其中通过类名和标签获取的结果为一个HTMLCollection对象。

HTMLCollection对象可以理解为一个包含html元素的数组(但不是数组),可以通过索引[ ]访问,索引从0开始。

HTMLCollection对象具有一个length属性,即包含的html元素的个数。

①通过id:var x=document.getElementById("intro"); x值为[object HTMLParagraphElement]

②通过class类名:var x=document.getElementsByClassName("intro");x值为[object HTMLCollection]

③通过标签名:var x=document.getElementsByTagName("p");x值为[object HTMLCollection]

<h3>JavaScript HTML DOM</h3>
<p>Hello world!</p>
<p class='test'>Hello world again!</p>
<p id='test'></p>
<p>点击按钮修改 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
var myCollection1 = document.getElementsByClassName('test');
document.getElementById('test').innerHTML=myCollection1;
var myCollection2 = document.getElementsByTagName("p");
for (var i = 0; i < myCollection2.length; i++) {
myCollection2[i].style.color = "red";}
}

对于HTMLCollection对象来说,通过for (var i in myCollection),遍历的结果除了索引下标,还会固定地有length、item和namedItem三个元素。

NodeList对象是从文档中获取的节点列表集合,浏览器的querySelectorAll()返回 NodeList 对象。

<h3>JavaScript HTML DOM</h3>
<p>Hello world!</p>
<p>Hello world again!</p>
<p id='test1'></p>
<p id='test2'></p>
<script>
var myNodeList = document.querySelectorAll('p');
document.getElementById('test1').innerHTML=myNodeList;
document.getElementById('test2').innerHTML=myNodeList.length+'个段落'
</script>

对于NodeList对象来说,通过for (var i in myNodeList),遍历的结果除了索引下标,还会固定地有length、item、entries、forEach、keys和values六个元素。

HTMLCollection是HTML元素的集合,而NodeList 是文档节点的集合。

相同点:都可以通过索引获取元素;都有length属性;非数组,无法使用数组的方法valueOf()、pop()、push()或join()

不同点:获取方法不同,前者是通过类名和标签获取的html元素,后者是通过querySelectorAll()获取的文档节点

    前者还可通过name和id获取元素,而后者只能通过索引来获取

    后者包含属性节点和文本节点

HTMLCollection 对象和NodeList 对象的更多相关文章

  1. HTMLCollection对象和NodeList对象

    前言 首先我们先来看下面的demo,假如我们需要给所有的li字体变一个颜色. <!DOCTYPE html> <html lang="en"> <he ...

  2. NodeList对象的特点

    nodeList对象的特点1,nodeList是一种类数组对象,用于保存一组有序的节点.2,通过方括号来访问nodeList的值,有item方法与length属性.3,它并不是Array的实例,没有数 ...

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

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

  4. Document对象和window对象

    window对象--- 代表浏览器中的一个打开的窗口或者框架,window对象会在<body>或者<frameset>每次出现时被自动创建,在客户端JavaScript中,Wi ...

  5. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  6. jQuery 源码解析(七) jQuery对象和DOM对象的互相转换

    jQuery对象是一个类数组对象,它保存的是对应的DOM的引用,我们可以直接用[]获取某个索引内的DOM节点,也可以用get方法获取某个索引内的DOM节点,还可以用toArray()方法把jQuery ...

  7. 判断一个对象是jQuery对象还是DOM对象

    今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...

  8. 一种简单,轻量,灵活的C#对象转Json对象的方案(续)

    本文参考资料 一种简单,轻量,灵活的C#对象转Json对象的方案 [源码]Literacy 快速反射读写对象属性,字段 一段废话 之前我已经介绍了这个方案的名称为JsonBuilder,这套方案最大的 ...

  9. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

随机推荐

  1. word2vec模型评估方案

    1.word2vec参数详解 · sentences:可以是一个·ist,对于大语料集,建议使用BrownCorpus,Text8Corpus或·ineSentence构建.· sg: 用于设置训练算 ...

  2. Vim的6种基本模式及基本操作

    说明:文章所有内容截选自实验楼教程[Vim编辑器]~ Vim 快速入门 一.实验介绍 1.1 实验内容 本次实验将学习vim中的不同模式和一些基本操作. 1.2 实验知识点 Vim中的六种基本模式 V ...

  3. composer install 遭遇404错误

    [Composer\Downloader\TransportException] The "https://packagist.phpcomposer.com/p/provider-2019 ...

  4. cocos2d JS-(JavaScript) 类型检测与判断

    //检测类型 var str = "Hello World"; if (typeof str=="string") {//使用typeof来判断对象类型的一个例 ...

  5. PHP乘法表

    <?php //一行*$a="*";echo ("$a <br>"); //一行50个*for($j=1;$j<=50;$j++){ e ...

  6. Service Fabric下删除实例并注销应用

    Service Fabric下删除实例并注销应用: 以应用名称:Application1为例 1.打开PowerShell 2.连接集群: Connect-ServiceFabricCluster - ...

  7. 关于windows中80端口被占用

    很奇怪,windows7系统中的80端口被pid 为4 的system进程监听. 尝试关闭IIS功能,并在这期间进行过多次重启,均无效. 后来依照这篇文件解决的:https://www.jianshu ...

  8. unity之复制文本到剪贴板

    代码如下: static void CopyString(string str) { TextEditor te = new TextEditor(); te.text = str; te.Selec ...

  9. java中JDBC连接Oracle数据库

    package com.xxxx.lunwen.test;import java.sql.*;public class DBUtil { static { try { // 加载Oracle驱动程序 ...

  10. string 常量池 栈 堆