2018-06-08 DOM

1:Node类型

JavaScript中的所有节点类型都继承自Node类型(就像js语法中Object对象一样),所以js的所有节点类型都共享Node类型的属性和方法

1.1:Node节点的类型的属性和方法:

nodeType属性:这个属性代表js的节点类型,他的值有以下的12种,任何节点类型必是其中一个.

 Node.ELEMENT_NODE(1);

 Node.ATTRIBUTE_NODE(2);

 Node.TEXT_NODE(3);

 Node.CDATA_SECTION_NODE(4);

 Node.ENTITY_REFERENCE_NODE(5);

 Node.ENTITY_NODE(6);

 Node.PROCESSING_INSTRUCTION_NODE(7); Node.COMMENT_NODE(8);

 Node.DOCUMENT_NODE(9);

 Node.DOCUMENT_TYPE_NODE(10);

 Node.DOCUMENT_FRAGMENT_NODE(11); Node.NOTATION_NODE(12)。

判断节点的nodeType属性就可以判断出这个节点的类型

if (someNode.nodeType == 1){ //适用于所有浏览器

alert("Node is an element.");

}

nodeName: 代表了当期那节点的名字

nodeValue:代表了当期节点的值

1.2:节点的关系

节点的关系分为兄弟节点,父子节点,

childNodes: 每个节点都有这个属性,这个属性代表了当前节点的所有子节点,并且这个属性的值是随着dom元素的变化而变化的,这个属性并不是数组但是我们可以通过数组的方式来取值,也可以使用Array.property.slice.call(someNode.childNodes,0)这个方法转换成数组

parentNode: 当前节点元素的父节点

previousSibling: 当前节点的上一个兄弟节点

nextSibling:当前节点的下一个兄弟节点

如果上一个兄弟节点或者下一个兄弟节点不存在,则这两个属性都为null

firstChild: 第一个子节点

lastChild:最后一个子节点

如果只有一个子节点,那么firstChild和lastChild都指向同一个节点,如果没有子节点,那么这两个属性都是null

hasChildNodes(): 检查当前节点是否有子节点

ownerDocument: 所有的节点都有这个属性,指向当前文档的根节点

1.3:操作节点:

appendChild(): 拼接节点,意识是向当前节点的子节点的最后一位插入一个子节点,childChilds属性的长度,指针指向等等都会同步更新,更新完成之后,返回新增的节点

注意:,如果传入的节点是当前已经存在的节点,那么插入的节点的位置就会改变成当前节点的子节点的最后一位

insertBefore():这个方法是将某个节点(第一个参数)插在参照节点(第二个参数)之前,调用者是父节点,如果参照节点(第二个参数)为null,那么insetBefore()方法与appendChild()方法相同

replaceChild(): 替换节点,第一个参数是要被删除的节点,第二个参数是要插入的节点

removeChild(): 删除某个节点

下面这两个方法是所有的节点共有的:

cloneNode(): 创建调用这个方法的节点的副本,接收一个Boolean值,代表了是否进行深复制,深复制就是复制当前节点包括子节点,false只返回当前节点,

注意:这个方法在复制的时候不会复制属性,但是ie存在一个bug,在复制的时候会将属性一起复制了,所以在复制之前最先移除

下面将分别介绍继承自Node类型的子类

2:Document类型

这个类型继承自Node类型,共享Node类型的所有属性和方法,浏览器中的document对象是HTMLDocument(继承自document类型)类型的一个实例,表示整个HTML页面,而且是window的属性.可以操作整个页面的页面和底层结构

document子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或 Comment,

DocumentType; 这个节点是文档声明,一般没什么用,其实就是网页中HTML节点上的声明

下面介绍document的内置属性:

document有两个内置的属性

documentElement: 这个属性指向根节点html,  例子:

var html = document.documentElement // 这个就可以取到html元素的对象

body: 这个属性指向body元素,和上面一样,直接就可以取到body元素的额对象

下面介绍HTMLDocument类

document是继承自Node类型的HTMLDocument类的一个实例,HTMLDocument类在document基础之上扩展了一些属性和方法,所以document也有下面的一些属性

属性:

title:  HTMLDocument有一个属性title,指向文本标签title,可以改变浏览器标签栏的名称

URL: 完整的url路径

domain:域名

referrer:保存着链接到当前网页的那个url,没有来源页面,为null

方法:

getElementById():通过id获取到dom元素

document.getElementsByTagName: 通过标签名获取元素

getElementsByName: 通过name属性获取元素

3:Element

element便是Node类型的又一个子类

,通过这个类型可以访问到dom元素.其实通过HTMLDocument类型的几个方法返回的对象就是element类型的子类HTMLElement的实例或者HTMLDocument实例的子类型

获取dom元素特性时,使用的方法有以下两种:

HTMLElement类型的属性

id: 每个元素在文档中唯一标识

title: 元素的说明

lang: 据说没什么用

className: 类名

例子:

var div = document.getElementById("myDiv");

alert(div.id); //"myDiv""

alert(div.className); //"bd"

alert(div.title); //"Body text"

alert(div.lang); //"en

也可以对他们进行重新赋值

方法: 

dom元素有很多特性,可以使用下面方法对他们的特性进行操作

getAttribute()
setAttribute()

removeAttribute()

获取上面那几个属性的值也可以通过这几个方法实现

var div = document.getElementById("myDiv");

alert(div.getAttribute("id"));

alert(div.getAttribute("class"));

alert(div.getAttribute("title"));

getAttribute这个方法也可以获取自定义特性的值,如果传过去的值不存在,那么返回null

HTML5规定自定义特性最好加上data-   算是一种规范?

使用getAttribute 这个方法获取style和onclick特性时,会和通过属性直接访问出现差别,getAttribute获取这两个特性时,都返回字符串,而通过属性的方式直接访问时,会返回对象和函数

总结:由于这些差别的存在,我们在开发中只有获取自定义的属性时才会使用getAttribute方法,获取通用属性时,一般通过属性的方式获取

4:text类型

文本节点,继承自Node类型,具有以下几种特性:

nodeName: 文本节点的名字#text"

nodeType; 文本类型 值 3

nodeValue: 就是文本节点的值

parentNode: 文本节点的父节点 是一个element类型的对象,其实就是dom元素不支持子节点 方法如下: 

appendData(text):将 text 添加到节点的末尾。

  deleteData(offset, count):从 offset 指定的位置开始删除 count 个字符。

  insertData(offset, text):在 offset 指定的位置插入 text。

  replaceData(offset, count, text):用 text 替换从 offset 指定的位置开始到 offset+

count 为止处的文本。

  splitText(offset):从 offset 指定的位置将当前文本节点分成两个文本节点。

  substringData(offset, count):提取从 offset 指定的位置开始到 offset+count 为止

处的字符串。

取到文本节点的方式只能通过父节点 ,然后寻找子节点的方式来获取 比如:div中有一行文字,取得文本节点

var textNode = div.firstChild; //或者div.childNodes[0]

和dom元素一样,如果当前文本节点在浏览器中,那么修改文本节点会立马反映到浏览器中

dom元素可以创建,那么文本节点也可以创建,方式如下:

var textNode = window.createTextNode('sdfa')

然后将这个节点插入dom元素的节点中就可以了

动态创建文本节点,然后将它插进element类型的对象中,就可以实现一个dom元素下有两个文本节点的情况

normalize(): 这个方法可以将一个dom元素下多个文本节点给合并起来,变成一个,有父节点调用

splitText(): 这个方法可以将一个文本节点分割成两个节点,参数是一个整数传进去即可

5:Comment类型

comment类型也是继承Node类型,文档的注释在使用comment类型来表示的

6: DocumentFragment类型

DocumentFragment就是文档片段类型,用处:我们在向浏览器插入节点时,每插入一次,都会使浏览器渲染一次页面,如果要擦插入多个节点,就会渲染多次,浪费性能,而DocumentFragment类型的实例可以作为一个仓库用来存储这些代码片段,也就是dom节点,然后最后一起插进浏览器中去

用法如下:

var fragment = document.createDocumentFragment();

    var ul = document.getElementById("myList");

    var li = null;

    for (var i=0; i < 3; i++){

        li = document.createElement("li");

        li.appendChild(document.createTextNode("Item " + (i+1)));

        fragment.appendChild(li);

    }

    ul.appendChild(fragment);