DOM的思考总结

最新推荐文章于 2021-03-09 08:31:00 发布

wangyajin333

最新推荐文章于 2021-03-09 08:31:00 发布

阅读量924

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/wangyajin333/article/details/37602525

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.DOM是什么以及DOM与Javascript的关系

DOM是Document Object Model（文档对象模型）的英文首字母缩写。文档包括HTML和XML；对象说明了DOM是由对象组成的，而对象又有属性和方法；而模型说明了DOM是一种模子，而HTML和XML就是通过这个模子具体实现出来的。那么，DOM的存在是为了解决什么问题？为了理解这个问题，我们需要了解一下DOM的历史。

在以前，不同的公司比如微软，Netscape都有自己的浏览器产品，也会在自己的浏览器中使用专属的脚本语言和网页表现技术。这就导致了使用过程中的诸多不便，用户看这个网页就必须安装相应的浏览器，阻碍了信息的共享和交流。这时有一个组织W3C，制定了一套统一的规则，大家都按照这个来做就可以解决这个问题。而这个规则就是DOM。

那DOM有什么作用呢？我们为什么要学习它呢？

在理解这个问题前，我们先了解一下DOM的组成。在谈到DOM结构时，我们常常说DOM对象树。我们先从一张图看看这棵树是什么样子的。

图中右侧的结构图是根据左侧的html文档画出来的，如果将它逆时针旋转90度，就会看出非常像一颗树。这棵树中有html、head、body、comment、input、type，在DOM中这些都叫做节点。换句话说就是DOM是由节点构成的。按照节点的不同作用，又分为5种类型。分别为:Element、Attr、Text、Comment、Document。

元素节点：是文档中最常见的节点，HTML或XML文档中的标签<body><input><div>都对应DOM树中的元素节点；

属性节点：是一个元素节点上定义的某个属性，例如<input>中定义的 type属性就对应DOM树中的一个属性节点；

文本节点：表示文档中的一段文字信息，例如：HTML文档中定义<div>Hello World</div>,其中Hello World就是一个文本节点；

注释节点：对应文档中的注释信息，例如：就是一个注释节点；

根节点：顾名思义表示整个文档的根，但是需要注意它不对应文档中任何内容。

每一个节点都是一个对象，有对象就是属性和方法。我通过导图整理了一下：

首先是共有的属性和方法：

每种类型特有的：

最后一个问题：那么DOM和JS是什么关系？举个例子，我有一辆HTML汽车，汽车中的每一个部件都是HTML的节点，有一天，我的发动机节点不好使了，我想换一个，那么我怎么换呢？我需要使用工具创建一个新发动机节点，然后使用工具从HTML汽车中找到旧的发动机节点把它拆下来，然后再换上新的发动机节点。其实在这个过程中，我描述了一个使用js来操作DOM的过程。使用的工具就是javascript.我想大家应该明白了DOM和Javascript的关系了吧。

2.XML DOM的相关知识点

我们在学习过程中接触HTML DOM的比较多，平时敲的例子也都是操作HTML节点的。这里不在赘述。我整理了一下关于XML的一下知识点。

Javascript中装载XML文档

function loadXML(flag,xmldoc){
    if(window.ActiveXObject){
        //IE浏览器
        var activexName = ["MSXML2.DOMDocument","Miscrosoft.XmlDom"];
        var xmlobj;
        for(var i = 0; i < activexName.length;i++){
            try{
                xmlobj = new ActiveXObject(activexName[i]);
            }catch (e){
        }
    }
    
    if (xmlobj){
        xmlobj.async = false;
        if(flag){
            xmlobj.load(xmldoc);
        }else {
            xmlobj.loadXML(xmldoc);
        }
        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.documentElememt;               
           }else {
               //装载xml字符串
               xmlObj = new DOMParser();
               var docRoot = xmlObj.parseFromString(xmldoc,"text/xml");
               return docRoot.documentElement;
           }
        }
        alert("装载XML文档的对象装载失败！");
        return null;
    }
}

DOM操作XML

 function test(){
   var rootElement = loadXML(true,"Testbooks.xml");
   var rootDocument = rootElement.parentNode;
   var bookElement = rootDocument.createElement("book");
   var textNode = rootDocument.createTextNode("AJAX Hello");
   bookElement.appendChild(textNode);
   rootElement.appendChild(bookElement);
   var bookElements = rootElement.getElementsByTagName("book");
 }

DOM对象序列化成XML字符串

            function serializeDOM(xmldoc){
                if(xmldoc.xml){
                    //IE浏览器
                    return xmldoc.xml;
                }else if(window.XMLSerializer){
                    //FireFox浏览器
                    var seria = new XMLSerializer();
                    return seria.serializeToString(xmldoc);
                }
                return null;
            }

总结:从现在开始我尝试用自己语言来总结整理知识点，尽量少用ps,当然如果文章中出现错误，请一定指正。