什么是DOM编程？(修订版)

小鱼儿 2021-09-30 23:20 323阅读 0赞

## 前言 ##

> 只有光头才能变强。
> 
> 文本已收录至我的GitHub仓库，欢迎Star：https://github.com/ZhongFuCheng3y/3y

# 什么是DOM？ #

DOM（Document Object Model）文档对象模型，是**语言和平台的中立接口。。**

**允许程序和脚本动态地访问和更新文档的内容**。

# 为什么要使用DOM？ #

Dom技术使得**用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等**，Dom技术使得**页面的交互性大大地增强**。

# HTML的DOM #

HTML的DOM是一个内存对象树，在浏览器中只保存一份，**HTML的DOM修改HTML的内容会直接反应到浏览器中**

![640?wx\_fmt=png][640_wx_fmt_png] 这里写图片描述

## API ##

### NODE对象API ###

**在DOM眼中，HTML是由不同类型的节点组成的，这些节点都属性NODE对象。**

NODE对象有一个**nodeType的属性可用于判断节点类型**

![640?wx\_fmt=png][640_wx_fmt_png 1] 这里写图片描述

--------------------

**HTML不同类型的节点之间都是有联系的：**

于是乎，**NODE对象也有访问节点的属性和方法**

**属性：**

![640?wx\_fmt=png][640_wx_fmt_png 2] 这里写图片描述![640?wx\_fmt=png][640_wx_fmt_png 3] 这里写图片描述

总的来说就是：**得到节点的信息(节点名字、节点值)以及访问节点的兄弟、父亲**

--------------------

**方法：**

![640?wx\_fmt=png][640_wx_fmt_png 4] 这里写图片描述![640?wx\_fmt=png][640_wx_fmt_png 5] 这里写图片描述

总的来说就是：**添加、替换、删除子节点，判断是否有子节点，克隆子节点**

--------------------

### document ###

HTML的DOM中我们提到并**大量使用了document这个Javascirpt的内置对象**，请注意这个对象仅仅可以**表示HTML的根节点**。

**document的属性：**

document方法：

### Element接口 ###

**Element代表的是元素节点，是我们经常用到的一个接口！**

**Element属性：**

**Element方法：**

当我们设置属性的时候，我们不是调用方法来设置，而经常会这样做：

var input = document.createElement("input");input.value = "aa";input.name = "bb";document.createElement("input");
    input.value = "aa";
    input.name = "bb";

--------------------

# XML的DOM #

**我们可能会用XML文件作为客户端和服务器的传输文件。于是我们需要学习在JavaScript代码中通过DOM操作XML文档**

**XML和HTML的API是十分类似的，这里就不赘述了。**

## 装载XML ##

**客户端和服务端如果是通过XML文件或者XML字符串进行交互数据的话。那么，我们需要装载服务器的XML文件或XML字符串到JavaScript中的DOM对象。**

现在问题就是，**IE和fireFox的装载XML方式是不一样的**。因此，我们最好**封装成一个方法来装载XML**。

/** * @param flag true代表的是文件，false代表的是字符串 * @param xmldoc 要封装成DOM对象的字符串或文件 * @return 返回的是根节点的元素节点 *    重点放在高版本上！！ * */function loadXML(flag, xmldoc) {    //浏览器是低版本的IE    var objXml;    if (window.ActiveXObject) {        //是IE的话，有两种方式来创建ActiveXObject对象        var name = ["MSXML2.DOMDocument", "Miscrosoft.XmlDom"];        for (var i = 0; i < name.length; i++) {            objXml = new ActiveXObject(name);            break;        }        //设置为同步【装载XML文件成DOM对象，我们都是同步操作】        objXml.async = false;        //如果是字符串        if (flag == false) {            objXml.loadXML(xmldoc);        } else {            //如果是文件            objXml.load(xmldoc)        }        return objXml.documentElement;        //浏览器是fireFox或者高版本的IE    } else if (document.implementation.createDocument) {        //字符串        if (flag == false) {            //创建对象，解析XML字符串            objXml = new DOMParser();            //解析到根节点            var root = objXml.parseFromString(xmldoc, "text/xml");            return  root.documentElement;        } else {            //由于安全问题，想要得到XML文件，需要通过XMLHttpRequest对象来获取            objXml = new XMLHttpRequest();            //同步            objXml.open("GET", "1.xml", false);            objXml.send(null);            //返回XML数据            return objXml.responseXML.documentElement;        }        //解析不了啦    } else {        alert("解析不了了");    }}
    
    
    function loadXML(flag, xmldoc) {
        
    
        //浏览器是低版本的IE
        var objXml;
        if (window.ActiveXObject) {
        
    
            //是IE的话，有两种方式来创建ActiveXObject对象
            var name = ["MSXML2.DOMDocument", "Miscrosoft.XmlDom"];
            for (var i = 0; i < name.length; i++) {
        
                objXml = new ActiveXObject(name);
                break;
            }
    
            //设置为同步【装载XML文件成DOM对象，我们都是同步操作】
            objXml.async = false;
    
            //如果是字符串
            if (flag == false) {
        
                objXml.loadXML(xmldoc);
            } else {
        
                //如果是文件
                objXml.load(xmldoc)
            }
            return objXml.documentElement;
    
    
            //浏览器是fireFox或者高版本的IE
        } else if (document.implementation.createDocument) {
        
            //字符串
            if (flag == false) {
        
    
                //创建对象，解析XML字符串
                objXml = new DOMParser();
    
                //解析到根节点
                var root = objXml.parseFromString(xmldoc, "text/xml");
                return  root.documentElement;
    
    
            } else {
        
    
                //由于安全问题，想要得到XML文件，需要通过XMLHttpRequest对象来获取
                objXml = new XMLHttpRequest();
    
                //同步
                objXml.open("GET", "1.xml", false);
    
                objXml.send(null);
    
                //返回XML数据
                return objXml.responseXML.documentElement;
    
            }
            //解析不了啦
        } else {
        
            alert("解析不了了");
        }
    
    }

### 测试 ###

![640?wx\_fmt=png][640_wx_fmt_png 6] 这里写图片描述

--------------------

## 去除空白字符 ##

**如果有需要就加这段功能吧！**

function removeBlank(xml) {    if (xml.childNodes.length > 1) {        for (var loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++) {            var currentNode = xml.childNodes[loopIndex];            if (currentNode.nodeType == 1) {                removeBlank(currentNode);            }            if (((/^\s+$/.test(currentNode.nodeValue))) && (currentNode.nodeType == 3)) {                xml.removeChild(xml.childNodes[loopIndex--]);            }        }    }}
        if (xml.childNodes.length > 1) {
        
            for (var loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++) {
        
                var currentNode = xml.childNodes[loopIndex];
                if (currentNode.nodeType == 1) {
        
                    removeBlank(currentNode);
                }
                if (((/^\s+$/.test(currentNode.nodeValue))) && (currentNode.nodeType == 3)) {
        
                    xml.removeChild(xml.childNodes[loopIndex--]);
                }
            }
        }
    }

## XPATH ##

XPATH技术其实我们已经接触过了，在讲解XML的时候，我们已经使用过了XPATH技术了。

XPATH总体可分为三种搜索：

如果我们要查找属性节点、文本节点、多条件的节点是这样写XPATH的

我们之前使用dom4j的时候，是调用selectSingleNode()和selectNodes()方法来**获取任意深度的节点或多个节点**

我们想要在JavaScript中使用XPATH技术，那么我们也实现这两个方法，调用它就行了！

### selectSingleNode() ###

IE10,IE11下无法使用selectSingleNode()方法。解决参考：http://wenda.so.com/q/1458453513726662

**但是，我没有解决掉该问题。。。。。**

下面是JavaScript代码：

/** *  * @param xmldoc 代表的是XML的根节点 * @param xpath 给出的XPATH表达式 * @return 返回的是对应的节点或多个节点 */function selectSingleNode(xmldoc,xpath) {    //如果是IE,IE10，IE11解决不了....会的人告诉我一声！！    if(navigator.userAgent.indexOf(".NET")>0) {        var value = xmldoc.selectNodes(xpath)        return value;    }else {        //如果是fireFox        var xpathObj = new XPathEvaluator();        var value = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);        return value.singleNodeValue;    }}
    function selectSingleNode(xmldoc,xpath) {
        
    
    
        //如果是IE,IE10，IE11解决不了....会的人告诉我一声！！
        if(navigator.userAgent.indexOf(".NET")>0) {
        
            var value = xmldoc.selectNodes(xpath)
            return value;
    
        }else {
        
    
            //如果是fireFox
            var xpathObj = new XPathEvaluator();
            var value = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
    
            return value.singleNodeValue;
        }
    
    }

![640?wx\_fmt=png][640_wx_fmt_png 7] 这里写图片描述

--------------------

### selectNodes() ###

由于上面IE问题我到现在还没有解决，**所以下面直接测试FireFox浏览器了**。

等我复习到Jquery的时候，再把这里的坑填了吧。。。

/** * * @param xmldoc 代表的是XML的根节点 * @param xpath 给出的XPATH表达式 * @return 返回的是节点数组 */function selectNodes(xmldoc,xpath) {    var xpathObj = new XPathEvaluator();    //如果是多节点，返回的是迭代器    var iterator = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);    //把迭代器的数据写到数组中    var arr = new Array();    var node;    while ((node=iterator.iterateNext())!=null) {        arr.push(node);    }    return arr;}
    function selectNodes(xmldoc,xpath) {
        
    
        var xpathObj = new XPathEvaluator();
    
        //如果是多节点，返回的是迭代器
        var iterator = xpathObj.evaluate(xpath, xmldoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
    
        //把迭代器的数据写到数组中
        var arr = new Array();
    
        var node;
        while ((node=iterator.iterateNext())!=null) {
        
            arr.push(node);
        }
    
        return arr;
    
    }

function test() {  var file = loadXML(true, "1.xml");  var xpathValue = selectNodes(file, "//aa");  var value = xpathValue;  alert(value);}
    
      var file = loadXML(true, "1.xml");
    
      var xpathValue = selectNodes(file, "//aa");
      var value = xpathValue;
    
      alert(value);
    }

![640?wx\_fmt=png][640_wx_fmt_png 8] 这里写图片描述

## 最后 ##

##  ##

> 乐于输出**干货**的Java技术公众号：Java3y。公众号内有200多篇**原创**技术文章、海量视频资源、精美脑图，不妨来**关注**一下！

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

有帮助？在看！转发！ ![640][]

[640_wx_fmt_png]: /images/20210827/268e626c66a04623bc699c6c2622a506.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210827/54f3ded4a4d34bf0a69512c4d28f86b4.png?wx_fmt=png
[640_wx_fmt_png 2]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/2BGWl1qPxib0rPL55y3LKORFF2nZxlUdNL11wZcicpF8LyHXCsWvibN4n62eAvPvKMRdbOeibBNqRWBCyEicRZypccA/640?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210827/19a67bc9b6614842ba71a9ede35fe4c9.png?wx_fmt=png
[640_wx_fmt_png 4]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/2BGWl1qPxib0rPL55y3LKORFF2nZxlUdNic3YRuZb3TySYeq3S5ZBiavI4klOr5GCWqRVlAZgl6NmAZcwnqOFjXeQ/640?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210827/aeaa843fc4884f1c9036df51094a9928.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210827/ab54eaf689b9443996fe326d3d15da26.png?wx_fmt=png
[640_wx_fmt_png 7]: /images/20210827/a82fd027b9ff42e2aede034f5c8000a0.png?wx_fmt=png
[640_wx_fmt_png 8]: /images/20210827/526cf2a944dd41fba319074d06e0568f.png?wx_fmt=png
[640_wx_fmt_jpeg]: /images/20210827/f351f70cb0074c3daef24aa5b64a4c3e.png?wx_fmt=jpeg
[640]: /images/20210827/2f879d52051a4d68b7224943a9f2d45d.png