//元素大小
var box = document.getElementById("box");
alert(box.offsetLeft);//58
function getElementLeft(element) {//求element元素在页面上的左偏移量，top相似
var actualLeft = element.offsetLeft;
var current = element.offsetParent;//offsetParent属性不一定与parentNode相等，如td的offsetParent为作为其祖先元素的table
while(current != null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
var leftValue = getElementLeft(box);
alert(leftValue); //58
function getViewPort() { //确认浏览器视窗大小
if(document.compatMode != "BackCompat") {
//return {
//width: document.body.clientWidth,
//height: document.body.clientHeight
//};
alert("浏览器视窗宽度= " + document.body.clientWidth + "px"); //1280,ie8返回1276
alert("浏览器视窗高度= " + document.body.clientHeight + "px"); //500
} else {
//return {
//width: document.documentElement.clientWidth,
//height: document.documentElement.clientHeight
//};
alert("浏览器视窗宽度= " + document.body.clientWidth + "px");
alert("浏览器视窗高度= " + document.body.clientHeight + "px");
}
}
getViewPort();
//确定元素大小
var box = document.getElementById("box");
alert(box.getBoundingClientRect().left);//50
alert(box.getBoundingClientRect().top);//50
//遍历
var filter = function(node) {
return node.tagName.toLowerCase() == "p" ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_SKIP;
}
var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, filter, false);
var iteratorDocument = document.createNodeIterator(document, NodeFilter.SHOW_ELEMENT, null, false);//不指定过滤器
var box = document.getElementById("box");
var iterator = document.createNodeIterator(box, NodeFilter.SHOW_ELEMENT, null, false);
var node = iterator.nextNode();
while(node !== null) {
alert(node.tagName.toLowerCase());//div
node = node.nextNode();
}
//------------------------范围----------------------
//实现简单选择
var p1 = document.getElementById("p1");
var range1 = document.createRange();
var range2 = document.createRange();
value1 = range1.selectNode(p1);
value2 = range2.selectNodeContents(p1);
//用DOM范围实现复杂选择
var p1 = document.getElementById("p1");
var range1 = document.createRange();
var range2 = document.createRange();
var p1Index = -1;//确定节点在其父节点的子节点集合中的索引
for(var i=0, len=p1.parentNode.childNodes.length; i<len; i++) {
if(p1.parentNode.childNodes[i] == p1) {
p1Index = i;
break;
}
}
range1.setStart(p1.parentNode, p1Index);
range1.setEnd(p1.parentNode, p1Index + 1);
//选择从“hello”中的llo到“world”中的o
var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);//选区开始
range.setEnd(worldNode, 3);//选取结束
//操作DOM范围的内容
var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);//选区开始
range.setEnd(worldNode, 3);//选取结束
range.deleteContents();//删除范围所包含的内容
var fragment = range.extractContents();//extractContents()会返回范围的文档片段
//插入DOM范围内的内容
var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);//选区开始
range.setEnd(worldNode, 3);//选取结束
var span = document.createElement("span");
span.style.color = 'red';
span.appendChild(document.createTextNode("Inserted text."));
range.insertNode(span);//span被插入到l之前
//环绕范围内容的节点
var p1 = document.getElementById("p1");
var helloNode = p1.firstChild.firstChild;
var worldNode = p1.lastChild;
var range = document.createRange();
range.setStart(helloNode, 2);//选区开始
range.setEnd(worldNode, 3);//选取结束
var span = document.createElement("span");
span.style.backgroundColor = 'red';
range.surroundContents(span);//"<b>llo</b> wo"被span包围
//选区折叠
range.collapse(true);//true折叠刀起点，false折叠到终点
alert(range.collapsed);
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var range = document.createRange();
range.setStartAfter(p1);
range.setStartBefore(p2);
alert(range.collapsed);//如果p1与p2之间什么也没有没有，则返回true，反之false
//比较DOM范围
var p1 = document.getElementById("p1");
var range1 = document.createRange();
var range2 = document.createRange();
range1.selectNodeContents(p1);
range2.selectNodeContents(p1);
range2.setEndBefore(p1.lastChild);
alert(range1.compareBoundaryPoints(Range.START_TO_START, range2)); //0
alert(range1.compareBoundaryPoints(Range.END_TO_END, range2)); //1
//复制DOM范围
var newRange = range.cloneRange();//与原来范围有相同的属性
//清理DOM范围
range.detach();//从文档分离
range = null;//排除引用
//---------IE中的范围-----------------
//实现简单选择
var range = document.body.createTextRange();
var found = range.findText("Hello");//如果找到，返回true，反之false
alert(found);//true
alert(range.text); //Hello
//像某个方向继续搜索
var found = range.findText("Hello");//如果找到，返回true，反之false
var foundAgain = range.findText("Hello", 1);//正值表示从当前位置向前搜索，反之向后
//选择元素的所有文本，包括html
var range = document.body.createTextRange();
var p1 = document.getElementById("p1");
range.moveToElementText(p1);
alert(range.htmlText);//取得范围的全部内容，包括html及文本
//实现复杂选择
range.moveStart("word", 2);//起点移动2个单词
range.moveEnd("caracter", 1);//终点移动1个字符
range.move("character", 5);//折叠当前范围，然后再将范围移动指定单位数量
range.expand("word", 5);//将任何部分选择的文本全部选中
//操作IE范围中的内容
var range = document.body.createTextRange();
range.findText("Hello");
range.text = "Howdy";//设置文本文字
range.pasteHTML("<em>Howdy</em>"); //HowdyHowdy World!
//折叠IE范围
range.collapse(true);//折叠到起点
var isCollapsed = (range.boundingWidth == 0);//IE中无collapsed属性判断是否折叠完毕
//比较IE范围
var range1 = document.body.createTextRange();
var range2 = document.body.createTextRange();
range1.findText("Hello World!");
range2.findText("Hello");
alert(range1.compareEndPoints("StartToStart", range2));//0
alert(range1.compareEndPoints("EndToEnd", range2));//1
var range1 = document.body.createTextRange();
var range2 = document.body.createTextRange();
range1.findText("Hello World!");
range2.findText("Hello");
alert("range1.isEqual(range2):" + range1.isEqual(range2));//false
alert("range1.inRange(range2):" + range1.inRange(range2));//true,range1包含range2
//复制IE范围
var newRange = rangeduplicate();//与原来范围有相同的属性
View Code
