在head标签中不小心加上了个br标签后导致javaScript的insertBefore函数出错
大家看下面的截图和源代码就知道了!
以下是testBrTag.jsp页面经过浏览器解析后的html源代码
这是testBrTag.jsp页面的源代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试在head标签中加入br标签后会导致javaScript的insertBefore函数出错的问题</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css"><br/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script>
</head>
<body>
<h2>测试在head标签中加入br标签后会导致javaScript的insertBefore函数出错的问题</h2>
<input type="button" value="测试在head标签中加入br标签后会导致javaScript的insertBefore函数出错的问题" onclick="testBrTag()">
<br><br>
<h3>测试在javaScript中的try catch</h3>
1. 任何数值除以0都会导致错误而终止程序执行。但是在 JavaScript 中,会返回出特殊的值,因此不会影响程序的执行。<br/>
2. 比0大的数除以0,则会得到无穷大,所以 js 用 Infinity 来显示出来<br/>
<a href="http://www.w3school.com.cn/js/js_errors.asp" target="_blank">
JavaScript 错误 - Throw、Try 和 Catch
</a>
<input type="button" value="测试没使用try catch的时候,程序是否会中断(情况1)" onclick="testTryCatch()"><br/>
<input type="button" value="测试没使用try catch的时候,程序是否会中断(情况2)" onclick="testTryCatch2()"><br/>
<input type="button" value="测试使用了try catch的时候,程序是否会继续执行" onclick="testTryCatch3()"><br/>
Throw 语句<br/>
throw 语句允许我们创建自定义错误。<br/>
正确的技术术语是:创建或抛出异常(exception)。<br/>
如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。<br/>
语法<br/>
throw exception<br/>
异常可以是 JavaScript 字符串、数字、逻辑值或对象。<br/>
<h2>请输入一个5到10之间的数字:</h2>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<h2 id="mess"></h2>
</body>
<script type="text/javascript">
//测试在head标签中加入br标签后会导致javaScript的insertBefore函数出错的问题
function testBrTag() {
console.log("我是testBrTag()函数");
var linkNode = document.createElement('link');
linkNode.rel = "stylesheet";
linkNode.type = "text/css";
linkNode.href = "css/console.css";
//能获得对象
var firstScriptNode = document.getElementsByTagName('script')[0];
//能获得对象
var test1 = linkNode;
var test2 = firstScriptNode;
//能获得对象
var test3 = document.getElementsByTagName('head');
//能获得对象
var test4 = document.getElementsByTagName('head')[0];
//唯独这句话报错(报错信息:NotFoundError: Node was not found),之所以报错就是因为head标签中不小心多加上了一个br标签才导致的报错
document.getElementsByTagName('head')[0].insertBefore(linkNode,
firstScriptNode);
console.log("我是testBrTag()函数中的最后一行代码");
}
</script>
<script type="text/javascript">
//debug("测试在head标签中加入br标签后会导致javaScript的insertBefore函数出错的问题");
</script>
<script type="text/javascript">
function testTryCatch() {
var a = 66;
var b = 0;
console.log("测试javaScript中某行代码如果报错,后面的语句是否会继续执行?(即如果某行代码报错,程序是否会中断?)");
console.log("a = " + a);
console.log("b = " + b);
console.log("我老家在江西省贛州市于都县");
/*
1. 任何数值除以0都会导致错误而终止程序执行。但是在 JavaScript 中,会返回出特殊的值,因此不会影响程序的执行。
2. 比0大的数除以0,则会得到无穷大,所以 js 用 Infinity 来显示出来
*/
var c = a / b; //在javaScript中得到Infinity
console.log("c = " + c);
console.log("好久好久没写javascript代码了");
console.log("呵呵");
var x = 0 / 0; //NaN;
var y = 1 / 0; //Infinity;
var z = 1 / 0 * 0; //NaN;
console.log("x = " + x + " y = " + y + " z = " + z);
// try {
// } catch (e) {
// }
}
//js中出现错误,程序会中断
function testTryCatch2() {
console.log("hello");
alerts("Welcome guest!"); //故意写错,故意在alert后面加个s
var text = "中国";
console.log("text = " + text);
console.log("上面的alert()函数多了一个s就会报错,并且会导致javascript中止执行,后面的代码也不会执行了");
}
//js中产生错误,因为错误被捕捉了,所以后续的代码能够继续执行
function testTryCatch3() {
console.log("hello");
try {
alerts("Welcome guest!"); //故意写错,故意在alert后面加个s
} catch (e) {
console.log("####捕捉到错误产生,错误信息描述:" + e.message);
console.log("****捕捉到错误产生,错误信息描述:" + e);
}
var text = "中国";
console.log("text = " + text);
console.log("因为错误被捕捉了,所以后续的代码能够继续执行");
}
function myFunction() {
try {
//取元素的值
//var textValue = document.getElementById("demo2").value;//注意:如果这行代码出错,也会抛出一个错误,也会在catch块中捕捉到该错误
var textValue = document.getElementById("demo").value;//注意:如果这行代码出错,也会抛出一个错误,也会在catch块中捕捉到该错误
//自定义错误消息
if (textValue == "")
throw "值为空"; //根据获取的值,抛出错误
if (isNaN(textValue))
throw "不是数字";
if (textValue > 10)
throw "太大";
if (textValue < 5)
throw "太小";
var h2Tag = document.getElementById("mess"); //抓住上面throw抛出的错误,给h2标签显示
h2Tag.innerHTML = "正常";
} catch (err) {
var h2Tag = document.getElementById("mess"); //抓住上面throw抛出的错误,给h2标签显示
h2Tag.innerHTML = "错误:" + err;
//最好是直接使用err对象,我个人不推荐使用err.message这种方式,因为如果是自定义错误消息,那么err.message就会得到undefined
console.log("####捕捉到错误产生,错误信息描述:" + err.message);
console.log("****捕捉到错误产生,错误信息描述:" + err);
}
var hometown = "江西省赣州市于都县";
console.log("hometown = " + hometown);
console.log("因为错误被捕捉了,所以后续的代码能够继续执行");
}
</script>
</html>
大家想想
document.getElementsByTagName('head')[0].insertBefore(linkNode,
firstScriptNode);这句话为什么会报错呢?(报错信息:NotFoundError: Node was not found),之所以报错就是因为head标签中不小心多加上了一个br标签才导致的报错,为什么这么说呢?
大家看下面的截图,这是报错信息:
大家在看下面的截图,原来浏览器会对html源代码进行自动的优化排列,看下图:
<br/><script type="text/javascript" src="/xml/js/console.js"></script> 这句话被浏览器放到<body>标签中了(可能是浏览器自动优化了html,把这句话优化到了<body>标签中),所以document.getElementsByTagName('head')[0].insertBefore(linkNode,firstScriptNode);这句话出了问题,document.getElementsByTagName('head')[0]这句话是得到head标签,而firstScriptNode是script标签对象,linkNode是要插入的节点对象,此时要在head标签中的script标签的前面插入linkNode这个新节点对象,而此时script标签已经被浏览器放到body标签中了,也就是说此时script标签和head标签没有父子关系,所以insertBefore()函数肯定会插入失败的!
所以大家要引以为戒!我把head标签中不小心加上的br标签删掉就不会有这样的问题了!
object.insertBefore(newnode,targetnode) 方法用于在指定的子节点之前插入节点。
指定节点与新节点为同级关系.注意:object必须与targetnode为父子关系,父孙关系或者其他关系均出错。