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

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

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

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

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

节点及其类型：

例1

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript">

     //1. 当整个 HTML 文档完全加载成功后触发 window.onload 事件.

     //事件触发时, 执行后面 function 里边的函数体.

     window.onload = function(){

         //2. 获取所有的 button 节点. 并取得第一个元素

         var btn = document.getElementsByTagName("button")[0];

         //3. 为 button 的 onclick 事件赋值: 当点击 button 时, 执行函数体

         btn.onclick = function(){

             //4. 弹出 helloworld

             alert("helloworld");

         }

     }

 </script>

 </head>

 <body>

     <button>ClickMe</button>

 </body>

 </html>

js代码写入方式：

第一种：

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 </head>

 <body>

     <!-- HTML 代码和 JS 代码耦合在一起. -->

     <button onclick="alert('helloworld...');">ClickMe</button>

 </body>

 </html>

第二种：

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 </head>

 <body>

     <button>ClickMe</button>

 </body>

 </html>

 <!--

     在整个 HTML 文档被加载后, 获取其中的节点.

     把  script 节点放在 html 文档的最后

     但不符合些 JS 代码的习惯.

 -->

 <script type="text/javascript">

     //1. 获取 button

     var btns = document.getElementsByTagName("button");

     alert(btns.length);

     //2. 为 button 添加 onclick 响应函数

     btns[0].onclick = function(){

         alert("helloworld!!");

     }

 </script>

第三种：

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript">

     //window.onload 事件在整个 HTML 文档被完全加载后出发执行.

     //所以在其中可以获取到 HTML 文档的任何元素.

     window.onload = function(){

     }

 </script>

 </head>

 <body>

     <button>ClickMe</button>

 </body>

 </html>

JavaScript的DOM编程--01--js代码的写入位置的更多相关文章

  1. Javascript DOM编程艺术JS代码

    //com function addLoadEvent (func) { var oldonload = window.onload; if (typeof window.onload != 'fun ...

  2. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  3. Bom和Dom编程以及js中prototype的详解

    一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  4. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  5. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  6. javascript基础之javascript的存在形式和js代码块在页面中的存放位置

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  7. JavaScript的DOM编程--08--复习

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. JavaScript入门：002—JS代码放置的位置

    JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?以下来看一下. 一般来说有两种方式.写在界面上和使用.js文件.1.1界面上的Head部分能够直接放在head标签内,例如以下代码 ...

  9. JavaScript必备:Google发布的JS代码规范(转)

    [翻译]关于Google发布的JS代码规范,你需要了解什么? 翻译 | WhiteYin 译文 | https://github.com/WhiteYin/translation/issues/10 ...

随机推荐

  1. 使用python

    最近看视频学习,老师布置了个作业,关于如何使用python将多个excel进行合并,老师写的代码我感觉比较复杂,下面是我自己改良之后较简单的方式. 实现这个功能主要有两种方法,一种是用xlwd,xls ...

  2. 51Nod 1084 矩阵取数问题 V2 双线程DP 滚动数组优化

    基准时间限制:2 秒 空间限制:131072 KB  一个M*N矩阵中有不同的正整数,经过这个格子,就能获得相应价值的奖励,先从左上走到右下,再从右下走到左上.第1遍时只能向下和向右走,第2遍时只能向 ...

  3. 掌握NIO，程序人生

    就像新IO为java带来的革新那样,让我们也开启一段新的程序人生. 关键字:NIO,BIO,伪IO,AIO,多路复用选择器,通道,缓冲区,jdk研究,回调函数,高并发 java.nio 概述 历史背景 ...

  4. Java读取打印机自定义纸张.

    打印出现截断? 对于自定义纸张打印, 一定要先在打印机配置那边添加, 不然会出现截断. 例如打印1000*500, 出来是正常的, 打印216*139, 出现了截断. 因为java默认的打印, 会从打 ...

  5. 【luogu P1186】玛丽卡

    https://www.luogu.org/problem/show?pid=1186 考虑暴力,枚举图上每一条边删去后跑Dijkstra,取M次的最大值. 仔细想想就会发现删除最短路以外的边对最短路 ...

  6. 你不知道的javaScript上卷(第一章 作用域是什么)

    在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉. ...

  7. 数组a和&a区别

    假设我们定义一个数组char a[16]; 那么a与&a分别代表什么呢?它们完全一样吗? a其实代表的是数组中首元素的地址,即a[0]的地址,&a代表的是整个数组的起始地址.我们做个测 ...

  8. 运行期以索引获取tuple元素-C++11之2

    //运行期以索引获取tuple元素-C++11之2 //需支持C++11及以上标准的编译器,VS2017 15.5.x.CodeBlocks 16.01 gcc 7.2 //参见<深入应用C++ ...

  9. 10_Eclipse中演示Git冲突的解决

     1 在user1中的readme.txt文件里先改动,而且commitand push 选中user1,右击team->Commit-à watermark/2/text/aHR0cDov ...

  10. 7、创建ROS msg和srv

    一.msg和srv介绍 msg: msg文件使用简单的文本格式声明一个ROS message的各个域. 仅须要创建一个msg文件,就能够使用它来生成不同语言的message定义代码. srv:srv文 ...