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