黑马程序员 BOM

------- android培训、java培训、期待与您交流！ ----------

 

DOM:Document Object Model。文档对象模型。
 其实就是将标记型文档以及文档中的所有内容封装成对象。
 为什么封装对象呢？
 因为在封装对象时，可以在对象中定义属性和行为，便于操作这个对象。

 其实就是在内存中，因为标签具有层次关系，建立了一棵树。
 标签中的内容都作为数中的分支存在。将分支形象成为节点。

 Html
  |--head
   |--base
   |--meta
   |--link
   |--title
   |--style
   |--script
  |--body
   |--div
         |--b
   |--table
    |-tbody
     |--tr
      |--th
      |--td
   |--form
    |--input
    |--select
     |--option
   |--a
    |--img

 DOM:本身是不依赖于平台和语言的一项技术。
  只对标记文档操作。
  每一个应用软件只要可以解析标记型文档，都是因为内部封装到了dom解析器。
  对于浏览器可以解析html，并在内存中生成dom树，就因为嵌入了dom解析器。

  日后，xml标记文档作为配置文件较为常用，而且需要高级语言进行解析。
  那么对于java程序员，想要用java语言来对xml文档进行解析，jvm也需要封装dom解析器。
  在java的api中就有org.w3c.dom包提供了操作xml文档的对象。

  但是该操作较为麻烦。

  为了java方便操作xml，可以使用第三方工具。DOM4j

 DOM在不断升级过程中,出现了三层模型。
 DOM Level 1：对html进行封装。
 DOM Level 2: 对1进行升级，提供了一些新特性，比如可以融入名称空间。
 DOM Level 3: 对xml进行封装。

---------------------------------------
 
 DHTML：动态的html。它是多项技术的综合体。
 html:通过标签对数据进行封装，它是基础，有了封装，就可以将标签变成对象，也可以将样式作用到标签上。
 css:专门负责页面的样式。
 dom:将文档以及标记封装对象。
 javascript:将三个技术进行融合，通过程序设计语言可以对其进行复杂操作。

 
---------------------------------------

现阶段我们要解析的是html文档。
可以基于浏览器来完成。

那么这是html文档只是浏览器中的一部分。
提供了概念：
BOM:browser object model

浏览器对象模型:
 window
  |--history：代表浏览器的历史记录。
  |--location：代表地址栏，url。href属性可以获取和设置url值。
  |--navgitor：获取浏览器以及系统平台的信息。
  |--screen：获取屏幕信息。
  |--event:窗体的中的事件对象。
   可以通过属性keyCode获取键盘对应的码。
   那么可以在网页上屏蔽键盘某些键。window.event.keyCode

   srcElement:获取事件源对象。window.event.srcElement.nodeName;
   returnValue:通过boolean型的取值，可以对事件进行执行或者取消。
   如：键盘录入数据，有些数据需要可以在判断后，将returnValue的值为false。
   再如：注册表单时，某一项填写错误，submit按钮失效。

  |--document：

 
 属性：status。代表窗口的状态栏。

 方法：
  alert(msg):带确定按钮的对话框
  confirm():带有确定和取消按钮的对话框。
  open()：打开一个新窗口。
   open("demo.html","_blank","height=300,width=500,left=200,top=100,toolbar=no");
  close():关闭窗口。
  moveBy(x,y):x,y 是偏移量。
  moveTo(x,y):x,y 坐标。
  focus():让窗口前置。
  timeid1 = setInterval("code",time):每隔time时间执行一次code。
  timeid2 = setTimeout("code",time):经过time时间执行一次code只执行一次。
  clearInterval(timeid1)：
  clearTimeout(timeid2);

 事件：
  onload:窗口中的数据加载完毕后，发生的事件。
  onbeforeunload:当窗口卸载前执行的动作，这是窗口并没有消失。
  onunload:当窗口卸载时发生，窗口已经消失。

 
 
 

/*

<input type="text" id="userid" value="hahah" />

var textObj = document.getElementById("userid");

alert(textObj.type);//hahah

textObj.value = "heihei:

class Demo
{
 private String value ;
}
*/

DOM树以及节点：

 节点的一些属性信息：
 1，节点名称：nodeName
  标签节点的名称就是标签名，
  属性节点的名称即使属性名。
  文本节点的名称是#text.
  注释节点的名称是#commont。
 2，节点类型：nodeType
  标签节点：1
  属性节点：2
  文本节点：3
  注释节点：8
  document：9
 3，节点值：nodeValue
  有值的节点：文本节点，属性节点，注释节点。

 节点的层次关系：
 1，父节点：parentNode ：代表一个对象。

 2，子节点：childNodes ：代表一堆对象，其实就是一个数组。
    返回的是直接子节点。包含空白文本节点。
    对于table节点table.childNodes[0] = tbody

 3，兄弟节点：
  3.1上一个兄弟节点：previousSibling:
  3.2下一个兄弟几点: nextSibling
 

 -----------------
 除了节点层次关系外，也可以通过html文档对象document来获取。
 1，document.all:获取html页面中所有的节点，不包含空白文本节点。
  想要获取其中一个节点。
  document.all(index)://document.all.item(index).
  document.all.id
  document.all.name

 2，getElementById(id):通过id属性值获取节点。返回一个节点
  注意：在IE中支持直接将id值作为节点对象进行操作。
 
 3，getElementsByName(name)：通过name属性值获取节点。返回的是一堆对象，就是一个节点数组。
  通常在表单中。因为表单组件都会定义name属性，为了服务端获取数组方便。
 
 4，getElementsByTagName(tag):通过标签名获取元素，返回一个节点数组。
  注意：不仅document有这个方法，凡是容器性标签都具有该方法。
  document.getElementsByTagName("div")[0];获取div标签节点集合中的第一个。
 
 ************************************
 技巧：
 为了便于这些繁琐方法的简化书写，
 可以定义一个js文件。将document进行封装。
 doc.js
 var doc = document;
 function getId(id)
 {
  return doc.getElementById(id);
 }
 function getName(name)
 {
  return doc.getElementsByName(name);
 }
 function getTag(tag)
 {
  return doc.getElementsByTagName(tag);
 }
 

 demo.html
 <script src="doc.js"></script>

 <script>
  var node = getId("divid");

  var node1 = doc.createElement("a");
 </script>

 **************************************

 创建节点：创建标签型节点。
  createElement(tagName);
  var anode = doc.createElement("a");
  anode.setAttribute("href","http://www.a.com");
  anode.innerText = "hahaha";
 添加节点：在指定位置结尾追加一个节点。
  doc.body.appendChild(anode);

 创建文本节点：
  createTextNode(text);

  var textNode = doc.createTextNode("我是一个新文本节点 ");

 替换子节点：
  replaceChild:
  示例：
  <div>这是div区域</div>

  var divNode = getTag("div")[0];
  //divNode.innerText = "新div区域";//将原来的文本替换。
  
  获取div原来的文本节点。
  var oldText = divNode.childNodes[0];

  divNode.replaceChild(textNode,oldText);//

  divNode.replaceChild(anode,oldText);//将原文本节点替换成一个超链接。

 替换节点：
  replaceNode: 替换自身。

 移除子节点：
  removeChild(childNode):注意需要通过父节点来操作。

 移除节点：
  removeNode(true):
  节点自己将自己干掉！
  原理：node.parentNode.removeChild(node);

 -------------------------------------

 通过递归遍历页面所有节点。
 
 var info = "";

 function listNode(node)
 {
  info+=node.nodeName+"<br/>";
  var nodes = node.childNodes;
  for(var x=0; x<nodes.length; x++)
  {
   if(nodes[x].hasChildNodes())
    listNode(nodes[x]);
   else
    info+=nodes[x].nodeName+"<br/>";
  }

 }
 
 function getList()
 {
  listNode(document);
  doc.write(info);
 }
 
  
 如何获取属性节点呢？
 每一个标签型节点都有一个集合attributes

 -----------------------------
 通过一些简单示例演示了一下DHTML的应用。
 通过js获取并操作节点对象，可以动态改变节点的样式。这样就出现了动态效果。

 var node = doc.getId("div");
 node.style.fontSize = "24px";//优先级最高。

 <style type="text/css">
  .max{
   font-size:30px;
   }
  .min{
   font-size:8px;
   }
 </style>
 var node = doc.getId("div");
 node.className = "max";

 if(node.className =="max")
 {
  node.className = "min";
 }
 else
 {
  node.className = "max";
 }
 
 这两种加载样式的特点：
 1，styl属性：优先级较高，但是对于多样式定义代码较为麻烦，可以用with简化。但是后期维护性差。

 2，类选择：优先级不是太高，但是对于多样式定义，可以进行代码的封装，提高后期维护性。