註:toString方法會去調用每個值的toString方法,toLocaleString會去調用每個值的toLocaleString方法 由於IE7及更早版本會返回HTML中所有可能的特性,所以對上述函數加以改進,讓它返回指定特性。每個特性節點都有一個specified屬性,為true,要麼在HT
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):很不常用的方法,為元素添加特性。
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方法,將一個文本節點分為兩個