10、JavaScript-DOM&BOM操作

每天一句：诸葛亮从来不问刘备，为什么我们的箭那么少？关羽从来不问刘备为什么我们的士兵那么少？张飞从来不问刘备，兵临城下我该怎么办？有了草船借箭、有了过五关斩六将、有了据水断桥吓曹兵——如若万事具备，你的价值何在？

变量命名：
s: 表示字符串。例如: sName, sHtml;
n: 表示数字。例如: nPage, nTotal;
b: 表示逻辑。例如: bChecked, sShow;
a: 表示数组。例如: aList, aGroup;
r: 表示正则表达式。例如: rDomain, rEmail;
f: 表示函数。例如: fInit, fGetHtml;
o: 表示以上未涉及到的其他对象。例如: oBt, oDate;
g: 表示全局变量。例如: gUserName, gLogin;

一、节点属性

// 备注:  data-name(自定义属性)！！！！
<div id="box" title="DOM" data-index="0" data-isShow="true">
    <h2>JS第十一天</h2>
    节点属性操作
</div>

• getAttribute(): 获取节点属性

    // 获取属性节点值1
    var att = oBox.attributes;
    alert(att['id'].nodeValue); // box

    // 获取属性节点值2
    alert(oBox.getAttribute('data-index'));     // 0

• setAttribute(): 设置节点属性

   // 设置属性节点值
   oBox.setAttribute('data-index', 100);

• removeAttribute(): 删除节点属性

  oBox.removeAttribute('title');

案例: 表格操作(自动生成表格、隔行变色)
案例: 表格的动态操作(添加行、删除行)

二、表单操作

在表单中，表单控件可以通过控件name属性获取到；另外在表单中事件的触发是通过onChange来触发；

onchange事件: 
    text类型: 当失去焦点时，如果内容改变就会触发；
    radio/chekbox: 非IE下点击时，只要值改变就会触发；IE下，失去焦点时，如果值改变才会触发；

  // text类型
  oForm.text1.onchange = function(){
    alert(this.value);
  }

  // 注意: radio类型是一个数组
  oForm.sex[0].onchange = function(){
    alert('男');
  }
  oForm.sex[1].onchange = function(){
    alert('女');
  }

   // radio/checkbox判断当前属性是否被选中
   oForm.dir[0].checked

三、BOM

BOM(Browser Object Model)浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。但BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以BOM本身是没有标准的或还没有那个组织去它。

• open(页面地址url,打开方式): 打开一个新的窗口

  页面地址url为空，则默认打开一个空白页面;
  打开方式为空，默认为新窗口方式打开；
  返回值: 返回新打开窗口的window对象
  window.open('', '_blank');    // 新的空白页面
  window.open('http://www.baidu.com', '_self');  // 当前页面打开百度

• close(): 关闭窗口

  如果关闭本窗口:
    a、火狐: 默认无法关闭;
    b、谷歌: 默认直接关闭;
    c、IE: 询问用户;
  如果关闭非本窗口的，都是允许的;
    oW.close(); // 关闭oW窗口
    window.close(); // 关闭window窗口

• window.navigator.userAgent: 浏览器信息

  if(window.navigator.userAgent.indexOf('MSIE') != -1){
    alert('我是IE');
  } else {
    alert('我不是IE');
  }

• window.location: 浏览器地址信息

  window.location.search    // url中'?'后面的内容
  window.location.hash      // url中'#'后面的内容

四、窗口尺寸大小

• onresize: 当窗口大小发生改变时触发

window.onresize = function(){
  document.title = i++;
 }

• onscroll: 当滚动条滚动时触发

  window.onscroll = function(){
    document.title = i++;
  }

• 可视区域的尺寸

  document.documentElement.clientWidth;  
  document.documentElement.clientHeight;