TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

10、JavaScript-DOM&BOM操作

zyz
2018-05-17
/
0 评论
/
738 阅读
/
正在检测是否收录...
05/17

变量命名:

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;
赞(0)
评论 (0)