DOM编程

什么是DOM?

DOM(Document Object Model)文档对象模型,是语言和平台的中立接口。。

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

为什么要使用DOM?

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

HTML的DOM

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

API

NODE对象API

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

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


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

  • 位于一个节点之上的节点是该节点的父节点(parent)
  • 一个节点之下的节点是该节点的子节点(children)
  • 同一层次,具有相同父节点的节点是兄弟节点(sibling)
  • 一个节点的下一个层次的节点集合是节点后代(descendant)
  • 父、祖父节点及所有位于节点上面的,都是节点的祖先(ancestor)

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

属性:

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


方法:

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


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);
        }
  • 效果:

原文发布于微信公众号 - Java3y(gh_085b56c42174)

原文发表时间:2018-03-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

让js调试更简单—console

console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o):

1181
来自专栏木子昭的博客

ES6常用语法糖(附Babel配置使用方法)

获取数据: 解构赋值 ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

2988
来自专栏禁心尽力

mybatis_常用标签

1、<where></where>标签的作用 可以动态的添加where关键字 可以自动去掉第一个拼接条件的and关键字 1      <wher...

2297
来自专栏HTML5学堂

JavaScript 基础语法

讲法声明 - 很重要,请先查看 关于JavaScript的讲法,我们采取的方式与HTML&CSS类似,先在课程中带大家,以“实现页面小功能”为目的,一步一步的进...

3244
来自专栏互联网杂技

jQuery插件编写步骤详解

本文实例讲述了jQuery插件编写步骤。分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq...

39911
来自专栏小怪聊职场

爬虫课堂(二十二)|使用LinkExtractor提取链接

7565
来自专栏柠檬先生

Angularjs基础(七)

AngularJS表单     AngularJS表单时输入控件的集合 HTML控件     一下HTML input 元素被称为HTML 控件:   ...

2197
来自专栏老马寒门IT

09-移动端开发教程-Sass入门

CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CS...

6159
来自专栏前端杂货铺

jQuery的事件模型

前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型。 jQuery的事件系统离不开jQuery的缓...

3578
来自专栏快乐八哥

Javascript对象的方法赋值

Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method)。今天在写代码过程中,又犯了一个低级错误。 <!DOC...

1979

扫码关注云+社区

领取腾讯云代金券