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方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中，比如示例