JavaScript的DOM编程--01--js代码的写入位置

DOM：Document Object Model(文本对象模型)

D：文档 – html 文档或 xml 文档

O：对象 – document 对象的属性和方法

M：模型 DOM 是针对xml(html)的基于树的API

DOM树:节点（node）的层次。 DOM 把一个文档表示为一棵家谱树（父，子，兄弟） DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

节点及其类型：

例1

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5 <script type="text/javascript">
 6     //1. 当整个 HTML 文档完全加载成功后触发 window.onload 事件.
 7     //事件触发时, 执行后面 function 里边的函数体.
 8     window.onload = function(){
 9         //2. 获取所有的 button 节点. 并取得第一个元素
10         var btn = document.getElementsByTagName("button")[0];
11         //3. 为 button 的 onclick 事件赋值: 当点击 button 时, 执行函数体
12         btn.onclick = function(){
13             //4. 弹出 helloworld
14             alert("helloworld");
15         }
16     }
17 </script>
18 </head>
19 <body>
20
21     <button>ClickMe</button>
22
23 </body>
24 </html>

js代码写入方式：

第一种：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5 </head>
 6 <body>
 7
 8     <!-- HTML 代码和 JS 代码耦合在一起. -->
 9     <button onclick="alert('helloworld...');">ClickMe</button>
10
11 </body>
12 </html>

第二种：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5
 6 </head>
 7 <body>
 8
 9     <button>ClickMe</button>
10
11 </body>
12 </html>
13
14 <!--
15     在整个 HTML 文档被加载后, 获取其中的节点.
16     把  script 节点放在 html 文档的最后
17     但不符合些 JS 代码的习惯.
18 -->
19 <script type="text/javascript">
20
21     //1. 获取 button
22     var btns = document.getElementsByTagName("button");
23     alert(btns.length);
24
25     //2. 为 button 添加 onclick 响应函数
26     btns[0].onclick = function(){
27         alert("helloworld!!");
28     }
29
30 </script>

第三种：

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>Insert title here</title>
 5 <script type="text/javascript">
 6     //window.onload 事件在整个 HTML 文档被完全加载后出发执行.
 7     //所以在其中可以获取到 HTML 文档的任何元素.
 8     window.onload = function(){
 9
10     }
11 </script>
12 </head>
13 <body>
14
15     <button>ClickMe</button>
16
17 </body>
18 </html>

转载于:https://www.cnblogs.com/nifengs/p/4833885.html

JavaScript的DOM编程--01--js代码的写入位置相关推荐

JavaScript系列-02 HTML嵌入js代码的第二种方式
javaScript系列 HTML中嵌入js代码的第二种方式脚本块的方式文章目录 javaScript系列前言一.了解脚本块的方式 1.1运行规则二.执行原理 1.编写代码 2.效果总结 ...
JavaScript与DOM编程
文章目录 JavaScript JS简介常量与变量数组创建数组访问数组:通过指定数组名以及索引号,可以访问某个特定的元素对象 1.系统所提供对象 2.自定义对象访问对象函数第一种第二 ...
Javascript BOM DOM编程
#BOM 和 DOM #####浏览器内核: ①渲染引擎:webkit; ② JS引擎:V8引擎(谷歌) DOM浏览器:对DOM的支持高于IE(包括谷歌). ###怎么在浏览器里面写JS代码: ...
【JavaScript】DOM编程-DHTML与Windows对象
A.什么是DHTML? javascript是在浏览器中运行的,如果它仅限于加减乘除运算,而不能将运算结果显示在浏览器当中,或者不能与用户进行交互操作,那么他就失去了存在的意义. 在程序中,创建的对 ...
JavaScript 之动态加载JS代码或JS文件
2.动态加载JS文件 <script type="text/javascript"> function loadScript(url, callback) { var ...
JavaScript的DOM编程总结
DOM(文档对象模型), 与语言无关, 用于操作XML(在Web中)和HTML(在浏览器在)文档的应用程序接口.访问DOM次数越多, 速度越慢, 费用也就越高. 最小化DOM访问次数,尽可能在Java ...
javascript之DOM编程正则表达式引入
在javascript中,正则表达式和java中区别不大.只有一小部分不同的地方: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
JavaScript 技术篇-简单的两行js代码获取password不可见密码实例演示，js获取密码输入框里的值
如下图,chrome 控制台. 先获取到密码框的dom节点,再通过value就能获取到不可见的值. 密码框如下,其id是password. 右键检查元素可以定位到该元素的 dom 节点,里面直接会显示 ...
chrome浏览器下用几行js代码实现写入剪贴板功能
我们的原理是,创建一个 input 元素,将要写入的内容放入 input 里,然后选择 input,再调用浏览器的复制命令,将 input 里的内容复制,最后隐藏 input. 想通了非常容易理解! ...

JavaScript的DOM编程--01--js代码的写入位置

JavaScript的DOM编程--01--js代码的写入位置相关推荐

最新文章

热门文章