深入浅出javascript DOM编程_javascript 编程意识dom-优快云博客

本文链接：https://blog.youkuaiyun.com/dinglang_2009/article/details/6911605

本篇博客深入讲解了JavaScript中的BOM和DOM技术，提供了丰富的实例代码和中文注释，帮助读者理解和掌握相关概念。主要内容包括BOM常用技巧、DOM操作、LoadXML部分的跨浏览器差异处理等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本章主要讲解javascript语言中的BOM和DOM的相关技术，以实战为主，不讲解太多的重复的理论知识。重要部分代码都贴出来，并有详细的中文注释，思路非常清晰。如果对DOM和BOM理解掌握还不是非常透彻的同学，请耐心的看完每行代码，并自己亲自动手实践，这样才能真正掌握，加深印象。

首先是对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文档加载" onclick="test()" />
</body>
</html>