Javascript中的DOM

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript中的DOM相关的知识,希望对你有一定的参考价值。


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代码(TamperMonkey)以将键盘笔触发送到父DOM

Node.js JavaScript 片段中的跳过代码

保留对附加节点 javascript 的引用

JavaScript--更新DOM

48个值得掌握的JavaScript代码片段(上)

JavaScript 代码片段