本章主要讲解javascript语言中的BOM和DOM的相关技术，以实战为主，不讲解太多的理论知识。重要部分代码都贴出来，并有详细的中文注释。读者耐心的看完，并手动去敲，加深印象。
首先是对BOM（浏览器对象模型）方面的常用技巧的演示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>学习浏览器对象模型BOM</title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> var o = new Object(); o=123456; // alert(o.toString()); // alert(window); //1.使用最多的window对象 var demo = 799; //所有的对象，都是默认在Window下面的 //alert(demo); //或者写成 alert(window.demo); function move() { window.moveTo(300,200);// 定位为 300，200 // window.moveBy(300, 400); //以现在的位置为参考，偏移300，200 } function test() { // window.resizeBy(300, 400); window.resizeTo(300, 400); //将浏览器窗口变为300*400 } $(function () { $("#showWindow").click(function () { var oneNewWindow = window.open("setTimeOut.htm", "_blank"); //打开一个新的页面 oneNewWindow.resizeTo(400, 300); oneNewWindow.moveTo(300, 400); }); //2.history对象 // window.history.go(index); //浏览器历史记录中跳转。正数往前跳，负数往后跳 // window.history.back(); //往后跳转 // window.history.forword();//往前跳转 // alert(window.history.length);//浏览器总的跳转历史记录条数 //3.document对象（dom的相关操作后续会详细讲解） document.anchors; //获取文档中所有的标签 //alert(document.URL); //获取文档URL document.links; //获取文档中所有的链接 document.forms; //获取文档中所有的表单 document.images; //获取文档中所有的图片 //alert(document.links.length);//获取链接的总个数 //alert(document.links[0].href);//获取第一个链接的href属性 //4.location对象 // location.href; //URL // location.host; //ip地址 // location.port; //端口号 // location.reload(); //刷新页面 //location.replace("setTimeOut.htm");//页面跳转至指定的URL //alert(location.port); //5.navigator对象(浏览器对象) //alert(navigator.appName); //浏览器名称 //alert(navigator.appVersion); //浏览器版本信息 //6.screen对象（屏幕） // alert(screen.height); //屏幕分辨率的 Y--高度 // alert(screen.width); //屏幕分辨率的 X--宽度 //7.frames对象（框架）-- 注意：框架与 HTML dom中的contentWindow经常一起使用 //获取父窗体中ID为ifmOne的框架元素,并调用其move()函数 // parent.frames["ifmOne"].move(); }); </script> </head> <body> <a href="javascript:move()">测试移动浏览器窗口</a> <a href="javascript:test()">测试改变浏览器窗口的大小</a> <input type="button" id="showWindow" value="弹出一个小窗口的广告"/> 版权从2005年至<script type="text/javascript">document.write(new Date().getFullYear().toString())</script>年 </body> </html>下面则是更加复杂的DOM操作： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>复习Dom操作</title> <style type="text/css"> #newTest { color:Red; } </style> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> // //jQuery写法--页面加载完成 // $(document).ready(function () { // }); // //可以简写成 // $(function () { // // }); //标准js中的写法 --页面加载完成 window.onload = function () { var root = document.documentElement; //DOM根节点 --文档节点 var farDIV = document.getElementById("farther"); //根据ID获得DOM的“元素节点” //元素节点的一些常用的属性 //document.getElementsByTagName("")//根据元素(标签)名称获得DOM的“元素节点”(可能是单个或一组) //document.getElementsByName("")//根据name属性获得DOM的“元素节点”(可能是单个或一组) var idNode = farDIV.getAttributeNode("id"); //获得属性为id的“属性节点” //注意：不要把 getAttribute("id")和getAttributeNode("id")搞混了，前者获取的是属性的值，后者获取的属性节点 var textNode = farDIV.firstChild; //farDIV的第一个子节点 //DOM中常用的属性 //属性（其实只在属性节点中定义才有效） //farDIV.attributes;//返回该节点的所有属性对象的数组 //节点名称 // alert(root.nodeName + ":" + farDIV.nodeName + ":" + idNode.nodeName + ":" + textNode.nodeName); //nodeType(不支持IE)有五种，分别代表：标签(元素)节点，属性节点，文本节点，根节点，注释节点 //alert(root.nodeType + ":" + farDIV.nodeType + ":" + idNode.nodeType + ":" + textNode.nodeType); //节点值 //alert(root.nodeValue + ":" + root.nodeValue + ":" + idNode.value + ":" + textNode.nodeValue); //根节点的一些常用属性 -- 创建新节点 var newNode = document.createElement("div"); //创建一个div节点 var text = document.createTextNode("这是我手动创建的"); //创建一个文本节点 newNode.appendChild(text); //将文本节点插入div节点中 var attrNode = document.createAttribute("id"); //创建属性节点，属性名为“id” newNode.setAttributeNode(attrNode); //将newNode节点的属性节点设置为attrNode newNode.setAttribute("id", "newTest"); //设置newNode节点的id属性设置为newTest //var comment = document.createComment("我是注释");//创建注释节点 //获取页面中的body标签所在节点 var body = root.lastChild; //获取root的最后一个子节点 body.appendChild(newNode); //将新建的节点插入body中 //如果添加成功，则CSS会生效（字体变红，ID选择器有效） //获取元素的属性 alert(farDIV.id); alert(farDIV.getAttribute("id")); alert(newNode.getAttribute("id")); //HTML中获取节点的属性 -- 在XHTML中的可以简写 ：alert(newNode.id); // //动态的创建表格 //1.可以使用与上面类似的方式，创建节点、拼接、插入... 但是这样操作似乎很麻烦 //2.可以使用更加简单的操作方式 }; </script> </head> <body> <div id="farther">我是父div</div> </body> </html>
关于LoadXML部分，不同的浏览器有些差异，下面做了改进：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascript对XML的操作</title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> function test() { alert(loadXML(true, "TestDom.xml")); alert(loadXML(false,"<xml>123</xml>")); } //IE和Firefox类浏览器中装载同域XML文件或XML字符串的方法 //@param flag true表示装载XML文件 false表示装载XML的字符串 //@param xmldoc flag为true时表示XML文件的路径，flag为false时表示XML字符串文本 function loadXML(flag, xmldoc) { //IE和Firefox类浏览器对XML文档的装载和处理存在差异 if (window.ActiveXObject) { //IE浏览器 var activexName = ["MSXML2.Document", "Miscrosoft.XmlDom"]; var xmlObj; for (var i = 0; i < activexName.length; i++) { try { xmlObj = new ActiveXObject(activexName[i]); break; } catch (e) { } if (xmlObj) { // 装载XML文档的对象创建成功 xmlObj.async = false; // 同步方式 if (flag) { //装载XML文件 xmlObj.load(xmldoc); } else { //装载XML字符串 xmlObj.loadXML(xmldoc); } //return xmlObj; //返回根节点 return xmlObj.documentElement; //返回跟元素 } else { alert("装载XML的对象创建失败"); return null; } } } else if (document.implementation.createDocument) { //针对FireFox类浏览器 var xmlObj; if (flag) { //装载XML文件 xmlObj = document.implementation.createDocument("", "", null); if (xmlObj) { //同步方式进行装载 xmlObj.async = false; // 同步方式 xmlObj.load(xmldoc); return xmlObj.documentElement; } else { alert("装载XML的对象创建失败"); return null; } } else { //装载XML字符串 xmlObj = new DOMParser(); var DocRoot = xmlObj.parseFromString(xmldoc, "text/xml"); return DocRoot.documentElement; } } else { alert("该类浏览器可能不支持"); return null; } } </script> </head> <body> <input type="button" id="testLoad" value="测试XML文档加载" οnclick="test()" /> </body> </html>
扫一扫
3593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
