DOM【介绍、HTML中的DOM、XML中的DOM】

时间 2019-11-16

标签 dom 介绍 html xml 栏目 HTML 繁體版

原文原文链接

什么是DOM？

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

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

为何要使用DOM？

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

HTML的DOM

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

API

NODE对象API

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

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

HTML不一样类型的节点之间都是有联系的：安全

位于一个节点之上的节点是该节点的父节点(parent)
一个节点之下的节点是该节点的子节点（children）
同一层次，具备相同父节点的节点是兄弟节点（sibling）
一个节点的下一个层次的节点集合是节点后代(descendant)
父、祖父节点及全部位于节点上面的，都是节点的祖先(ancestor)

因而乎，NODE对象也有访问节点的属性和方法服务器

属性：微信

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

方法：

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

document

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

document的属性：

documentElement【能够获取获得<html>这个节点】

document方法：

createElement()【建立一个元素节点】
createComment()【建立注释】
createAttribute()【建立属性节点】
createTextNode()【建立文本节点】
getElementById()【经过id获得该元素节点】
getElementsByTagName()【经过标签名，获得全部标签名的数组】

Element接口

Element表明的是元素节点，是咱们常常用到的一个接口！

Element属性：

tagName【返回的是元素标签的大写名称】

Element方法：

getAttribute(String name)【获得属性的值】
setAttribute(String name,String value)【设置属性的名称和值，不存在则建立】
getElementsByTabName()【返回该元素节点的子孙节点的数组】
removeAttribute()【移除属性】

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

var input = 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 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--]);
            }
        }
    }
}

XPATH

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

能够参考我以前的XML博文：http://blog.csdn.net/hon_3y/article/details/55049184

XPATH整体可分为三种搜索：

绝对路径搜索（/根节点/子节点）
相对路径搜索（子节点/子节点）【与绝对路径搜索的差异就是开头有无"/"】
全文搜索（//子节点）

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

属性节点：（先找到元素节点/@属性名）
文本节点：（先找到元素节点/test()）
有条件查询节点：（先找到元素节点/[条件]）
多条件查询节点：（先找到元素节点/条件）【两个条件同时吻合】
多条件查询节点：（先找到元素节点/[条件]｜先找到元素节点/[条件]）【或关系】

咱们以前使用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;
    }

}

测试代码：

<script type="text/javascript" src="loadXML.js" ></script>
    <script type="text/javascript" src="xpath.js" ></script>

    <script type="text/javascript">

        function test() {

            var file = loadXML(true, "1.xml");

            var xpathValue = selectSingleNode(file, "//dd");
            var value = xpathValue;

            alert(value);

        }

    </script>

在fireFox，Chrome浏览器能够正常获取获得节点

selectNodes()

因为上面IE问题我到如今尚未解决，因此下面直接测试FireFox浏览器了。

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

javaScript代码：

/**
 *
 * @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 test() {

            var file = loadXML(true, "1.xml");

            var xpathValue = selectNodes(file, "//aa");
            var value = xpathValue;

            alert(value);
        }

效果：

若是文章有错的地方欢迎指正，你们互相交流。习惯在微信看技术文章，想要获取更多的Java资源的同窗，能够 关注微信公众号:Java3y

1. DOM【介绍、HTML中的DOM、XML中的DOM】
2. DOM、HTML DOM、XML DOM
3. HTML DOM介绍
4. DOM的介绍
5. IE中的XML DOM 与 Firefox中的XML DOM 比较
6. HTML DOM 简介
7. DOM简介【DOM】
8. JS中的DOM
9. JavaScript中的DOM
10. JavaScript中的Dom
更多相关文章...
• 现实生活中的 XML - XML 教程
• XML DOM 简介 - XML DOM 教程
• C# 中 foreach 遍历的用法
• Java Agent入门实战（一）-Instrumentation介绍与使用