第十二章 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") {//创建一个divvar 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，和rightvar 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

转载于:https://www.cnblogs.com/zhangbaihua/p/5604555.html