第十二章 DOM2和DOM3
元素大小
偏移量
offsetHeight: 元素在垂直方向上占用的空间大小,包括元素的高度，水平滚动条的高度,上边框高度和下边框高度。
offsetWidth: 元素在水平方向上占用的空间大小,包括元素的宽度度，垂直滚动条的高度,左边框高度和右边框高度。
offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。
offsetRight: 元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop:
offsetParent： 属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。
如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素
客户区大小
元素内容及其内边距占据的空间大小。
clientWidth
clientHeight
滚动大小
包含滚动内容的元素大小。
scrollHeight: 再没有滚动的情况下，元素内容的总高度。
scrollWidth: 在没有滚动的情况下，元素内容的总宽度。
scollLeft: 被隐藏再内容区域左侧的像素。通过设置这个属性可以改变元素的滚动位置。
scollTop: 隐藏再内容区域上方的像素。通过设置这个属性可以改变元素的滚动位置。
确定元素大小
getBoundingClientRect(): 为每个元素返回一个矩形对象，包含4个属性： left, top, right bottom。这些属性给出了元素再页面中相对视口的位置。
function getElementLeft(element) { //获取形参的元素的左外边框指包含元素的左内边框之间的像素差 var actualLeft = element.offsetLeft; //获取包含块的内边距 var current = element.offsetParent; //当包含块不是空的时候 while(current !== null) { //左偏移量 + 包含框的做偏移量 并赋值 actualLeft += current.offsetLeft; //获取包含块的父级 current = current.offsetParent; } 把值返回出去 return actualLeft; } function getElementTop(element) { var actualTop = element.offsetTop; var current = element.offsetParent; while(current !== null) { actualTop += current.offsetTop; current = current.offsetParent; } return actualTop; } function getBoundingClientRect(element) { //获取形参的顶部滚动距离 var scrollTop = document.documentElement.scrollTop; //获取形参的左边滚动距离 var scrollLeft = document.documentElement.scrollLeft; //如果形参的getBoundingClientRect可以用的话 if(element.getBoundingClientRect) { //检测这个函数的形参的自定义属性offset不是数字的时候 if(typeof arguments.callee.offset != "number") { //创建一个div var temp = document.createElement("div"); //给这个div绝对定位 temp.style.cssText = "position: absolute; left: 0; top: 0;"; //把这个元素丢进文档树 document.body.appendChild(temp); //用getboundingClientRect方法获取这个div的高度，-减去滚动的距离，的到这个元素的top值。 arguments.callee.offset =-temp.getBoundingClientRect().top - scrollTop; //从文档树中删除这个div document.body.removeChild(temp); //解除引用 temp = null; } //获取这个形参的bottom.top,left，和right var rect = element.getBoundingClientRect(); // 把这个对象的自定义属性赋给它自己 var offset = arguments.callee.offset; //把值返回出去 return { left: rect.left + offset, right: rect.right + offset, top: rect.top + offset, bottom: rect.bottom + offset } } else { var actualLeft = getElementLeft(element); var actualTop = getEementTop(element); return { left: actualLeft - scrollLeft, right: actualLeft + element.offsetWidth - scrollLeft, top: actualTop - scrollTop, bottom: actualTop + elementoffsetHeifht - scrollTop } }
遍历
DOM遍历是深度优先的DOM结构遍历，移动的方向至少有俩个，遍历以给定节点为根，不可能超出DOM树的根节点。
任何节点都可以作为遍历的根节点。即可以向下遍历，或者向上遍历。
NodeIterator:
document.createNodeIterator()
//创建新实例
接受4个参数.
root：作为搜索起点的树中的节点。
whatToShow: 表示要访问那些节点的数字代码。
filter：NodeFilter对象。一个表示应该接受还是拒绝某种特定节点的函数。
每个NodeFilter对象只有一个方法，即accept-Node();如果应该访问给定节点返回NodeFilter.FILTER_ACCEPT,不应该访问返回NodeFilter.FILTER_SKIP;
NodeFilter的俩个主要方法：
nextNode() 下一个节点， previousNode()，上一个节点。
例如一个展示《p》元素的节点迭代器
var filter = { acceptNode: function(node) { // 如果形参的标签名等于p 就返回 NodeFilter.FILTER_ACCEPT， // 不然返回NodeFilter.FILTER.SKIP; return node.tagName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER.SKIP; } }; var iterator = document.createNodeIterator(root, Nodefilter.SHOW_ELEMENT, filter, false);
遍历div元素中的所有元素
var oDiv = document.getElementById("div1"); var iterator = document.createNodeIterator(oDiv, NodeFilter.SHOW_ELEMENT, null, false); var node = iterator.nextNode(); while(node !== null) { console.log(node.tagName); node = iterator.nextNode(); } // DIV // P // B // UL // LI(3)
如果只想返回遍历中遇到的li元素，只要使用一个过滤器
var oDiv = document.getElementById("div1"); var filter = function(node) { return node.tagName.toLowerCase() == "li" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
// NodeFilter.FILTER_ACCEPT 和 NodeFilter.FILTER_SKIP都是跳过指定的节点 } var iterator = document.createNodeIterator(oDiv, NodeFilter.SHOW_ELEMENT, filter, false); var node = iterator.nextNode(); while(node !== null) { console.log(node.tagName); node = iterator.nextNode(); } //li(3)
TreeWalker
TreeWalker是NodeIterator的高级版本，提供了不同方向上的遍历DOM结构的方法
parentNode()：遍历到当前节点的父节点；
firstChild(): 遍历到当前节点的第一个子节点。
lastChild(): 遍历到当前节点的最后一个子节点。
nextSiblings(): 遍历到当前节点的下一个同辈节点节点。
previousSiblings(): 遍历到当前节点的上一个同辈节点。
TreeWalker和NodeIterator一样接受4个参数， 作为遍历起点的根节点、要显示的节点类型、过滤器。一个表示是否扩展 实例引用的布尔值。
var oDiv = document.getElementById("div1"); var walker = document.createTreeWalker(oDiv,NodeFilter.SHOW_ELEMENT, filter, false); var filter = function (node) { return node.tagName.toLowerCase() == "li" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; // 使用walker时NodeFilter.FILTER_REJECT跳过相应节点及该整个字树 } var node = walker.nextNode(); if( node !== null) { console.log(node.tagName); node = walker.nextNode(); } // LI
使用TreeWalker遍历DOM树,即使不定义过滤器，也可以取得所有<li>元素。
var oDiv = document.getElementById("div1"); var walker = document.createTreeWalker(oDiv, NodeFilter.SHOW_ELEMENT, null, false); walker.firstChild(); //div的第一个子元素即，定位到<p>元素 walker.nextSibling(); //p元素下一个同辈元素，即定位到<ul>元素 var node = walker.firstChild(); // 转到uil的第一个子元素 while(node !== null) { .// 当 node不为空的时候， console.log(node.tagName); // 弹出标签名 node = walker.nextSibling(); // 保存walk的下一个同辈元素 }
范围
为了方便控制页面，"DOM二级遍历和范围" 定义了“范围”接口。通过范围可以选择文档中的一个区域，而不比考虑节点的界限。
var range = document.createRange();
新创建的范围直接与创建它的文档关联，不能用于其他文档。创建范围之后，接下来就可以使用它再后台选择文档中的特定部分。设置位置之后，可以针对范围的内容进入很多操作。
每个范围由一个range类型的实例表示
startContainer: 包含范围起点的节点（选取中第一个节点的父节点）。
startOffset: 范围在startContainer中的偏移量。
endContainer: 包含范围终点的节点。
endOffset: 包含范围在endContainer终点的偏移量=。
commonAncestorContainer: startContainer和endContaine共同祖先节点再文档树中位置最深的那个。
1用DOM范围实现简单选择
用范围选择文档中的一部分。
有俩种方法 selectNode() 或 selectNodeContents()。都接受一个参数，即DOM节点，然后使用这个DOM节点信息来填充范围。
selectNode()选择整个节点，包括子节点。selectNodeContents()只选择节点的子节点。
<body> <p id="p1"><b>Hello</b> world!</p> </body>
可以使用下列的代码创建范围：
var range1 = document.createRange(); var range2 = document.createRange(); p1 = document.getElementById("p1"); range1.selectNode(p1); range2.selectNodeContents(p1);
2、用DOM范围实现复杂选择
使用setStart() ,setEnd()可以实现更复杂的范围选择接受一个参照节点和一个偏移量。
setStart(): 参照节点变成startContainer,偏移量变成startOffset。
setEnd(): 参照节点endContainer, 偏移节点endOffset。
<body> <p id="p1"><b>Hello</b> world!</p> </body>
var p2 = document.getElementById("p1"); helloNode = p1.firstChild.firstChild; worldNode = p1.lastChild; var range3 = document.createRange(); //传入helloNode，并设置偏移量2 （也就是e的位置） range3.setStart(helloNode, 2); ////传入helloNode，并设置偏移量3 （也就是r的位置） range3.setEnd(worldNode, 3)
3 操作DOM范围中的内容
在创建范围时，内部会为这个范围创建一个文档片段，范围所属的全部节点都被添加到这个文档片段中。
deleteContents(): 可以从文档中删除范围所包含的内容。
extractContents(): 也可以从文档中移除范围内容，但是会返回文档片段。
var text = document.getElementById("p2");
var _this = text.firstChild.firstChild;
var _is = text.lastChild;
var range = document.createRange();
range.setStart(_this, 2);
range.setEnd(_is, 3);
var fragment = range.extractContents();
text.parentNode.appendChild(fragment);
4、插入DOM范围中的内容
insertNode(): 可以向范围选区开始处插入一个节点。
<body> <span style="color: red">Inserted text</span> </body>
var p1 = document.getElementById("p2"); var hNode = p1.firstChild.firstChild; var wNode = p1.firstChild; var range = document.createRange(); range.setStart(hNode, 2); range.setEnd(wNode, 3); var eSpan = document.createElement("span"); eSpan.style.color = "red"; eSpan.appendChild(document.createNodeText("Inserted text")); range.insertNode(eSpan);
startContainer
