对象模型是描述对象逻辑结构的接口, 并且是操作对象的标准方式. 在 JavaScript 早期, JavaScript 的浏览器对象模型 (BOM) 和文档对象模型 (DOM) 之间没有多少区别.
传统的 JavaScript 对象模型 (Netscape 2) 和 Internet Explorer 3
扩展的 JavaScript 对象模型 (Netscape 3) 和 DOM Level 0的基础
动态 html 特色的对象模型(Internet Explorer 4+, 仅 Netscape 4)
扩展的浏览器对象模型 + 标准的 W3C DOM(现代浏览器)
HTML5 对象模型规范化了 BOM 并扩展了 DOM
传统的 JavaScript 对象模型:
根据名称访问文档元素
早期的元素没有 id 属性, 所以在选择元素时, 用的是 name 属性, 如:
- <form name="myform2" id="myform2">
- <input type="text" name="user" id="user" value="">
- </form>
访问表单:
var theform = Windows.document.myform2;
1, 使用关联数组访问对象
- <form name="myform2" id="myform2">
- <input type="text" name="user" id="user" value="">
- </form>
选择方式:
- var theform = Windows.document.myform2;
- =document.froms["myform2"]
- =document.forms["myform2"].elements["user"]
简化写法: document.myform2 ;
document.myform2.user;
2, 使用基本的 DOM 方法访问对象
- getElementsByName(*name*);
- getElementById(*id value*);
- getElementByTagName("* 标签名字 *");
访问对象的现代方法
- <p class="myClass">
- In myClass.
- </p>
- <p>
- Not in myClass
- </p>
- <p class="myClass">
- In myClass.
- </p>
- <p>
- Not in myClass,
- <span class="myClass">
- except for this part
- </span>
- .
- </p>
- <p class="myClass">
- In myClass.
- <span>
- In an inner span
- </span>
- !
- </p>
- <p>
- Outer text here
- <span class="test myClass">
- inner span should be retured
- </span>
- !
- </p>
- document.getElementsByClassName("myClass");// 返回集合 var elements = document.querySeletorAll("p
- span.myClass");// 返回集合
简单事件处理
内联事件处理
<input type="submit" name="submit" value="提交" οnclick="alert(" 已按下按钮 ");">
直接为事件处理
- <form>
- <input type="botton" name="your info" id="myinfo">
- </form>
- <script type="text/javascript">
- document.getElementById('myinfo').onclick = function() {alert('the third.');};
- </script>
事件侦听器
- // 在 IE9 之前的版本不支持
- addEventListener addEventListener("click",function () {
- alert("balabala")
- },false);
来源: http://www.css88.com/qa/javascript/11070.html