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. 矩阵取数游戏洛谷p1005

    题目描述 帅帅经常跟同学玩一个矩阵取数游戏:对于一个给定的n*m的矩阵,矩阵中的每个元素aij均为非负整数.游戏规则如下: 1.每次取数时须从每行各取走一个元素,共n个.m次后取完矩阵所有元素: 2. ...

  2. caioj 1236 最近公共祖先 树倍增算法模版 倍增

    [题目链接:http://caioj.cn/problem.php?id=1236][40eebe4d] 代码:(时间复杂度:nlogn) #include <iostream> #inc ...

  3. 迭代加深搜索POJ 3134 Power Calculus

    题意:输入正整数n(1<=n<=1000),问最少需要几次乘除法可以从x得到x的n次方,计算过程中x的指数要求是正的. 题解:这道题,他的结果是由1经过n次加减得到的,所以最先想到的就是暴 ...

  4. Java开发小技巧（三）：Maven多工程依赖项目

    前言 本篇文章基于Java开发小技巧(二):自定义Maven依赖中创建的父工程project-monitor实现,运用我们自定义的依赖包进行多工程依赖项目的开发. 下面以多可执行Jar包项目的开发为例 ...

  5. quickhybrid】如何实现一个Hybrid框架

    章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...

  6. 【Jsp】JSP自己定义标签与MODEL1、MODEL2标准

    在JSP2.0之后支持自己定义标签,如今一般都是jsp2.4的版本号了,所以无须考虑版本号的问题. 直接使用就能够了.尽管一般开发的过程中,非常少会自己定义JSP标签.可是通过一个JSP自己定义标签的 ...

  7. Matlab人脸检測方法（Face Parts Detection）具体解释

    今天同学让我帮忙制作一个人脸表情识别的样本库,当中主要是对人脸进行裁剪,这里用到了一个相对较新的Matlab人脸检測方法Face Parts Detection.网上百度了一下发现关于Matlab人脸 ...

  8. Java连接MySQL数据库增删改查通用方法

    版权声明:本文为博主原创文章,未经博主允许不得转载. Java连接MySQL数据库增删改查通用方法 运行环境:eclipse+MySQL 以前我们Java连接MySQL数据库都是一个数据库写一个类,类 ...

  9. [UWP]了解模板化控件(6)：使用附加属性

    1. 基本需求 之前的ContentView2添加了PointerOver等效果,和TextBox等本来就有Header的控件放在一起反而变得鹤立鸡群. 为了解决这个问题,这次把ContentView ...

  10. 体验mssql-cli

    1. 背景 安装SQL Server on Linux之后,在命令行下使用sqlcmd,你会发现代码提示,语法高亮,甚至连多行复制都不支持,相比之下,MySQL的命令行客户端还好用多了.只做简单的命令 ...