码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript中的DOM

时间:2016-08-31 07:12:18      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:javascript


1、操作DOM的意义

    DOM(文档对象模型)Document Object Model,就是操作页面的元素

Javascript最终是要操作Html页面,而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象。如果Javascript只是执行一些计算、循环等操作,而不能操作Html也就失去了它的意义。


2、window对象

(1)整个页面或者说窗口就是一个window对象,window是顶级对象

(2)页面中定义的变量和方法都是window的

window.alert("hello");
window.f1();
window.document...

(3)使用window对象的属性、方法的时候可以省略window;能不写window就不要写,这样可以减少js文件字节数。


示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>

</head>
<body>
    <form id="fm">
        <input type="button" id="btn" value="按钮"/>
    </form>
    <script type="text/javascript">
        window.alert(window.fm);//[object HTMLFormElement]
        window.alert(window.btn);//[object HTMLInputElement]
        window.alert(window.btn.value);//按钮
        alert(window.fm.btn.value);//按钮
        alert(document.getElementById(‘btn‘).value);//按钮
    </script>
</body>
</html>

效果图

技术分享


3、document对象

window对象的属性:document

write();向文档中写入内容。writeln()和write()差不多,只不过后添加一个回车。在onclick等事件中写的代码会冲掉页面中的内容,只有在页面加载过程中write才会与原有内容融合在一起。writeln()是在源代码里面换行。与<br/>不一样。


常用获取元素的三种方式

getElementById(),根据元素的Id获得对象,网页中Id不能重复。也可以直接通过元素的id来引用元素,但是有有效范围。

getElementsByName(),根据元素name获得对象,由于页面中元素的name可以重复,比如多个radiobutton的name一样,因此getElementsByName返回值是对象数组。

getElementsByTagName(),获得指定标签名称的元素数组,比如getElementsByTagName("input")可以获得所有的<input>标签。*表示所有标签。




Javascript中的DOM

标签:javascript

原文地址:http://lsieun.blog.51cto.com/9210464/1844563

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!