JavaScript 对象模型
对象模型是描述对象逻辑结构的借口,并且是操作对象的标准方式。在>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 = window.document.myform2;
- 使用关联数组访问对象
<form name="myform2" id="myform2">
<input type="text " name="user" id="user" value="">
</form>
选择方式:
var theform = window.document.myform2;
=document.froms["myform2"]
=document.forms["myform2"].elements["user"]
简化写法: document.myform2 ;
document.myform2.user;
2.使用基本的DOM方法访问对象
getElementsByName(*name*);
getElementById(*id value*);
getElementByTagName("*标签名字*");
3.访问对象的现代方法
<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="提交" onclick="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);
JavaScript+DOM+选择+事件=程序
exp:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS事件程序练习</title>
<script type="text/javascript">
function greetToYou (){
var name= document.getElementById("myname").value;
if((name.length>0) && (/\S/.test(name)))
document.getElementById("greet").value ="Hello "+name +" !";
else
document.getElementById("greet").value ="Inter your name ,gay!"
}
window.onload = function(){
document.getElementById("hello").onclick = greetToYou;
}
</script>
</head>
<body>
<form>
<label for="myname">Name:
<input type="text" name="myname" id="myname" value="your name">
</label>
<p>
<input type="button" name="hello" id="hello" value="click me ">
</p>
<label for="greet">Greet:
<input type="text" name="greet" id="greet" >
</label>
</form>
</body>
</html>
这是我写的再简单不过的一个事件响应程序例子,实际上处理程序时需要很复杂的事件响应,js是基于对象的语言,有基本数据类型,有与之对应的对象(原生对象),有用户自定的对象,宿主对象(基于浏览器),文档对象(document)。