JavaScript高级程序设计(第三版)学习,第一次总结

Array类型

var arr = [];
arr.length;     //返回数组元素个数

改变length可以动态改变数组大小

检测数组

instanceof可以检测某个对象是否是数组,限制:只能是一个网页或一个全局作用域

Array.isArray(arr);          //最终确定某个值到底是不是数组,没有限制

转换方法

arr.toString();                   //返回由数组每个值的字符串形式拼接而成的以逗号分隔的字符串
arr.valueOf();                    //与toString方法一致
arr.toLocalString();          //一般情况与toString和valueOf值一致,重定义则不一定

注:toString方法会去调用每个值的toString方法,toLocaleString会去调用每个值的toLocaleString方法

arr.join("-");                    //以传入的字符串当做分隔符,返回字符串,不传值,以逗号分隔

栈方法

arr.push(arg1,arg2,arg3....);               //接收不限量的参数,按顺序添加到数组末尾,返回修改后数组的长度
arr.pop();                                             //返回数组最后一项,并移出数组

队列方法(需和栈方法组合)

arr.shift();                                             //移除数组第一项,并返回被移除项
arr.unshift(arg1,arg2,arg3....);               //在数组前端添加任意项,并返回改变后数组长度

重排序方法

arr.reverse();                                        //反转数组
arr.sort();                                             //将数组每一项都转成字符串形式,进行比较,升序排列
arr.sort(function(){});                              //接收一个函数作为参数,根据函数返回值排序,前一项排在后一项后面,返回1,排在前,返回-1

操作方法

arr.concat(arg1,arg2,arg3,.....);          //不限制传入数量,可以是数组,可以是字符串,可以是数值
arr.slice(arg1,arg2);                              //接收两个参数,要返回的起始项(可选)和结束位置(可选),不传最后一个参数,返回从起始项到数组末尾,不传参数,返回整个数组
arr.splice(arg1,arg2,arg3);                    //arg1删除的第一项的位置,arg2删除的项数,arg3,可以是任意数量的字符串,用于删除后插入

位置方法

arr.indexOf(arg1,arg2);                         //arg1查找的项,arg2查找起点(可选),从头查找,找到返回位置索引(以位置0开始),未找到返回-1
arr.lastIndexOf(arg1,arg2);                    //与indexOf相反的查找方向,参数数量,意义一致

迭代方法

arr.every(function(){});                            //对数组每一项运行参数函数,都返回true,才为true
arr.filter(function(){});                            //对数组每一项运行参数函数,返回函数返回true的数组成员
arr.forEach(function(){});                         //对数组每一项运行参数函数,没有返回值,改变数组元素
arr.map(function(){});                              //对数组每一项运行参数函数,返回每次函数调用的结果组成的数组
arr.some(function(){});                              //对数组每一项运行参数函数,只要有一项返回true,返回true
function(item,index,array){}                    //参数函数,接收三个参数:数组项的值,该项在数组的位置,数组对象本身

归并方法

arr.reduce(function(){},initValue);               //迭代数组所有项,构建一个返回值,从数组第一项开始
arr.reduceRight(function(){},initValue);          //迭代数组所有项,构建一个返回值,从数组最后一项开始
function(prev,cur,index,array){}                    //参数函数,四个参数:前一个值(由前一次函数结果来确定),当前值,项的索引,数组对象
initValue                                                       //可选

DOM

Node类型

nodetype属性:节点类型,nodeName属性:节点名称,nodeValue属性:节点值

每个节点都有childNodes属性,保存NodeList对象,动态对象,有length属性,可以使用item()方法和方括号法访问。

  • parentNode属性,指向文档树父节点。
  • previousSibling属性:同一列表前一个节点
  • nextSibling属性:同一列表后一个节点
  • firstChild属性:第一个子节点
  • lastChild属性:最后一个子节点
  • ownerDocument属性:指向整个文档的文档节点
  • hasChildNodes(node):在节点包含一个或多个子节点返回true
  • someNode.appendChild(newNode):在最后一个子节点之后加入节点
  • someNode.insertBefore(newNode,node):在参照节点之前插入节点,参照节点为null,结果与appendChild方法一致
  • someNode.replaceChild(newNode,node):替换节点
  • someNode.removeChild(node):移除节点
  • someNode.cloneNode(Boolean):复制,true深复制,复制这个节点及子树,false浅复制,只复制本节点
  • normalize();处理文档树中的文本节点,合并用的

Document类型

js用以表示文档,是整个文档,不是部分,即document对象

  • document.documentElement属性:指向<html>
  • document.body属性:指向<body>
  • document.doctype:指向<!DOCTYPE>
  • document.title:指向<title>
  • document.URL:页面完整URL
  • document.domain:域名,可设置,同一域
  • document.referrer:保存着链接到当前页的那个页面的URL

查找元素

  • getElementById:接收一个参数,要取得的元素的ID,严格按照大小写匹配,多个id相同,返回第一个元素
  • getElementByTagName:接受一个参数,要取得的元素标签名,返回NodeList,在HTML文档中返回HTMLCollection对象,动态集合,可以使用item()方法或方括号法访问元素。
  • HTMLCollection对象,还有一个方法,namedItem,可以使用这个方法通过元素的name特性取得集合中的项。
  • getElementsByName():HTMLCollection类型才有的方法。返回给定name特性的所有元素

特殊集合

都是HTMLCollection对象

  • document.anchors:所有带有name特性的<a>
  • document.applets:所有<applets>
  • document.forms:所有<form>
  • document.images:所有<img>
  • document.links:所有带href的<a>

Element类型

所有HTML元素都是HTMLElement类型,不然也是通过它的子类型表示。

特性:

  • id:在文档中的唯一标识符
  • title:有关元素附加说明,一般通过工具提示条显示出来
  • lang:元素内容语言代码,很少使用
  • dir:语言方向,tlr(左向右),rlt(右向左),很少使用
  • className:与元素class对应,为元素指定的CSS类

取得特性

  • getAttribute():注意:传递的特性名与实际特性名相同,因此要得到class特性,要传递"class",而不是"className",也可以取得自定义特性,特性是不区分大小写的注:通常通过对象属性来访问特性,只有取得自定义特性才使用getAttribute方法
  • setAttribute():接收两个参数,要设置的特性名和值。已存在,替换,不存在,创建。设置的特性名会统一转换为小写。
  • removeAttribute():接收特性名。清楚特性值,并删除特性。

attributes属性

Element类型是唯一使用attributes属性的唯一一个DOM节点类型

attributes属性中包含一个NamedNodeMap,动态集合。元素每个特性都由一个Attr节点表示,每个节点保存在NamedNodeMap对象中,对象拥有的方法:

  • element.attributes.getNamedItem("id"):返回nodeName属性等于id的节点,简写:element.attributes["id"]
  • element.attributes.removeNamedItem("id"):移除nodeName属性等于name的节点
  • element.attributes.setNamedItem(node):很不常用的方法,为元素添加特性。

attributes的方法不够方便,更多的会使用getAttribute,setAttribute,removeAttribute方法。序列化倒是有用:

function outputAttribute(element){
    var pairs = new Array(),
        attrName,
        attrValue,
        i,
        len;

    for(i=0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName += "=\"" + attrValue + "\"");
    }

    return pairs.join(" ");
}

由于IE7及更早版本会返回HTML中所有可能的特性,所以对上述函数加以改进,让它返回指定特性。每个特性节点都有一个specified属性,为true,要么在HTML中指定了相应特性,要么通过setAttribute设置。改进后代码:

function outputAttribute(element){
    var pairs = new Array(),
        attrName,
        attrValue,
        i,
        len;

    for(i=0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if(element.attributes[i].specified){
            pairs.push(attrName += "=\"" + attrValue + "\"");
        }
    }

    return pairs.join(" ");
}

创建元素

  • document.createElement():接收一个参数,要创建的元素标签名,在HTML中不区分大小写,在XML区分,创建时也添加了ownerDocument属性

元素子节点

元素的childNodes属性包含了它的所有子节点。

Text类型

包含的是纯文本内容,可以包含转义后的HTML字符,通过nodeValue或data获得文本内容

操作节点中文本的方法:

  • appendData(text):将text添加到节点末尾
  • deleteData(offset,count):从offset指定的位置开始删除count个字符
  • insertData(offset,text):从offset指定位置开始插入text文本
  • replaceData(offset,count,text):从offset指定位置开始的count字符替换为text
  • splitText(offset):从offset开始将文本分成两个节点
  • subStringData(offset,count):提取从offset开始到offset+count为止的字符串
  • length属性,保存节点中的字符数,nodeValue.length,data.length也保存同样的值

创建文本节点

  • document.createTextNode():接收一个参数,要插入节点中的文本,需要按照HTML或XML格式进行编码,创建时也会加入ownerDocument属性

规范化文本节点

  • normalize方法。在父元素上调用,会合并所有文本节点。

分割文本节点

  • splitText方法,将一个文本节点分为两个

Comment类型

注释在DOM中通过Comment类型表示,与Text继承相同基类,拥有除splitText方法的所有字符串操作方法,与Text类似可通过nodeValue和data获得注释内容

CDATASection类型

针对XML文档,表示CDATA区域

DocumentType类型

并不常用,仅有Firefox,Safari,Opera支持。

保存在document.doctype中

DocumentFragment类型

文档片段。所有节点类型中,只有DocumentFragment没有对应标记。可以作为仓库使用。

使用document.createDocumentFragment()来创建文档片段,继承了Node的所有方法

Attr类型

元素特性在DOM中以Attr类型表示

属性:name(特性名称),value(特性值,与nodeValue值一样),specified(布尔值,是否代码中指定)

使用document.createAttribute()并传入特性名称可以创建新的特性节点

以上是为个人这一段时间以来学习JavaScript高级程序设计(第三版)的一些总结,还有很多的不足,欢迎大家共同探讨!

时间: 2024-12-25 05:09:22

JavaScript高级程序设计(第三版)学习,第一次总结的相关文章

《JavaScript高级程序设计 第三版》 前2章 Javascript简介与HTML 读书笔记

第一章:Javascript简介 1.JavaScript诞生于1995年,当时,它的主要目的是处理以前由服务器端语言(如Perl)负责的一些输入验证操作.现在,JavaScript是一种专为与网页交互而设计的脚本语言. 注:Netscape(网景)公司研发,Java是sun公司研发,原名为LiveScript,为了搭上媒体热炒的Java的顺风车,更名为JavaScript 2.微软推出JSript的和网景的JavaScript相竞争,最后微软胜利.ECMA指定了规定并重新命名为ECMAScri

2.1 &lt;script&gt;元素【JavaScript高级程序设计第三版】

向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来,这个元素被加入到正式的 HTML 规范中. HTML 4.01 为<script>定义了下列 6 个属性. async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指定的代码的字符

20.2 解析与序列化【JavaScript高级程序设计第三版】

JSON 之所以流行,拥有与JavaScript 类似的语法并不是全部原因.更重要的一个原因是,可以把JSON 数据结构解析为有用的JavaScript 对象.与XML 数据结构要解析成DOM 文档而且从中提取数据极为麻烦相比,JSON 可以解析为JavaScript 对象的优势极其明显.就以上一节中包含一组图书的JSON数据结构为例,在解析为JavaScript 对象后,只需要下面一行简单的代码就可以取得第三本书的书名: books[2].title 当然,这里是假设把解析JSON 数据结构后

21.1 XMLHttpRequest 对象【JavaScript高级程序设计第三版】

IE5 是第一款引入XHR 对象的浏览器.在IE5 中,XHR 对象是通过MSXML 库中的一个ActiveX对象实现的.因此,在IE 中可能会遇到三种不同版本的XHR 对象,即MSXML2.XMLHttp.MSXML2.XMLHttp.3.0 和MXSML2.XMLHttp.6.0.要使用MSXML 库中的XHR 对象,需要像第18章讨论创建XML 文档时一样,编写一个函数,例如: //适用于IE7 之前的版本 function createXHR() { if (typeof argumen

javascript高级程序设计第三版 读书笔记

第三章   基本概念 1.在JavaScript中是区分大小写的,第一个字符是字母 _ 或者$,其他字符可以试数字 字母 _ 或者$,命名格式要求是驼峰式书写(第一个字母小写,剩下的每个有意义的单词开头大写  比如fontSize) 2.单行注释//  块级注释为/*多行 内容*/ 不得使用关键字和保留字 3.在JavaScript中变量是松散型的   可以为任何一种类型 4.用var操作符定义的变量成为定义该变量的作用域中的局部变量. function test(){ var i = 'hi'

模拟事件【JavaScript高级程序设计第三版】

事件,就是网页中某个特别值得关注的瞬间.事件经常由用户操作或通过其他浏览器功能来触发.但很少有人知道,也可以使用JavaScript 在任意时刻来触发特定的事件,而此时的事件就如同浏览器创建的事件一样.也就是说,这些事件该冒泡还会冒泡,而且照样能够导致浏览器执行已经指定的处理它们的事件处理程序.在测试Web 应用程序,模拟触发事件是一种极其有用的技术.DOM2 级规范为此规定了模拟特定事件的方式,IE9.Opera.Firefox.Chrome 和Safari 都支持这种方式.IE 有它自己模拟

4.1 基本类型和引用类型的值【JavaScript高级程序设计第三版】

ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值指那些可能由多个值构成的对象. 在将一个值赋给变量时,解析器必须确定这个值是基本类型值还是引用类型值.第3 章讨论了5 种基本数据类型:Undefined.Null.Boolean.Number 和String.这5 种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值. 引用类型的值是保存在内存中的对象.与其他语言不同,JavaScript 不允许直接访问内存中的

javascript高级程序设计第三版dom元素大小笔记

是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小.有些元素(例如 <html>元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通过 CSS 的 overflow 属性进行设置才能滚动.以下是 4 个与滚动大小相关的属性. 在IE8以下scrollHeight=元素内容本身的高度. 1.增加边框,不同浏览器有不同解释. 谷歌火狐IE>=8会忽略边框的大小. 2,增加内边距,最终值是width||height+padding ie8以下是

10.1.5 Comment类型【JavaScript高级程序设计第三版】

注释在DOM中是通过Comment 类型来表示的.Comment 节点具有下列特征: nodeType 的值为8: nodeName 的值为"#comment": nodeValue 的值是注释的内容: parentNode 可能是Document 或Element: 不支持(没有)子节点. Comment 类型与Text 类型继承自相同的基类,因此它拥有除splitText()之外的所有字符串操作方法.与Text 类型相似,也可以通过nodeValue 或data 属性来取得注释的内

读Javascript高级程序设计第三版第六章面向对象设计--创建对象

虽然Object构造函数或者对象字面量都可以用来创建单个对象,但是缺点非常明显:使用同一接口创建很多对象,会产生大量重复代码. 工厂模式  1 function CreatePerson(name,age,job){ 2         var o=new Object(); 3         o.name=name; 4         o.age=age; 5         o.job=job; 6         o.sayName=function(){ 7