HTMLCollection 对象和NodeList 对象
获取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 对象的更多相关文章
- HTMLCollection对象和NodeList对象
前言 首先我们先来看下面的demo,假如我们需要给所有的li字体变一个颜色. <!DOCTYPE html> <html lang="en"> <he ...
- NodeList对象的特点
nodeList对象的特点1,nodeList是一种类数组对象,用于保存一组有序的节点.2,通过方括号来访问nodeList的值,有item方法与length属性.3,它并不是Array的实例,没有数 ...
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- Document对象和window对象
window对象--- 代表浏览器中的一个打开的窗口或者框架,window对象会在<body>或者<frameset>每次出现时被自动创建,在客户端JavaScript中,Wi ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- jQuery 源码解析(七) jQuery对象和DOM对象的互相转换
jQuery对象是一个类数组对象,它保存的是对应的DOM的引用,我们可以直接用[]获取某个索引内的DOM节点,也可以用get方法获取某个索引内的DOM节点,还可以用toArray()方法把jQuery ...
- 判断一个对象是jQuery对象还是DOM对象
今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...
- 一种简单,轻量,灵活的C#对象转Json对象的方案(续)
本文参考资料 一种简单,轻量,灵活的C#对象转Json对象的方案 [源码]Literacy 快速反射读写对象属性,字段 一段废话 之前我已经介绍了这个方案的名称为JsonBuilder,这套方案最大的 ...
- jQuery对象和DOM对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
随机推荐
- word2vec模型评估方案
1.word2vec参数详解 · sentences:可以是一个·ist,对于大语料集,建议使用BrownCorpus,Text8Corpus或·ineSentence构建.· sg: 用于设置训练算 ...
- Vim的6种基本模式及基本操作
说明:文章所有内容截选自实验楼教程[Vim编辑器]~ Vim 快速入门 一.实验介绍 1.1 实验内容 本次实验将学习vim中的不同模式和一些基本操作. 1.2 实验知识点 Vim中的六种基本模式 V ...
- composer install 遭遇404错误
[Composer\Downloader\TransportException] The "https://packagist.phpcomposer.com/p/provider-2019 ...
- cocos2d JS-(JavaScript) 类型检测与判断
//检测类型 var str = "Hello World"; if (typeof str=="string") {//使用typeof来判断对象类型的一个例 ...
- PHP乘法表
<?php //一行*$a="*";echo ("$a <br>"); //一行50个*for($j=1;$j<=50;$j++){ e ...
- Service Fabric下删除实例并注销应用
Service Fabric下删除实例并注销应用: 以应用名称:Application1为例 1.打开PowerShell 2.连接集群: Connect-ServiceFabricCluster - ...
- 关于windows中80端口被占用
很奇怪,windows7系统中的80端口被pid 为4 的system进程监听. 尝试关闭IIS功能,并在这期间进行过多次重启,均无效. 后来依照这篇文件解决的:https://www.jianshu ...
- unity之复制文本到剪贴板
代码如下: static void CopyString(string str) { TextEditor te = new TextEditor(); te.text = str; te.Selec ...
- java中JDBC连接Oracle数据库
package com.xxxx.lunwen.test;import java.sql.*;public class DBUtil { static { try { // 加载Oracle驱动程序 ...
- string 常量池 栈 堆