首页 > 代码库 > Javascript中的DOM

Javascript中的DOM

2024-08-11 10:30:10   220人阅读


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="http://www.mamicode.com/按钮"/>
    </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


联系
我们