《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(); // 与原来范围有相同的属性

你可能感兴趣的:(JavaScript)