在某网课学习前端笔记整理js篇28-xml在不同浏览器的解析与序列化、浏览器对象模型BOM

xml在不同浏览器的解析与序列化、浏览器对象模型BOM

一、xml在不同浏览器的解析与序列化

大多数浏览器都内建了供读取和操作 XML 的 XML 解析器。解析器把 XML 转换为 JavaScript 可存取的对象。html是xml发展来的。

ie下：

example1

//以前获取ie的xmldom,我在ie试了下，支持ie9-,ie9及以上不支持
function createXMLDom(){
    var version = [
        "MSXML2.DOMDocument.6.0",
        "MSXML2.DOMDocument.3.0",
        "MSXML2.DOMDocument"
    ];
    for(var i=0;i<version.length;i++){
        try{
            var xmlDom = new ActiveXObject(version[i]);
        }catch(e){
            // 跳过
        }
    }
    return xmlDom
}
//w3cschool上的创建xmlDom的方法,和createXMLDom的兼容一样，ie9以下才支持。
function createXMLDom2(){
    xmlDom = new ActiveXObject('Microsoft.XMLDOM');
    return xmlDom;
}
// alert(createXMLDom());
alert(createXMLDom());

var xmlDom = createXMLDom2();
//解析字符串
xmlDom.loadXML('<root><name>tds</name><age>11</age></root>');
//序列化（序列化，把对象转为字节序列的过程）
console.log(xmlDom.xml);
//解析xml文件
xmlDom.load('33_test.xml');
//这里获取到了，但是如果33_test.xml是在服务器上的话，会获取不到，因为默认的解析是异步的，所以需要加上个监听事件。或者将它变为同步的
//xmlDom.async = false;//将解析变为同步
//可以像html一样添加子节点
var child = xmlDom.createElement('sex');
var textNode = xmlDom.createTextNode('男');
child.appendChild(textNode);
xmlDom.documentElement.appendChild(child);
console.log(xmlDom.xml);
//这个必须是加载服务器的xml文件时候才会触发，加载本地的不能触发
xmlDom.onreadystatechange = function(){
    //readyState有0,1,2,3,4这几个值，4表示完成。
    if(xmlDom.readyState ==  4){
        if(xmlDom.parseError == 0){
            console.log(xmlDom.xml);
        }else{
            /*
                        错误的行号  line
                        错误的位置  linepos
                        错误的信息  errorCode
                        错误的解释  reason
                     */
            throw new Error(
                "错误的行号："+xmlDom.parseError.line+"n"+
                "错误的位置："+xmlDom.parseError.linepos+"n"+
                "错误的信息："+xmlDom.parseError.errorCode+"\n"+
                "错误的解释："+xmlDom.parseError.reason);
        }
    }
}

非ie：

example2

//非ie创建xml对象加载xml文件。谷歌不行，其他的没试,火狐好像可以。

xmlDom=document.implementation.createDocument("","",null);
console.log(xmlDom);
xmlDom.async="true";
xmlDom.load("33_test.xml");
xmlDom.onload = function(){
    //序列化
    var str = (new XMLSerializer()).serializeToString(xmlDom);
    alert(str);
}

example3

//解析xml字符串
var parser = new DOMParser(),
    xmlStr = "",
    xmlDom = null;
try{
    xmlStr = "<root><user>xq</user></root>";
    xmlDom = parser.parseFromString(xmlStr, 'text/xml');
    var error = xmlDom.getElementsByTagName("parsererror");
    if(error.length > 0){
        throw new Error("xml格式有误:" + error[0].innerText);
    }
}catch(e){
    console.log(e)
}
var str = (new XMLSerializer()).serializeToString(xmlDom);
console.log(str);

关于解析xml在各个浏览器的支持。

	ie9-	ie9及ie9+	谷歌	火狐
解析xml文件（我这里指的是本地的，远程的没试过）	支持	不支持	不支持	支持
解析xml字符串	支持	支持	支持	支持

因为解析xml文件在谷歌不好用，所以这里我们用解析xml字符串来解析xml。下面是写的兼容方法:

example4

 //解析xml字符串并返回xml对象
function parseXML(xml){
    var xmlDom = null;
    //非ie9-
    if(typeof DOMParser != 'undefined'){
        xmlDom = (new DOMParser()).parseFromString(xml,'text/xml');
        // 检测是否xml文档有没有问题
        var error = xmlDom.getElementsByTagName('parsererror');
        console.log(error);
        if(error.length > 0){
            throw new Error('xml格式有误：'+error[0].textContent);
        }
    }else if(typeof ActiveXObject != 'undefined'){
        xmlDom = createXMLDom();
        xmlDom.loadXML(xml);
        if(xmlDom.parseError.errorCode != 0){
            throw new Error(
                "错误的行号:"+xmlDom.parseError.line+"\n"+
                "错误的位置:"+xmlDom.parseError.linepos+"\n"+
                "错误的信息:"+xmlDom.parseError.errorCode+"\n"+
                "错误的解释"+xmlDom.parseError.reason
            )
        }
    }else{
        throw new Error("NO XML available");
    }
    return xmlDom;
}
// 序列化xml  jDom
function serializerXML(xmlDom){
    //非ie9-
    if(typeof XMLSerializer != 'undefined'){
        xml = (new XMLSerializer()).serializeToString(xmlDom)
        console.log(xml);
    }else if(typeof xmlDom.xml != 'undefined'){
        //ie9-
        xml = xmlDom.xml;
    }else{
        throw new Error("无法解析");
    }
    return xml;
}
var xmlDom = parseXML("<root><name>tds</name><age>26</age></root>");
alert(serializerXML(xmlDom));

上面用typeof判断DOMParser因为DOMPareser如果没有用var声明，且没有赋值的话会报undefined错误。（我猜的）

二、浏览器对象模型BOM(browser object model)

screen: 获取屏幕的分辨率。

example5

console.log(screen.width, screen.height);//1536 864

location: 获取窗口的url相关的信息。

example6

console.log(location.href);	//url
console.log(location.hash);//#后边的内容
console.log(location.host);//ip
console.log(location.hostname);//主机名
console.log(location.port);//端口
console.log(location.pathname);//路径
console.log(location.protocol);//协议
console.log(location.search);//？后边的内容
location.reload();//重新加载文档，如果缓存中有该文档，会用缓存的文档
location.reload(true);//不加载缓存，从服务器加载缓存

方法可以对decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

navigator： 包含浏览器相关信息。

examle7

//判断浏览器是什么浏览器
function validBrowser(){
    var u_agent = navigator.userAgent;
    var browser_name='Failed to identify the browser';
    if(u_agent.indexOf('Firefox')>-1){
        browser_name='Firefox';
    }else if(u_agent.indexOf('Chrome')>-1){
        browser_name='Chrome';
    }else if(u_agent.indexOf('Trident')>-1&&u_agent.indexOf('rv:11')>-1){
        browser_name='IE11';
    }else if(u_agent.indexOf('MSIE')>-1&&u_agent.indexOf('Trident')>-1){
        browser_name='IE(8-10)';
    }else if(u_agent.indexOf('MSIE')>-1){
        browser_name='IE(6-7)';
    }else if(u_agent.indexOf('Opera')>-1){
        browser_name='Opera';
    }else{
        browser_name+=',info:'+u_agent;
    }
  return  browser_name;
}

history:

example8

history.go(-1);//后退1
history.go(2);//前进2
history.forward();//前进1
history.back();//后退1