首页 > 代码库 > DOM技术分享

DOM技术分享

js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

投稿:mdxy-dxy

这篇文章主要分享了判断IE、FF、Opera、Safari、Chrome等浏览器和版本的两种方法,需要的朋友可以参考下

因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了

function isIE() { //ie?

      if (!!window.ActiveXObject || "ActiveXObject" in window)

        return true;

      else

        return false;

    }

第一种,只区分浏览器,不考虑版本

复制代码 代码如下:

 

function myBrowser(){

    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

    var isOpera = userAgent.indexOf("Opera") > -1;

    if (isOpera) {

        return "Opera"

    }; //判断是否Opera浏览器

    if (userAgent.indexOf("Firefox") > -1) {

        return "FF";

    } //判断是否Firefox浏览器

    if (userAgent.indexOf("Chrome") > -1){

  return "Chrome";

 }

    if (userAgent.indexOf("Safari") > -1) {

        return "Safari";

    } //判断是否Safari浏览器

    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {

        return "IE";

    }; //判断是否IE浏览器

}

//以下是调用上面的函数

var mb = myBrowser();

if ("IE" == mb) {

    alert("我是 IE");

}

if ("FF" == mb) {

    alert("我是 Firefox");

}

if ("Chrome" == mb) {

    alert("我是 Chrome");

}

if ("Opera" == mb) {

    alert("我是 Opera");

}

if ("Safari" == mb) {

    alert("我是 Safari");

}

第二种,区分浏览器,并考虑IE5.5 6 7 8

复制代码 代码如下:

 

function myBrowser(){

    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器

    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器

    var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器

    var isSafari = userAgent.indexOf("Safari") > -1; //判断是否Safari浏览器

    if (isIE) {

        var IE5 = IE55 = IE6 = IE7 = IE8 = false;

        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");

        reIE.test(userAgent);

        var fIEVersion = parseFloat(RegExp["$1"]);

        IE55 = fIEVersion == 5.5;

        IE6 = fIEVersion == 6.0;

        IE7 = fIEVersion == 7.0;

        IE8 = fIEVersion == 8.0;

        if (IE55) {

            return "IE55";

        }

        if (IE6) {

            return "IE6";

        }

        if (IE7) {

            return "IE7";

        }

        if (IE8) {

            return "IE8";

        }

    }//isIE end

    if (isFF) {

        return "FF";

    }

    if (isOpera) {

        return "Opera";

    }

}//myBrowser() end

//以下是调用上面的函数

if (myBrowser() == "FF") {

    alert("我是 Firefox");

}

if (myBrowser() == "Opera") {

    alert("我是 Opera");

}

if (myBrowser() == "Safari") {

    alert("我是 Safari");

}

if (myBrowser() == "IE55") {

    alert("我是 IE5.5");

}

if (myBrowser() == "IE6") {

    alert("我是 IE6");

}

if (myBrowser() == "IE7") {

    alert("我是 IE7");

}

if (myBrowser() == "IE8") {

    alert("我是 IE8");

}

下面给出一个判断当前浏览器是IE的JS代码.

原理是利用了IE与标准浏览器在处理数组的toString方法的差异做成的。对于标准游览器,如果数组里面最后一个字符为逗号,JS引擎会自动剔除它。 

 

 

 

 

insertAfter()方法------在节点后面插入节点

 

DOM提供了insertBefore()方法,可以在某一个节点前面插入节点,但有时候需要在某一个节点后面插入节点,这就是insertAfter()方法。(From:JavaScript DOM编程艺术)

 

函数名:insertAfter()

 

参数:newElement:要添加的节点,targetElement:目标节点

 

 

 

1function insertAfter(newElement,targetElement) {

 

2var parent = targetElement.parentNode;//获取目标节点的父级标签3if(parent.lastChild == targetElement) {//如果目标节点正好是最后一个节点,使用appendChild插入

 

4 parent.appendChild(newElement);

 

5 } else {

 

6 parent.insertBefore(newElement,targetElement.nextSibling);//一般情况下要取得目标节点的下一个节点,再使用insertBefore()方法。

 

7 }

 

8 }

 

 

 

无论是insertBefore()还是insertAfter(),都是针对DOM节点树而言的,所有最基本的这俩个函数对元素节点和文本节点都有效。

 

测试一:DOM节点树中是否包含属性节点。

 

 

 

<html><head>head><body><div id="parentNode"><h1 id="childElementNode01">this is childNode01h1><h1 id="childElementNode02">this is childNode02h1><h1 id="childElementNode03">this is childNode03h1>div><script>var targetElement = document.getElementById("childElementNode02");

 

        var parentElement = targetElement.parentNode;

 

        //alert(parentElement.nodeName);//DIV//alert(parentElement.nodeType);//1 //alert(parentElement.childNodes.length);//7,有7个childNode/*第一个子节点*///alert(parentElement.childNodes[0].nodeName);//#text//alert(parentElement.childNodes[0].nodeType);//3,文本节点//alert(parentElement.childNodes[0].nodeValue);//空值/*第二个子节点*///alert(parentElement.childNodes[1].nodeName);//H1//alert(parentElement.childNodes[1].nodeType);//1,元素节点//alert(parentElement.childNodes[1].nodeValue);//null/*第三个子节点*///alert(parentElement.childNodes[2].nodeName);//#text//alert(parentElement.childNodes[2].nodeType);//3,文本节点//alert(parentElement.childNodes[2].nodeValue);//空值/*第四个子节点*///alert(parentElement.childNodes[3].nodeName);//H1//alert(parentElement.childNodes[3].nodeType);//1,元素节点//alert(parentElement.childNodes[3].nodeValue);//nullscript>body>html>

 

 

 

可以看到,文本节点和元素节点是同胞关系,这里测试用的是firefox,它把TAB和换行都当成了文本节点,所以才会出现7个子节点。

 

需要注意的是属性节点并不包含在7个子节点中,也就是说,属性节点并不包含在DOM节点树中。

 

事实上,属性节点代表了元素中的属性。在DOM API中,属性节点是通过org.w3c.dom.Attr接口来表示的。因为属性实际上是附属于元素的,所以属性节点不能看做元素节点的子节点,

 

因而在DOM中,属性没有被认为是DOM节点树中的一部分,在属性节点上调用getparentNode()、getPreviousSilbling()和getNextSilbling()方法返回的都是null。

 

也就是说,元素节点被看成包含它的元素节点的一部分,并不是单独的作为节点存在于DOM节点树中,属性节点并不是“节点”。

 

测试二:insertBefore()方法是否是作用于整个DOM节点树的。

 

 

 

<html><head>head><body><div id="parentDivNode"><h1 id="childElementNode01">this is childElementNode01h1><h1 id="childElementNode02">this is childElementNode02h1><h1 id="childElementNode03">this is childElementNode03h1>div><script>var parentDivNode = document.getElementById("parentDivNode");

 

        var childNode03 = parentDivNode.childNodes[2];//文本节点var childNode04 = parentDivNode.childNodes[3];//元素节点/*新建文本节点*/var newTextNode = document.createTextNode("newTextNode");

 

        /*新建元素节点*/var elementNode = document.createElement("h1");

 

        var elementNode_textNode = document.createTextNode("elementNode");

 

        elementNode.appendChild(elementNode_textNode);

 

        //分4中情况插入DOM 节点树中,insertBefore的2个参数//1、文本节点,文本节点//parentDivNode.insertBefore(newTextNode,childNode03);//alert(parentDivNode.childNodes.length);//8//2、文本节点,元素节点//parentDivNode.insertBefore(newTextNode,childNode04);//alert(parentDivNode.childNodes.length);//8//3、元素节点,文本节点//arentDivNode.insertBefore(elementNode,childNode03);//lert(parentDivNode.childNodes.length);//8//4、元素节点,元素节点 parentDivNode.insertBefore(elementNode,childNode04);

 

        alert(parentDivNode.childNodes.length);//8script>body>html>

 

 

 

结论:insertBefore()方法是作用于整个节点树的

 

测试三:insertAfter()方法是否是作用于整个DOM节点树的。

 

 

 

<html><head><script>function insertAfter(newElement,targetElement) {

 

            var parent = targetElement.parentNode;//获取目标元素的父级标签if(parent.lastChild == targetElement) {

 

                parent.appendChild(newElement);

 

            } else {

 

                parent.insertBefore(newElement,targetElement.nextSibling);

 

            }

 

        }

 

    script>head><body><div id="parentDivNode"><h1 id="childElementNode01">this is childElementNode01h1><h1 id="childElementNode02">this is childElementNode02h1><h1 id="childElementNode03">this is childElementNode03h1>div><script>var parentDivNode = document.getElementById("parentDivNode");

 

        var childNode03 = parentDivNode.childNodes[2];//文本节点var childNode04 = parentDivNode.childNodes[3];//元素节点/*新建文本节点*/var newTextNode = document.createTextNode("newTextNode");

 

        /*新建元素节点*/var elementNode = document.createElement("h1");

 

        var elementNode_textNode = document.createTextNode("elementNode");

 

        elementNode.appendChild(elementNode_textNode);

 

        //分4中情况插入DOM 节点树中,insertAfter的2个参数//1、文本节点,文本节点//insertAfter(newTextNode,childNode03);//alert(parentDivNode.childNodes.length);//8//2、文本节点,元素节点//insertAfter(newTextNode,childNode04);//alert(parentDivNode.childNodes.length);//8//3、元素节点,文本节点//insertAfter(elementNode,childNode03);//alert(parentDivNode.childNodes.length);//8//4、元素节点,元素节点//insertAfter(elementNode,childNode04);//alert(parentDivNode.childNodes.length);//8script>body>html>

 

 

 

结论:insertAfter()方法是作用于整个节点树的,DOM树中的节点都是继承自Node类型。

 

DOM技术分享