dom

来源：互联网发布：淘宝刷微博粉丝软件编辑：程序博客网时间：2024/06/13 02:12

1、函数(第一部分)
1)基本语法
function 函数名(参数1,..参数n){
  函数体
}
2)函数可以有返回值
function 函数名(参数1,..参数n){
  函数体
  return...
}
3)函数内部有一个arguments对象，通过该对象
可以访问到参数值。函数在传参的时候，实际上，
会将参数值先封装到arguments对象里，然后再
传给相应的形参。
  可以通过arguments[下标]来访问参数值。
函数不能够重载（也就是说，如果有同名的函数，
则后一个函数会覆盖前一个函数的定义）。

2、dom
1)dom是什么?
Document Object Model。将一个结构化的文档
（xml,html文档）转化成一棵树，通过对树的操作
（包括查询某个节点的值、删除某个节点、添加节点
或者修改节点的值或者属性值）来间接实现对文档的
操作。
2)w3c dom模型
  (1),基本结构(了解)
  Node
   Document
    HTMLDocument
     HTMLBodyElement
   Element
    HTMLElement
     HTMLFormElement
      HTMLInputElement
      HTMLSelectElement
       HTMLOptionElement
    HTMLDivElement
    HTMLTableElement
     HTMLTableCaptionElement
     HTMLTableRowElement
     HTMLTableCellElement
    ...
  (2),操作
  a,查询节点
   方式一:依据节点的id值来查找。
    var obj = document.getElementById(id);
   方式二：
    通过遍历的方式（这种方式浏览器不兼容）。
    parentNode：父节点
    previousSibling : 前一个兄弟节点
    nextSibling ：后一个兄弟节点
    childNodes : 所有的子节点
    firstChild:第一个子节点
     lastChild：最后一个子节点
   方式三：
    var arr = obj.getElementsByTagName(tagName);
    依据标记名(tagName)，返回符合该标记名的
    所有节点。

   查找到节点后，可以通过value属性读取或者设置
   文本输入框、密码输入框、按钮等的值。也可以
   通过innerHTML属性设置或者读取节点的html文本。

  b,创建节点
   document.createElement(tagName);
   比如:
    var div = document.createElement('div');
  c,添加节点
   var obj = document.getElementById(id);
   obj.appendChild(newNode):
    将newNode添加到obj的所有的子节点末尾。
   obj.insertBefore(newNode,refNode):
    将newNode添加到refNode节点之前。
   obj.replaceChild(newNode,refNode):
    使用newNode替换refNode。
  d,删除节点
   var obj = document.getElementById(id);
   obj.removeChild(node);
  e,样式操作
   方式一：
    修改className属性
    比如:
     var obj = document.getElementById('id1');
     obj.className='s1';
   方式二:
    修改style属性(通过style属性，可以读取或者
    修改节点的style值)
    比如:
     var obj = document.getElementById('id1');
     obj.style.backgroundColor='red';
    要注意：
     只能够修改内联样式。
     如果样式包括"-"，应该将"-"除掉，然后
     将后面的第一个字符大写。

   如果禁止浏览器的默认行为:
   在默认情况下，浏览器会有如下的默认行为：
     点击链接，浏览器会跳转到链接所指向的地址。
     点击提交按钮，浏览器会提交表单中的数据。
   如果要禁止，可以使用"return false"语句。
     <a href="abc.do" onclick="return false;">clickme</a>

案例：表单验证

<html><!--表单验证--><head><style>#d1{width:450px;height:300px;background-color:#ffd39b;margin:40px auto;}#d2{background-color:blue;color:white;height:30px;font-size:24px;}#d3{padding-left:30px;padding-top:30px;}.s1{color:red;}.s2{border:4px dotted black;}</style><!--使用script引入一个外部的js文件--><script src="myjs.js"></script><script>function valiusername(){var obj2 =$('username_msg');obj2.innerHTML = '';//找到文本输入框var obj = $('username');obj.className = '';//读取文本输入框的值//通过value属性，可以读取或者设置文本输入//框、密码输入框、按钮的值。if(obj.value.length == 0){//通过innerHTML属性，可以读取//或者设置节点的html文本。obj2.innerHTML = '用户名不能为空';//通过className属性，可以读取或者//设置class样式。obj.className = 's2';return false;}return true;}function valipwd(){var obj = $('pwd');obj.className = '';var obj2 = $('pwd_msg');obj2.innerHTML = '';if(obj.value.length == 0){obj2.innerHTML = '密码不能为空';obj.className = 's2';return false;}return true;}function valirepwd(){var pwd1 = $('repwd');pwd1.className = '';var obj = $('repwd_msg');obj.innerHTML = '';var pwd2 = $('pwd');if(pwd1.value != pwd2.value){obj.innerHTML = '两次输入必须相等';pwd1.className='s2';return false;}return true;}function valiIdCard(){var obj = $('idCard');obj.className = '';var obj2 = $('idCard_msg');obj2.innerHTML = '';var reg = /^\d{15}$|^\d{17}([0-9]|X|x)$/;if(!reg.test(obj.value)){obj2.innerHTML = '身份证号码不正确';obj.className = 's2';return false;}return true;}function beforeSubmit(){var flag = valiusername() && valipwd() && valirepwd() && valiIdCard();return flag;}</script></head><body style="font-size:30px;"><div id="d1"><div id="d2">注册(表单验证案例)</div><div id="d3"><form onsubmit="return beforeSubmit();"><table><tr><td>用户名:</td><td><input type="text" name="username" onblur="valiusername();" id="username" /><span class="s1" id="username_msg"></span></td></tr><tr><td>密码:</td><td><input type="password" name="pwd" id="pwd" onblur="valipwd();"/><span class="s1" id="pwd_msg"></span></td></tr><tr><td>密码确认:</td><td><input type="password" name="repwd" id="repwd" onblur="valirepwd();"/><span class="s1" id="repwd_msg"></span></td></tr><tr><td>身份证号码:</td><td><input type="text" name="idCard" id="idCard" onblur="valiIdCard();"/><span class="s1" id="idCard_msg"></span></td></tr><tr><td colspan="2"><input type="submit" value="确认"/></td></tr></table></form></div></div><a href="js03.html" onclick="return false;">clickme</a></body></html>

/* 依据id，返回相应的节点  myjs.js*/function $(id){ return document.getElementById(id);}