DOM技术分享
Posted 张学亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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技术分享的主要内容，如果未能解决你的问题，请参考以下文章