JavaScript中DOM的层次节点（一）

时间 2019-12-10

原文原文链接

DOM是针对HTML和XML文档的一个API，描绘了一个层次化的节点树，容许开发人员添加、修改、删除节点的一部分。

DOM将HTML和XML文档描绘成一个有多个节点构成的结构，节点分为12种不一样的节点类型，每种都拥有本身的特色、数据和方法，而且和其余节点存在着某种关系。javascript

html元素称为文档元素，全部的元素都包含在文档元素中，而且每一个文档只有一个html元素。html

1 Node类型

DOM1级定义了Node接口，该接口由DOM中的全部节点类型实现。这个接口在JavaScript中是做为Node类型实现的。所以JavaScript中全部的节点类型都继承Node类型，全部的类型都共享着相同的基本属性和方法。java

Node.ELEMENT_NODE (1)node
Node.ATTRIBUTE_NODE (2)数组
Node.TEXT_NODE (3)浏览器
Node.CDATA_SECTION_NODE (4)cookie
Node.ENTITY_REFERENCE_NODE(5)app
Node.ENTITY_NODE (6)dom
Node.PROCESSING_INSTRUCTION_NODE (7)函数
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE (9)
Node.DOCUMENT_TYPE_NODE (10)

11. Node.DOCUMENT_FRAGMENT_NODE (11)
12. Node.NOTATION_NODE (12)

因为IE没有公开构造函数，所以上述代码不能在IE中使用。因此为了确保跨浏览器的兼容性，判断Node类型的方法以下：

if(someNode.nodeType == 1){
        alert("this is a element node!");
    }

1.1 nodeName和nodeValue

能够利用nodeName和nodeValue属性了解node的具体信息，这两个值和节点的类型有关。

if(someNode.nodeType == 1){
        value = someNode.nodeName;
        //对于元素节点，nodeName保存的是元素的标签名，nodeValue始终为null
    }

1.2 节点关系

文档中全部节点相互之间都有关系，包括父子关系，同胞关系。

每一个节点都有childNodes属性，保存着一个NodeList对象，NodeList是一种类数组的对象，可使用childeNode[0]，childNode.item(1)来访问，同时拥有length属性，但并非Array实例。

parentNode：指向文档树种的父节点
nextSibling：紧挨着当前节点的下一个节点
previousSibling：紧挨着当前节点的上一个节点
firstChild：表现某一节点的第一个节点，childNodes[0]
lastChild：表示某一节点的最后一个子节点,childeNodes[childNodes.length-1]

1.3 节点操做

hasChildNodes()方法：断定一个节点是否有子节点，有返回true，没有返回false
removeChild()方法：去除一个节点
appendChild()方法：添加一个节点，若是文档树中已经存在该节点，则将它删除，而后在新位置插入
replaceChild(node1，node2)方法：从文档树中删除指定的节点node2，插入节点node1，被替换的节点仍然在文档中，可是没有位置
insertBefore(node1，node2)方法：在指定节点node2的前面插入节点node1，并返回node1.若是已经存在，则删除原来的，而后在新位置插入
cloneNode()方法复制一个节点，该方法有一个参数，true表示深复制，false表示浅复制。不会复制属性，处理程序等。

2 Doucument类型

document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个html页面或其余基于xml的文档。而且document是window对象的一个属性，能够将其当作全局对象来访问。

类型	值
nodeType	9
nodeName	#document
nodeValue	null
parentNode	null

2.1 文档子节点

Document的子节点能够是DocumentType、Element、ProcessingInstructior或Comment，有两个访问节点的快捷方式:

documentElement，该属性一直指向页面中的html元素。
childNodes，直接访问文档元素。
document.body，直接指向body元素
doucment.doctype，取得标签<!DOCTYPE>的信息

文档类型是只读的，并且它只有一个元素节点，一般早已存在。

2.2 文档信息

document对象有一些标准的Document对象所没有的属性，提供了 document对象所表现的网页的一些信息。

//取得文档标题
    var title = document.title;
    //设置文档标题
    document.title = "New page title";
    //取得完整的URL
    var url = document.URl;
    //取得域名
    var domain = document.domain;
    //取得来源页面的URL
    var referrer = document.referrer;

    document.bgColor //设置页面背景色
    document.fgColor //设置前景色(文本颜色)
    document.linkColor //未点击过的连接颜色
    document.alinkColor //激活连接(焦点在此连接上)的颜色
    document.vlinkColor //已点击过的连接颜色
    document.fileCreatedDate //文件创建日期，只读属性
    document.fileModifiedDate //文件修改日期，只读属性
    document.fileSize //文件大小，只读属性
    document.cookie //设置和读出cookie
    document.charset //设置字符集 简体中文:gb2312
    
    
    document.body //指定文档主体的开始和结束等价于body>/body>
    document.body.bgColor //设置或获取对象后面的背景颜色
    document.body.link //未点击过的连接颜色
    document.body.alink //激活连接(焦点在此连接上)的颜色
    document.body.vlink //已点击过的连接颜色
    document.body.text //文本色
    document.body.innerText //设置body>.../body>之间的文本
    document.body.innerHTML //设置body>.../body>之间的HTML代码
    document.body.topMargin //页面上边距
    document.body.leftMargin //页面左边距
    document.body.rightMargin //页面右边距
    document.body.bottomMargin //页面下边距
    document.body.background //背景图片

2.3 查找元素

Document类型提供两个查找元素的方法:

getElementById(),若是找到相应的元素则返回该元素，若是不存在带有相应ID的元素，则返回null。
getElementByTagName(),返回包含零或多个元素的NodeList，在HTMl文档中，这个方法会返回一个HTMLCollection对象，与NodeList很是相似。其中THMLCollection对象有一个方法nameItem()
getElementsByName(),会返回带有给定name特性的全部元素。

var images = document.getElementsByTagName("img");
    alert(images.length);//输出图像的数量
    alert(images[0].src);//输出第一个图像元素的src特性
    alert(images.item(0).src);//输出第一个图像元素的src特性
    
    //根据name获取单个相片
    var myImage = images.namedItem("myImage");
        myImage = images["myImage"];

2.4 文档写入

document.write()方法能够用在两个方面：

页面载入过程当中用实时脚本建立页面内容
用延时脚本建立本窗口或新窗口的内容

只有当页面被加载的时候document.write()函数才会被执行

doucment.writeln()与上述相似，区别在于换行。
open()和close()分别用于打开和关闭网页的输出流，若是在页面加载期间使用write()，则不须要用这两个方法。

3 Element类型

Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。

类型	值
nodeType	1
nodeName	元素的签名
nodeValue	null
parentNode	Documnet或Element

3.1 HTML元素

全部的HTML元素都是有HTMLElement类型表示，HTMLElement类型直接继承自ELement并添加一些属性。添加的这些属性分别对应于每一个HTML元素中都存在的下列标准特性。

var div = document.getElementById("myDiv");
    
    //能够获取和设置属性的值
    alert(div.id);
    alert(div.className);
    alert(div.title);
    alert(div.lang);
    alert(div.dir); //获取元素的文字方向

3.2 操做特性

getAttribute():用来获取相应元素或其内容的附加信息，与上述获取属性基本一致，可是有两点区别：

style，经过getAttribute()获取的是CSS文本，经过属性获取的会返回一个对象。
onclick，getAttribute()获取相应代码的字符串，属性获取则会返回一个JavaScript函数。

通常状况下，开发人员最好使用对象的属性，只要在取得自定义特征值的状况下，才会使用getAttribute()

setAttribute()：接收两个参数，要设置的特性名和值，若是特性已经存在，会修改特性值，若是不存在则会建立。

removeAttribute():用于完全删除元素的特性，IE6及以前的版本不支持此方法。

3.3 建立元素

document.createElement()方法能够建立新元素，此方法只接收一个参数，即要建立元素的标签名（不区分大小）。

//div建立插入过程 
    var div = document.createElement("div");
    div.id = "myNewDiv";
    div.className = "box";
    document.body.appendChild(div);