在head標籤中不小心加上了個br標籤後導致javaScript的insertBefore函數出錯
阿新 • • 發佈：2018-12-26
在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為父子關係，父孫關係或者其他關係均出錯。