0%

DOM的基本操作

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对象
解决方案:(兼容性)

1
2
3
4
5
6
7
8
9
10
11
12
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属性是元素内容区高度加上上下内边距高度。
确定浏览器视口大小解决方案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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属性:通过设置这其中属性可以改变元素的滚动位置。