JavaScript对象模型

最新推荐文章于 2023-10-17 11:07:50 发布

Doigt_love

最新推荐文章于 2023-10-17 11:07:50 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/doigt_love/article/details/52241355

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript 对象模型

对象模型是描述对象逻辑结构的借口，并且是操作对象的标准方式。在>JavaScript早期，JavaScript 的浏览器对象模型（BOM）和文档对象模>型（DOM）之间没有对少区别—-它只不过是一个较大的混乱。

传统的JavaScript对象模型（Netscape 2）和Internet Explorer 3
扩展的Javascript对象模型（Netscape 3）和DOM　Level　０的基础
动态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）。

Doigt_love

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript对象模型

JavaScript 对象模型对象模型是描述对象逻辑结构的借口，并且是操作对象的标准方式。在>JavaScript早期，JavaScript 的浏览器对象模型（BOM）和文档对象模>型（DOM）之间没有对少区别—-它只不过是一个较大的混乱。传统的JavaScript对象模型（Netscape 2）和Internet Explorer 3扩展的Javascript对象模型（Netscape 3
复制链接

扫一扫