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. git的CentOS服务端安装和windows客户端的使用

    git的CentOS服务端安装和windows客户端的使用 此教程以 搬瓦工vps CentOS 6 x64 的系统为环境,搭建 git 服务端.windows 7 系统为客户端. git客户端 在W ...

  2. SQL Server学习之路（五）：“增删改查”之“改”

    0.目录 1.前言 2.通过SSMS修改数据 3.通过SQL语句修改数据 3.1 修改单列数据 3.2 修改多列数据 1.前言 增删改查都是对数据的操作,其中"改"对应的SQL语句 ...

  3. 网页设计——6.html其他标签

    今天学习html的其他标签: 一.列表 1.无序列表ul 基本结构: <ul  type="属性值"> <li>列表内容</li> </u ...

  4. Android IntentService使用介绍以及源码解析

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 一.IntentService概述及使用举例 IntentService内部实现机制用到了HandlerThread,如果对HandlerThrea ...

  5. AspNet Core 程序写入配置信息并再次读取配置信息

    1.首先创见Core控制台应用程序  并且引入  AspNetCore.All 首先我们写入配置信息:直接代码如下 //配置信息的根对象 public static IConfigurationRoo ...

  6. svn服务器的搭建与使用一

    转载出处 Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: ht ...

  7. Java基础(十一) Stream I/O and Files

    Java基础(十一) Stream I/O and Files 1. 流的概念 程序的主要任务是操纵数据.在Java中,把一组有序的数据序列称为流. 依据操作的方向,能够把流分为输入流和输出流两种.程 ...

  8. 【leetcode】123. Best Time to Buy and Sell Stock III

    @requires_authorization @author johnsondu @create_time 2015.7.22 19:04 @url [Best Time to Buy and Se ...

  9. Android酷炫有用的开源框架

    一.代码库 1.from  代码家 整理比較好的源代码连接 一.兼容类库 ActionBarSherlock : Action Bar是Android 3.0后才開始支持的,ActionBarSher ...

  10. python运算符优先级问题

    附上 对于or与and运算 其一, 在不加括号时候, and优先级大于or 其二, x or y 的值只可能是x或y. x为真就是x, x为假就是y 第三, x and y 的值只可能是x或y. x为 ...