《JavaScript高级程序设计2》学习笔记——DOM2和DOM3(二)
2011-02-26 17:02
543 查看
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高级程序设计2》学习笔记——DOM2和DOM3(一)
- JavaScript笔记:DOM2 & DOM3
- 《java DOM 编程艺术》学习笔记
- 《JS高程(3)》DOM2和DOM3-样式、视口尺寸问题-第12章笔记(23)
- DOM2 和 DOM3
- 2016-1-20(dom2和dom3详解)
- 学习笔记:HTML DOM(文档对象模型)
- 锋利的Jquery——学习笔记(三)DOM的操作分类
- 学习笔记(三):jQuery之DOM
- 《JavaScript权威指南》学习笔记 第七天 DOM操作
- javascript - dom2 和 dom3
- 第十二章:DOM2 和 DOM3(遍历)
- DOM2和DOM3(1)
- 锋利的Jquery——学习笔记(四)DOM操作(一)
- 全栈JavaScript之路( 二十三 )DOM2、DOM3, 涉及XML命名空间的扩展(一)
- 《JavaScript高级程序设计》学习笔记(DOM1)
- JavaScript高级程序设计之DOM2和DOM3之样式之访问元素的样式第12.2.1讲
- 《javascript高级程序设计》学习笔记(八):一些DOM基础
- 《javascript高级程序设计》学习笔记(八):一些DOM基础
- Javascript学习笔记7 DOM2和DOM3