1.判断Node类型：

someNode.nodeType == 1 // ELEMENT_NODE
someNode.nodeType == 2 // ATTRIBUTE_NODE
someNode.nodeType == 3 // TEXT_NODE
someNode.nodeType == 9 // DOCUMENT_NODE

2.要了解节点的具体信息可以使用nodeName或nodeValue属性，必须用在ELEMENT_NODE

例：

1
2
3

if(someNode.nodeType === 1) {
    value = someNode.nodeName; // nodeName 的值是元素的标签名
}

3.每个节点都有childNodes属性，它实际上是基于DOM结构动态执行查询的结果，类数组。

例：

1 2	var firstChild = someNode.childNodes[0]; var secondChild = someNode.childNodes.item(1);

可以使用Array.prototype.slice转换为数组：
var arrayOfNodes = Array.prototype.slice.call(someNode.ChildNodes,0); // 在IE8及之前IE版本无效，原因是IE早期将NodeList实现为COM对象
解决方案：（兼容性）

function convertToArray(nodes) {
    var arr = null;
    try {
        arr = Array.prototype.slice.call(nodes,0); // 针对非IE浏览器
    }catch(e) {
        arr = new Array();
        for(var i =0,len = nodes.length; i< len; i++)  {
            arr.push(nodes[i])
        }
    }
    return arr;
}

4.父节点：parantNode属性

第一个子节点：firstChild 最后一个子节点：lastChild 
同胞上一节点：previousSibling 同胞下一节点：nextSibling
所有节点的最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点。

5.操作节点：

1) 插入：

var returnedNode = someNode.appendChild(newNode) // 用于childNodes列表末尾中插入节点，someNode为父节点，返回一个新节点
如果在调用appendChild()时传入父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点。
insertBefore(要插入的节点，参照节点) // 插入一个新节点在参照节点之前
例：

1 2	someNode.insertBefore(newNode,null); // 插入成为最后一个子节点 someNode.insertBefore(newNode,someNode.firstChild); // 插入成为第一个子节点

appendChild()和insertBefore()只插入节点，并不会移除节点。

2) 替换：

replaceChild(要插入的节点，要替换的节点) // 要替换的节点将由这个方法返回并从文档树被移除，同时由要插入的节点占据其位置
例： var returnedNode = someNode.replaceChild(newNode,someNode.firstChild); // 新节点替换第一个子节点

3) 移除：

removeChild(rmNode); // 接收一个要移除的节点为参数，被移除的节点为返回值
例： var rmNode = someNode.removeChild(someNode.firstChild); // 移除第一个子节点

6.Document类型常见作为HTMLDocument实例的document对象

1) 文档信息：

document.title; // 取得页面标题，赋值也可以修改标题
document.url; // 取得完整的URL
document.domain; // 取得主机域名
document.referrer; // 取得来源页面的URL

2) 查找元素：

document.getElementById(‘id’); // 等等

3) 特殊集合：

document.anchors // 包含文档中所有带name特性的元素
document.forms; // 包含文档中form元素
document.images; // images元素
document.links; // 返回带有href特性的元素

7.所有HTML元素都由HTMLElement类型表示，可直接获取元素所有信息

1) 取得特性

例：

1
2
3

var div =  document.getElementById('box');
console.log(div.getAttribute('id')); // 取得id
div.setAttribute('class','myBox'); // 设置class为myBox

2) 创建元素

例：

1
2
3

var div = document.createElement('div'); // 创建div元素
div.id = 'box'; // 设置id
document.body.appendChild(div); // 插入到</body>之前

8.DOM扩展

1) querySelector()和querySelectorAll()可通过Document及Element类型调用，接收一个CSS选择符为参数。 // IE8+支持

前者返回第一个元素，后者返回NodeList的实例（所有匹配到的元素）

2) 元素遍历：

注：对于IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点，导致在使用childNodes和firstChild等属性的行为不一致。
规范为DOM元素添加了以下5个属性：
childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素，也就是firstChild的元素版。
lastElementChild：指向最后一个子元素，同理。
previousElementSibling：指向前一个同辈元素，同理。
nextElementSibling：指向后一个同辈元素，同理。

9.DOM扩展与HTML5规范

1) 自定义数据属性

HTML5规定可以为元素添加非标准的属性，要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。

2) 插入标记

innerHTML、innerText

10.元素大小

1) 偏移量：包括元素在屏幕上占用的所有可见的空间，元素的可见大小由其高度、宽度决定，包括内边距、滚动条和边框大小（不包括外边距）

通过以下4个属性可以取得元素的偏移量：
offsetHeight:元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上下边框高度。
offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左右边框的宽度。
offsetLeft：元素的左外边框至包含元素的左内边框直接的像素距离。
offsetTop：元素的上外边框至包含与元素的上内边框之间的像素距离。
例：var offsetLeftEle =element.offsetLeft;

2）客户区大小

有关属性有两个：clientWidth和clientHeight
clientWidth属性是元素内容区宽度加上左右内边距宽度。
clientHeight属性是元素内容区高度加上上下内边距高度。
确定浏览器视口大小解决方案：

function getViewport() {
    if(document.compatMode == 'BackCompat') {
        // 首先检查compatMode属性以确定浏览器是否允许在混杂模式，而Safari 3.1之前的版本不支持这个属性则执行else
        return {
            width:document.body.clientWidth,
            height:document.body.clientHeight
        }
    } else {
        // Chrome、Opera和Firefox大多数情况下在标准模式下，因此执行以下语句
        return {
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        }
    }
}

3）滚动大小

四个与滚动大小相关的属性：
scrollHeight：在没有滚动条的情况下，元素内容的总高度。
scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
scrollLeft：被隐藏在内容区域左侧的像素数。
scrollTop：被隐藏在内容区域上方的像素数。
scrollHeight和scrollWidth属性：主要用来确定元素内容的实际大小。
// 注：IE6之前版本运行在混杂模式下时是元素，因此带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight。
scrollLeft和scrollTop属性：通过设置这其中属性可以改变元素的滚动位置。

记录前端&Node.js以及生活琐事

DOM的基本操作