js-NodeList对象和HTMLCollection对象

getElementsByName()和getElementsByTagName()都返回NodeList对象,而类似document.images和document.forms的属性为HTMLCollection对象. 这些对象都是只读的类数组对象.它们有length属性,也可以像真正的数组一样索引(只是读而不是写).可以对一个NodeList或HTMLCollection的内容用一下标准的循环进行迭代: for(var i=0;i<document.images.length;i++)//循…

HTMLCollection 对象和NodeList 对象

获取html元素有三种方法,其中通过类名和标签获取的结果为一个HTMLCollection对象. HTMLCollection对象可以理解为一个包含html元素的数组(但不是数组),可以通过索引[ ]访问,索引从0开始. HTMLCollection对象具有一个length属性,即包含的html元素的个数. ①通过id:var x=document.getElementById("intro"); x值为[object HTMLParagraphElement] ②通过class类名:…

querySelector()与querySelectorAll()的区别及NodeList和HTMLCollection对象的区别

querySelector().Document.Element类型均可调用该方法. 当用Document类型调用querySelector()方法时,会在文档元素范围内查找匹配的元素:而当用Element类型调用querySelector()方法时,只会在这个元素的后代元素中去查找匹配的元素.若不存在匹配的元素,则这两种类型调用该方法时,均返回null. querySelectorAll().Document.DocumentFragment.Element类型均可调用该方法. querySe…

HTMLCollection对象和NodeList对象

前言首先我们先来看下面的demo,假如我们需要给所有的li字体变一个颜色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="list"> <li>aaaaa…

js中的类数组对象---NodeList

动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是一种特殊类型的对象. DOM Level 3 spec 规范对 HTMLCollection 对象的描述如下: DOM中的 NodeList 和 NamedNodeMap 对象是动态的(live); 也就是说,对底层文档结构的修改会动态地反映到相关的集合NodeList 和 NamedNodeMa…

HTMLCollection 对象详解，以及为什么循环获取的dom合集操作可能会出现下标不正确的情况？

有时候循环dom合集,然后操作其中的某些dom之后,发现下标不正确了比如我们要删除一个dom合集的时候: var selectDom = document.getElementsByClassName("active"); for(var i=0; i<selectDom.length; i++){ content.removeChild(selectDom[i]); } 上面代码中,我们获取了选中项(class为active),然后循环进行删除,但是最后发现,只能删除一部分d…

JS中遍历数组、对象的方式

1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { console.log(array[i]); } 2.for in 遍历对象不要用for in遍历数组,因为还会打印自定义属性和继承属性一般常用来遍历非数组的对象并且使用hasOwnProperty()方法去过滤掉原型链上的属性数组的key是string类型,因为js中一切皆为对象. var array =…

170104、js内置对象与原生对象

内置对象与原生对象内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动态创建的对象. 原生对象(New后的对象) ECMA-262 把原生对象(native object)定义为"独立于宿主环境的 ECMAScript 实现提供的对象".包括如下: Object.Function.Array.String.Boolean.Number.Date.RegExp.Error.EvalE…

JS 学习（四）对象

对象在JS中,对象是数据(变量),拥有属性和方法. JS中所有事物都是对象:字符串.数字.数组.日期等. 对象是拥有属性和方法的特殊数据类型. 属性是与对象相关的值. 方法是能够在对象上执行的动作. // 对象由花括号分隔.在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义.属性由逗号分隔 var myDog = { age : 20, //也可以这样写 'age' : 20 "age" : 20 name : 'rose' }; // 对象属性有两种寻址…

JS搞基指南----延迟对象入门提高资料整理

JavaScript的Deferred是比较高大上的东西, 主要的应用还是主ajax的应用, 因为JS和nodeJS这几年的普及, 前端的代码越来越多, 各种回调套回调再套回调实在太让人崩溃, 所以就从后端拖了一个延迟对象这货, 用来解决回调地狱这个问题 . 我们使用ajax的时候多数都是为ajax添加回调 ,然后异步向服务器发送请求, 比如如下原生的XHR代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/…

JS中数据类型及原生对象简介

js是一种专门设计用来给网页增加交互性的编程语言,它的技术体系包含了一下几个方面: 1.JavaScript核心语言定义:包括数据类型,变量,常量,运算符,语句等. 2.原生对象和内置对象 3.浏览器对象BOM 4.文档对象类型DOM 5.事件处理模型将js添加到文档中的方法有三种: 1.内嵌式 2.将js源文件通过<script>元素的src属性连接到XHTML文档中 3.脚本包含在XHTML事件处理属性中,例如onclick js的数据类型分为原始数据类型和引用数据类型: 一.原始数据类…

JS 学习笔记--11---内置对象(Global/Math)

练习中使用的浏览器是IE10,如果各位朋友有不同意见或者遇到浏览器不兼容问题,希望指正 1.内置对象的定义:有ECMAScript实现提供的.不依赖与宿主环境的对象,在ECMAScript运行之前就已经创建好的对象就叫做内置对象.就是说,是不需要我们开发人员先是的实例化对象就能够调用和运行的对象. 在ECM-262中只是定义了两个内置对象 Global和Math对象 2.Global对象 Global(全局)对象是在ECMAScript中是一个特别的对象,因为这个对象是不存在的.在ECMA…

js学习笔记之包装对象

JavaScript包装对象近日有时间,闲下来好好学习原生js JavaScript是一门面向对象语言,使用"."就可以访问对象的属性和方法,而基本类型(null, undefined, bool, number, string)应该是值类型,怎么会有属性和方法. 但是 var s="string"; console.log(s.length); console.log(s.indexOf('i')); 于是去翻阅资料 JavaScript可以很灵活的将一种类型转…

js中内置有对象

statpot:使用mongo+bootstrap+highcharts做统计报表最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求就需要分析这些数据,然后做出个统计报表. 需求实现最初的时候想着每天把这些接口访问情况的信息存储到mysql中,然后根据这些访问情况做个分析再做报表.然后第一个问题就来了,信息包含太多字段了,如果我将每个信息解析成mysql表的一个字段,那么这个字段很长,而且还有一个致命缺陷,不容易扩展.如果将所…

js行内式遇到的一些问题 DOM对象和jq对象转换的问题

这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但是却遇到一个问题,一直选不到触发事件这个对象.简单还原代码如下 <button id='btn' onclick='check()' name='abc' value='123'>类别</button> <script> function check() { console.log($(this).name);…

js 判断是否为空对象、空数组

当需要判断参数是否为空时,总希望 js 能够提供原生的判断方法,可惜并没有,只能自己封装了. function isEmpty(obj) { // 检验 undefined 和 null if(!obj && obj !== 0 && obj !== '') { return true; } if(Array.prototype.isPrototypeOf(obj) && obj.length === 0) { return true; } if(Objec…

JS浏览器对象：window对象、History、Location对象、Screen对象

一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口所有JavaScript全局对象.函数以及变量均自动成为window对象的成员全局变量是window对象的属性全局函数是window对象的方法 2.window尺寸 window.innerWidth 浏览器窗口的内部高度 window.innerHeight 浏览器窗口的内部高度二:JS浏览器对象-History 1.History对象 window.histo…

jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字

jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前前端jsp中大多是一些纯html和js,很少用到jstl的一堆东西,后端也仅仅处理一些前端的post.get请求或页面跳转,无须以往繁琐的xml路径映射和filter过滤. 不过有时也会用到servlet作用域中的一些东西,比如某个固定的值.上下文路径等等~,不过这些东西大多数也仅限于取值而不是设置值(或对象),…

js数组、内置对象、自定义对象

[js中的数组] 1.数组的基本概念? 数组是在内存空间中连续存储的一组有序数据的集合元素在数组中的顺序,称为下标.可以使用下表访问数字的每个元素. 2.如何声明一个数组? ① 使用字面量声明: 在js中,同一数组可以存储各种数据类型. 例如:var arr=[1,"撒",true,4,func,{},null]; ② 使用new关键字声明:var arr=new Array(参数); >>>参数可以是: a.参数省略,表示创建一个空数组; b.参数为一个整数,表示…

Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】

什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作就是封装了JavaScript,能够简化我们写代码的一个JavaScript库为什么要使用Jquery? 我觉得非常重要的理由就是:它能够兼容市面上主流的浏览器,我们学习AJAX就知道了,IE和FireFox获取异步对象的方式是不一样的,而Jquery能够屏蔽掉这些不兼容的东西- (1)写少代码,做多事情[write less do more] (2)免费,开源且轻量级的js库…

56、jsのBOM对象与DOM对象

javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读一.BOM对象 1.window对象所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使用即可. 2.Window 对象方法 alert() 显示带有一段消息和一个确认按钮的警告框. confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框. prompt() 显示可提示用户输入的对话框.…

JS中的内置对象简介与简单的属性方法

JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一数组可以储存多种不同的数据类型(但,同一数组一般只用于存放同种数据类型) 例如var arr1 = [1,"2",true,{"name":"啦啦啦"},[1,2]]; ②通过new关键字声明:var arr2 = new Array(参数); &g…

认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法格式:$(selector).actio…

JavaScript -- 时光流逝（六）：js中的正则表达式 -- RegExp 对象

JavaScript -- 知识点回顾篇(六):js中的正则表达式 -- RegExp 对象 1. js正则表达式匹配字符之含义查找以八进制数规定的字符. 查找以十六进制数规定的字符. 查找以十六进制数规定的 Unicode 字符. 2. 匹配字符的数量及格式的控制 a+ 匹配任何包含至少一个 a 的字符串.a* 匹配任何包含零个或多个 a 的字符串.a? 匹配任何包含零个或一个 a 的字符串.a{2} 匹配包含 2个 a 的序列…

8、jsのBOM对象与DOM对象

javascript的Bom和Dom对象使我们学习的重点,这篇随笔可以重点阅读本篇导航: BOM对象 DOM对象 DOM Event(事件) 实例练习一.BOM对象 1.window对象所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使用即可. 2.Window 对象方法 alert() 显示带有一段消息和一个确认按钮的警告框. confirm() 显示带有一段消息以及确…

JS对象与Dom对象与jQuery对象之间的区别

前言通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save").disabled = true; //没有效果分析: 其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象解决方法: 1)用JQ写法 $("#save").attr("disabled","true&…

js基本类型存放和对象存放的区别（对象遍历）

js的基本类型,对象类型的应用在初学的时候,需要自己加以明确,明确了数据类型,在使用过程中才能正确使用变量.如下两个例子是摘自初学时的笔记,为大家提供参考. 1.对象可以存放属性和方法,js基本类型不可以. var str = "123"; str.name = "lisi"; alert(str.name); //undefined JS基本类型存放 var str2 = new String("123"); str2.name = "…

关于js函数，方法，对象实例的一些说明

朋友们大家好,好久没有更新文章了,最近正好有空就想着写点什么吧,加上这段时间总是能听到一些朋友们问关于js函数,方法,对象实例到底有什么区别这个问题,所以今天就献丑来简单说明一些吧! 其实这些主要都是一些概念上的东西,在这里还是推荐大家多看看诸如<JavaSript权威指南>,<JavaScript高级编程>之类的书籍,当然这些概念如果用代码写出来我相信大家也都还是能够知道的,所以下面我就用文字和代码举一些简单的例子进行说明: 函数:简单的说函数就是,使用function关键字定义…

jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换

JavaScript与jquery的区别 JavaScript是一门编程语言,用来编写客户端浏览器脚本. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助简化javascript开发 jQuery能做的javascript都能做到,而JavaScript能做的事情,jQuery不一定能做到 jQuery文件的引入 <body> <div class="box"></div> …

(O)JS：执行环境、变量对象、活动对象和作用域链（原创）

var a=1; function b(x){ var c=2; console.log(x); } b(3); ·执行环境(execution context),也称为环境.执行上下文.上下文环境.执行上下文环境: 每次当控制器转到ECMAScript可执行代码的时候,即会进入到一个执行上下文.执行上下文(简称-EC)是ECMA-262标准里的一个抽象概念,用于同可执行代码(executable code,分为全局代码.函数代码和eval代码)概念进行区分. 通俗的话来讲就是,JS中的函数运行…

【js-NodeList对象和HTMLCollection对象】的更多相关文章