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高级程序设计(第三版)的一些总结,还有很多的不足,欢迎大家共同探讨!
世界 -- 因技术而精彩