javascript知识点个人总结。

Javascript知识点总结

Dom知识点

Element类型

Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。
Element有下面几条特性：
（1）nodeType为1
（2）nodeName为元素标签名，tagName也是返回标签名
（3）nodeValue为null
（4）parentNode可能是Document或Element
（5）子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference

Text类型
Text表示文本节点，它包含的是纯文本内容，不能包含html代码，但可以包含转义后的html代码。Text有下面的特性：
（1）nodeType为3
（2）nodeName为#text
（3）nodeValue为文本内容
（4）parentNode是一个Element
（5）没有子节点

Attr类型
Attr类型表示元素的特性，相当于元素的attributes属性中的节点，它有下面的特性：
（1）nodeType值为2
（2）nodeName是特性的名称
（3）nodeValue是特性的值
（4）parentNode为null

Comment类型
Comment表示HTML文档中的注释，它有下面的几种特征：
（1）nodeType为8
（2）nodeName为#comment
（3）nodeValue为注释的内容
（4）parentNode可能是Document或Element
（5）没有子节点

Document
Document表示文档，在浏览器中，document对象是HTMLDocument的一个实例，表示整个页面，它同时也是window对象的一个属性。Document有下面的特性：
（1）nodeType为9
（2）nodeName为#document
（3）nodeValue为null
（4）parentNode为null
（5）子节点可能是一个DocumentType或Element

DocumentFragment类型
DocumentFragment是所有节点中唯一一个没有对应标记的类型，它表示一种轻量级的文档，可能当作一个临时的仓库用来保存可能会添加到文档中的节点。DocumentFragment有下面的特性：
（1）nodeType为11
（2）nodeName为#document-fragment
（3）nodeValue为null
（4）parentNode为null

createElement
createElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8以下浏览器不支持自定义标签。
createTextNode
createTextNode用来创建一个文本节点，用法如下：
var textNode = document.createTextNode(“一个TextNode”);
createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要appendChild将其添加到HTML文档树中

cloneNode
cloneNode是用来返回调用方法的节点的一个副本，它接收一个bool参数，用来表示是否复制子元素，使用如下：
var parent = document.getElementById(“parentElement”);
var parent2 = parent.cloneNode(true);// 传入true
parent2.id = “parent2”;
这段代码通过cloneNode复制了一份parent元素，其中cloneNode的参数为true，表示parent的子节点也被复制，如果传入false，则表示只复制了parent节点。

这里有几点要注意：
（1）和createElement一样，cloneNode创建的节点只是游离有html文档外的节点，要调用appendChild方法才能添加到文档树中
（2）如果复制的元素有id，则其副本同样会包含该id，由于id具有唯一性，所以在复制节点后必须要修改其id
（3）调用接收的bool参数最好传入，如果不传入该参数，不同浏览器对其默认值的处理可能不同
除此之外，我们还有一个需要注意的点：如果被复制的节点绑定了事件，则副本也会跟着绑定该事件吗？
这里要分情况讨论：
（1）如果是通过addEventListener或者比如onclick进行绑定事件，则副本节点不会绑定该事件
（2）如果是内联方式绑定比如

createDocumentFragment
createDocumentFragment方法用来创建一个DocumentFragment。在前面我们说到DocumentFragment表示一种轻量级的文档，它的作用主要是存储临时的节点用来准备添加到文档中。
createDocumentFragment方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中，比如示例

document.getElementById(“btnAdd”).onclick = function(){
var list = document.getElementById(“list”);
for(var i = 0;i < 100; i++){
var li = document.createElement(“li”);
li.textContent = i;
list.appendChild(li);
}
}
这段代码将按钮绑定了一个事件，这个事件创建了100个li节点，然后依次将其添加HTML文档中。这样做有一个缺点：每次一创建一个新的元素，然后添加到文档树中，这个过程会造成浏览器的回流。所谓回流简单说就是指元素大小和位置会被重新计算，如果添加的元素太多，会造成性能问题。这个时候，就是使用createDocumentFragment了。
DocumentFragment不是文档树的一部分，它是保存在内存中的，所以不会造成回流问题。我们修改上面的代码如下：
document.getElementById(“btnAdd”).onclick = function(){
var list = document.getElementById(“list”);
var fragment = document.createDocumentFragment();

for(var i = 0;i < 100; i++){
  var li = document.createElement("li");
    li.textContent = i;
    fragment.appendChild(li);
}

list.appendChild(fragment);

}
优化后的代码主要是创建了一个fragment，每次生成的li节点先添加到fragment，最后一次性添加到list，大家可以看示例
创建型API总结
创建型api主要包括createElement，createTextNode，cloneNode和createDocumentFragment四个方法，需要注意下面几点：
（1）它们创建的节点只是一个孤立的节点，要通过appendChild添加到文档中
（2）cloneNode要注意如果被复制的节点是否包含子节点以及事件绑定等问题
（3）使用createDocumentFragment来解决添加大量节点时的性能问题

页面修改型API

修改页面内容的api主要包括：appendChild，insertBefore，removeChild，replaceChild。
appendChild
appendChild我们在前面已经用到多次，就是将指定的节点添加到调用该方法的节点的子元素的末尾。调用方法如下：
parent.appendChild(child);
child节点将会作为parent节点的最后一个子节点。
appendChild这个方法很简单，但是还有有一点需要注意：如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方。

insertBefore
insertBefore用来添加一个节点到一个参照节点之前，用法如下：
parentNode.insertBefore(newNode,refNode);
parentNode表示新节点被添加后的父节点
newNode表示要添加的节点
refNode表示参照节点，新节点会添加到这个节点之前

关于第二个参数参照节点还有几个注意的地方：
（1）refNode是必传的，如果不传该参数会报错
（2）如果refNode是undefined或null，则insertBefore会将节点添加到父元素对应子元素的末尾

removeChild
removeChild顾名思义，就是删除指定的子节点并返回，用法如下：
var deletedChild = parent.removeChild(node);
deletedChild指向被删除节点的引用，它等于node，被删除的节点仍然存在于内存中，可以对其进行下一步操作。
注意：如果被删除的节点不是其子节点，则程序将会报错。我们可以通过下面的方式来确保可以删除：
if(node.parentNode){
node.parentNode.removeChild(node);
}
通过节点自己获取节点的父节点，然后将自身删除

页面修改型API总结
页面修改型api主要是这四个接口，要注意几个特点：
（1）不管是新增还是替换节点，如果新增或替换的节点是原本存在页面上的，则其原来位置的节点将被移除，也就是说同一个节点不能存在于页面的多个位置
（2）节点本身绑定的事件会不会消失，会一直保留着。

节点查询型API

document.getElementById
这个接口很简单，根据元素id返回元素，返回值是Element类型，如果不存在该元素，则返回null。
使用这个接口有几点要注意：
（1）元素的Id是大小写敏感的，一定要写对元素的id
（2）HTML文档中可能存在多个id相同的元素，则返回第一个元素
（3）只从文档中进行搜索元素，如果创建了一个元素并指定id，但并没有添加到文档中，则这个元素是不会被查找到的

document.getElementsByTagName
这个接口根据元素标签名获取元素，返回一个即时的HTMLCollection类型，什么是即时的HTMLCollection类型呢？我们来看看这个示例

使用document.getElementsByTagName这个方法有几点要注意：
（1）如果要对HTMLCollection集合进行循环操作，最好将其长度缓存起来，因为每次循环都会去计算长度，暂时缓存起来可以提高效率
（2）如果没有存在指定的标签，该接口返回的不是null，而是一个空的HTMLCollection
（3）“*”表示所有标签

document.getElementsByName
getElementsByName主要是通过指定的name属性来获取元素，它返回一个即时的NodeList对象。
使用这个接口主要要注意几点：
（1）返回对象是一个即时的NodeList，它是随时变化的
（2）在HTML元素中，并不是所有元素都有name属性，比如div是没有name属性的，但是如果强制设置div的name属性，它也是可以被查找到的
（3）在IE中，如果id设置成某个值，然后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name

document.getElementsByClassName
这个API是根据元素的class返回一个即时的HTMLCollection，用法如下
var elements = document.getElementsByClassName(names);
这个接口有下面几点要注意：
（1）返回结果是一个即时的HTMLCollection，会随时根据文档结构变化
（2）IE9以下浏览器不支持
（3）如果要获取2个以上classname，可传入多个classname，每个用空格相隔，例如
document.querySelector和document.querySelectorAll
这两个api很相似，通过css选择器来查找元素，注意选择器要符合CSS选择器的规则。
首先来介绍一下document.querySelector。
document.querySelector返回第一个匹配的元素，如果没有匹配的元素，则返回null。
注意，由于返回的是第一个匹配的元素，这个api使用的深度优先搜索来获取元素。
document.querySelectorAll的不同之处在于它返回的是所有匹配的元素，而且可以匹配

（1）querySelectorAll也是通过深度优先搜索，搜索的元素顺序和选择器的顺序无关
（2）返回的是一个非即时的NodeList，也就是说结果不会随着文档树的变化而变化

节点关系型api
在html文档中的每个节点之间的关系都可以看成是家谱关系，包含父子关系，兄弟关系等等，下面我们依次来看看每一种关系。
父关系型api
• parentNode：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment。
• parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null
兄弟关系型api
• previousSibling：节点的前一个节点，如果该节点是第一个节点，则为null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
• previousElementSibling：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。
• nextSibling：节点的后一个节点，如果该节点是最后一个节点，则为null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
• nextElementSibling：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。
子关系型api
• childNodes：返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。
• children：一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。
• firstNode：第一个子节点
• lastNode：最后一个子节点
• hasChildNodes方法：可以用来判断是否包含子节点。

setAttribute
setAttribute：根据名称和值修改元素的特性，用法如下。
element.setAttribute(name, value);
其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。
如果元素本身包含指定的特性名为属性，则可以世界访问属性进行赋值，比如下面两条代码是等价的：
getAttribute
getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null或空字符串。用法如下：
var value = element.getAttribute(“id”);

window.getComputedStyle
window.getComputedStyle是用来获取应用到元素后的样式，假设某个元素并未设置高度而是通过其内容将其高度撑开，这时候要获取它的高度就要用到getComputedStyle，用法如下：
var style = window.getComputedStyle(element[, pseudoElt]);
element是要获取的元素，pseudoElt指定一个伪元素进行匹配。
返回的style是一个CSSStyleDeclaration对象。
通过style可以访问到元素计算后的样式

currentStyle
万恶的IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了
getBoundingClientRect
getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：
var clientRect = element.getBoundingClientRect();
clientRect是一个DOMRect对象，包含left，top，right，bottom，它是相对于可视窗口的距离，滚动位置发生改变时，它们的值是会发生变化的。除了IE9以下浏览器，还包含元素的height和width等数据，具体可查看链接

语法及其他关键字

typeof 操作符
你可以使用 typeof 操作符来检测变量的数据类型。
在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
Null
在 JavaScript 中 null 表示 “什么都没有”。
null是一个只有一个值的特殊类型。表示一个空对象引用。
你可以设置为 undefined 来清空对象:

Undefined 和 Null 的区别

typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true 发生了类型转换
JavaScript 数据类型
在 JavaScript 中有 5 种不同的数据类型：
• string
• number
• boolean
• object
• function
3 种对象类型：
• Object
• Date
• Array
2 个不包含任何值的数据类型：
• null
• undefined

typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
实例
typeof “John” // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:’John’, age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。
实例
“John”.constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:’John’, age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
Js字符串处理函数
JS自带函数

concat

将两个或多个字符的文本组合起来，返回一个新的字符串。
var a = “hello”;
var b = “,world”;
var c = a.concat(b);
alert(c);
//c = “hello,world”

indexOf

返回字符串中一个子串第一处出现的索引（从左到右搜索）。如果没有匹配项，返回 -1 。
var index1 = a.indexOf(“l”);
//index1 = 2
var index2 = a.indexOf(“l”,3);
//index2 = 3
charAt

返回指定位置的字符。
var get_char = a.charAt(0);
//get_char = “h”
lastIndexOf
返回字符串中一个子串最后一处出现的索引（从右到左搜索），如果没有匹配项，返回 -1 。
var index1 = lastIndexOf(‘l’);
//index1 = 3
var index2 = lastIndexOf(‘l’,2)
//index2 = 2

match

检查一个字符串匹配一个正则表达式内容，如果么有匹配返回 null。
var re = new RegExp(/^\w+$/);
var is_alpha1 = a.match(re);
//is_alpha1 = “hello”
var is_alpha2 = b.match(re);
//is_alpha2 = null

substring

返回字符串的一个子串，传入参数是起始位置和结束位置。
var sub_string1 = a.substring(1);
//sub_string1 = “ello”
var sub_string2 = a.substring(1,4);
//sub_string2 = “ell”

substr

返回字符串的一个子串，传入参数是起始位置和长度
var sub_string1 = a.substr(1);
//sub_string1 = “ello”
var sub_string2 = a.substr(1,4);
//sub_string2 = “ello”

replace

用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
var result1 = a.replace(re,”Hello”);
//result1 = “Hello”
var result2 = b.replace(re,”Hello”);
//result2 = “,world”

search

执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
var index1 = a.search(re);
//index1 = 0
var index2 = b.search(re);
//index2 = -1

slice

提取字符串的一部分，并返回一个新字符串（与 substring 相同）。
var sub_string1 = a.slice(1);
//sub_string1 = “ello”
var sub_string2 = a.slice(1,4);
//sub_string2 = “ell”

split

通过将字符串划分成子串，将一个字符串做成一个字符串数组。
var arr1 = a.split(“”);
//arr1 = [h,e,l,l,o]

length

返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
var len = a.length();
//len = 5

toLowerCase

将整个字符串转成小写字母。
var lower_string = a.toLowerCase();
//lower_string = “hello”

toUpperCase

将整个字符串转成大写字母。
var upper_string = a.toUpperCase();
//upper_string = “HELLO”

Js数组常用的方法

var list = new Array()是我们在js中常常写到的代码，今天就总结哈Array的对象具有哪些方法。

list[0] = 0;

list[1] = 1;

list[2] = 2;

或者这样声明：var list = [0,1,2]

1、shift(): //原来数组会改变
删除数组的第一个元素,返回删除的值。这里是0

2 、unshift(3,4): //原来数组会改变
把参数加载数组的前面，返回数组的长度。现在list:中是3,4,0,1,2

3、pop(): //原来数组会改变
删除数组的最后一个元素，返回删除的值。这里是2.

4、push(3): //原来数组会改变
将参数加载到数组的最后，返回数组的长度，现在List中时：0,1,2,3

5、concat(3,4):
把两个数组拼接起来。

6、splice(start,deleteCount,val1,val2,…)：//原来数组会改变
从start位置开始删除deleteCount项，并从该位置起插入val1,val2,…

7、reverse：//原来数组会改变
将数组反序
var a = [1,2,3,4,5];
var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]

8、sort(orderfunction)：//原来数组会改变
按指定的参数对数组进行排序
var a = [1,2,3,4,5];
var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]

9、slice(start,end)：//原来数组会改变
返回从原数组中指定开始下标到结束下标之间的项组成的新数组
var a = [1,2,3,4,5];
var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]

10、join(separator)：
将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符
var a = [1,2,3,4,5];
var b = a.join(“|”); //a：[1,2,3,4,5] b：”1|2|3|4|5”
11、var y=myCars.indexOf(“Volvo”) // “Volvo” 值的索引值

Js Math对象常用方法
1.丢弃小数部分,保留整数部分

parseInt(5/2)
parseFloat()
转化为浮点型数字

2.向上取整,有小数就整数部分加1

Math.ceil(5/2)

3,四舍五入.

Math.round(5/2)

4,向下取整

Math.floor(5/2)

Js正则表达式常用方法

replace

用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
var result1 = a.replace(re,”Hello”);
//result1 = “Hello”
var result2 = b.replace(re,”Hello”);
//result2 = “,world”

search

执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
var index1 = a.search(re);
//index1 = 0
var index2 = b.search(re);
//index2 = -1
test()
test()方法搜索字符串指定的值，根据结果并返回真或假。
下面的示例是从字符串中搜索字符 “e” ：
var patt1=new RegExp(“e”); document.write(patt1.test(“The best things in life are free”));
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。下面的示例是从字符串中搜索字符 “e” ：
实例 1
var patt1=new RegExp(“e”); document.write(patt1.exec(“The best things in life are free”));

Js 常用Bom方法
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight
• document.documentElement.clientWidth
或者
• document.body.clientHeight
• document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
实例
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

其他 Window 方法
一些其他方法：
• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

• BOM即浏览器对象模型，它包括如下一些对象！
• （一）screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。
• 常见的属性有：
• availHeight:返回显示屏幕的高度
• availWidth:返回显示屏幕的宽度
• colorDepth:返回目标设备或缓冲器上的调色板的比特深度。
• height:返回屏幕区域的实际高度
• width:返回屏幕区域的实际宽度

• （二）Window对象,Window 对象表示一个浏览器窗口或一个框架。
• 常见方法：
• (1)窗口的打开与关闭：
• window.open(URL,name,features,replace),四个都为可选参数
• URL：新窗口中显示的文档的 URL
• name：声明了新窗口的名称
• features：声明了新窗口要显示的标准浏览器的特征
• replace：布尔值，true - URL 替换浏览历史中的当前条目。 false - URL 在浏览历史中创建新的条目。

• window.close()关闭当前窗口

• （2）改变窗口的位置和大小：
• moveTo(x,y) 方法可把窗口的左上角移动到一个指定的坐标。
• moveBy(x,y) 方法可相对窗口的当前坐标把它移动指定的像素。
• resizeTo(width,height) 方法用于把窗口大小调整为指定的宽度和高度。
• resizeBy(x,y) 方法用于根据指定的像素来调整窗口的大小。
•
• (3)状态栏，通过设置window对象的status属性和defaultStatus属性来改变状态栏显示的基本信息。
• 如： window.defaultStatus = “php点点通”;

• (4)定时设定,定时器可以在特定的时间内执行特定的函数
• setTimeout(epress,time) 方法用于在指定的毫秒数后调用函数或计算表达式。
• clearTimeout(timeID)停止已经启动的定时器setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval()停止使用setInterval() 方法.。

(5)Navigator对象，包含的属性描述了正在使用的浏览器
appName:返回浏览器的名称。
appVersion:返回浏览器的平台和版本信息。
platform:返回运行浏览器的操作系统平台。
appCodeName:返回浏览器的代码名。

(6)History对象，其实就是来保存浏览器历史记录信息。
其属性有：length，返回浏览器历史列表中的 URL 数量。
其方法有：
back()加载 history 列表中的前一个 URL。
forward()加载 history 列表中的下一个 URL。
go()加载 history 列表中的某个具体页面。
如常见的返回上一页：History.go(-1)和history.back()

(7)Location对象，Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
其方法：
hash:设置或返回从井号 (#) 开始的 URL（锚）。
host:设置或返回主机名和当前 URL 的端口号
hostname:设置或返回当前 URL 的主机名。
href:设置或返回完整的 URL。
pathname:设置或返回当前 URL 的路径部分
port:设置或返回当前 URL 的端口号
protocol:设置或返回当前 URL 的协议。
search:设置或返回从问号 (?) 开始的 URL（查询部分）。
其方法：
assign()加载新的文档。
reload()重新加载当前文档。
replace()用新的文档替换当前文档。

Document Dom

Window 对象