Javascript学习一：BOM and DOM
虽然平时也会写一些javascript，会使用JQuery，但是总觉得自己学的不够系统，下定决心这次一定要扎实的学好。
之前写过代码，所以怎么也知道DOM是什么，但是这几天听别人说BOM，突然发现我不知道BOM（以前学过ERP，知道BOM是Bill of Material,中文翻译为物料清单），可是javascript也有个BOM，它到底是什么，上网查资料。
BOM: Browser Object Model, 浏览器对象模型，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
BOM 描述了与浏览器进行交互的方法和接口。
BOM没有相关的标准，每种浏览器都有自己的BOM实现。
DOM：Document Object Model, 文档对象模型，DOM 把整个页面规划成由节点层级构成的文档。
DOM 描述了处理网页内容的方法和接口。
HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
针对BOM写了一个例子，主旨是学会用这些API，写的过程中发现浏览器表现的结果和书上有一些不一样：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> </title> 5 </head> 6 <body> 7 <p id="demo"> ... </p> 8 <div id="products"> 9 <div id="product1">product1</div> 10 <div>product2</div> 11 </div> 12 <input type="button" value="open a new window" onclick="openWin();"> 13 <input type="button" value="append a new product" onclick="addProduct();"> 14 <input type="button" value="insert a new product before1" onclick="insertProduct();"> 15 <script type="text/javascript"> 16 var page_width = window.innerWidth, 17 page_height = window.innerHeight; 18 if(typeof page_width != 'number'){ 19 // what is document.compatmode 20 // "BackCompat" for Quirks mode or "CSS1Compat" for Strict mod 21 if(document.compatMode == "CSS1Compat"){ 22 page_width = document.documentElement.clientWidth; 23 page_height = document.documentElement.clientHeight; 24 } 25 else{ 26 page_width = document.body.clientWidth; 27 page_height = document.body.clientHeight; 28 } 29 } 30 31 x = document.getElementById("demo"); 32 x.innerHTML = "Browser inner window width: " + page_width; 33 x.innerHTML += "<br>Browser inner window height: " + page_height; 34 35 function openWin(){ 36 // open(), 4 parameters, (url, name, attribute ,replace) 37 // myWindow = window.open('http://www.google.com.au','myWindow', 'width=200, height=100'); 38 myWindow = window.open('','', 'width=200, height=100'); 39 myWindow.document.write("<p>This is 'myWindow'</p>"); 40 /* 41 //not work 42 setTimeout(moveWin(), 3000); 43 //work well 44 setTimeout(function(){myWindow.resizeTo(500, 500);}, 3000); 45 */ 46 setTimeout(function(){myWindow.resizeTo(500, 500);}, 3000); 47 setInterval(function(){myWindow.moveTo(0, 0);}, 3000); 48 // setTimeout(function(){myWindow.close();}, 3000); 49 } 50 51 function moveWin(){ 52 // IE/ff/chrome only work well on new window you create, it doent work on parent window. 53 myWindow.moveTo(300,0); 54 } 55 56 function resizeWin(){ 57 myWindow.resizeTo(500, 200); 58 } 59 60 // childNodes: the first and the last are same: '#text', not null 61 // previousSibling: the first child and the last child are '#text', not null 62 63 // different saying in book: <Professional javascript for web developer> Page-250 not mention '#text' 64 x.innerHTML += "<br>products have child: " + document.getElementById("products").hasChildNodes(); 65 x.innerHTML += "<br>products child: " + document.getElementById("products").childNodes; 66 x.innerHTML += "<br>products child[0]: " + document.getElementById("products").childNodes[0]; 67 x.innerHTML += "<br>products child[1]: " + document.getElementById("products").childNodes[1]; 68 x.innerHTML += "<br>products child[2]: " + document.getElementById("products").childNodes[2]; 69 x.innerHTML += "<br>products previousSibling: " + document.getElementById("products").previousSibling; 70 x.innerHTML += "<br>products nextSibling: " + document.getElementById("products").nextSibling; 71 72 var products = document.getElementById("products"); 73 var product1 = document.getElementById("product1"); 74 function addProduct(){ 75 var product3 = document.createElement("div"); 76 var product3_detail = document.createTextNode("product3 appened by js"); 77 product3.appendChild(product3_detail); 78 products.appendChild(product3); 79 } 80 81 function insertProduct(){ 82 var product0 = document.createElement("div"); 83 product0.appendChild(document.createTextNode("product0 inserted before product1")); 84 products.insertBefore(product0, product1); 85 } 86 87 </script> 88 89 </body> 90 </html>
20130908增加
“ // childNodes: the first and the last are same: '#text', not null
// previousSibling: the first child and the last child are '#text', not null”
原因是 我在写Markup的时候，元素之间加了回车，如果删除回车，让代码显示成一行，结果就是相应的节点了，也就是说浏览器会把换行也当做一个元素。