《JavaScript高级程序设计2》学习笔记——DOM2和DOM3(二)

View Code
//元素大小
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();//与原来范围有相同的属性
posted @ 2011-02-26 17:02  chemdemo  阅读(295)  评论(0编辑  收藏  举报