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. JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  2. Spring Cloud Zuul 添加 ZuulFilter

    紧接着上篇随笔Spring Cloud Zuul写,添加过滤器,进行权限验证 1.添加过滤器 package com.dzpykj.filter; import java.io.IOException ...

  3. 初识AOP与动态代理

    AOP AOP是指在jvm运行时, 动态将代码切入到指定位置. OOP是一个维度上写代码, AOP是把他切开来, 变成立体的. 这样的好处是: 业务逻辑跟辅助逻辑分离, 例如日志打印, 性能监控, 安 ...

  4. SpringBoard 无法启动应用程序（错误：-3）

    临时不知道错误的细节原因,重新启动模拟器就好了. 先记录下.

  5. Android 通知栏Notification的整合 全面学习 （一个DEMO让你全然了解它）

    在android的应用层中,涉及到非常多应用框架.比如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架.通知机制,ActionBar框架等等. ...

  6. Android setContentView方法解析（一）

    在Activity的生命周期onCreate中.我们一般都习惯性的调用setContentView(int layoutResID)方法,把布局文件载入到页面上来.以下我们就来通过源代码一步步的分析怎 ...

  7. Linux基础：xargs命令

    简介 xargs可以将输入内容(通常通过命令行管道传递),转成后续命令的参数,通常用途有: 命令组合:尤其是一些命令不支持管道输入,比如ls. 避免参数过长:xargs可以通过-nx来将参数分组,避免 ...

  8. Python 项目实践一（外星人入侵）第一篇

    python断断续续的学了一段实践,基础课程终于看完了,现在跟着做三个小项目,第一个是外星人入侵的小游戏: 一 Pygame pygame 是一组功能强大而有趣的模块,可用于管理图形,动画乃至声音,让 ...

  9. 十二、 Spring Boot 静态资源处理

    spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConfiguration 中的配置各种属性. 建议大家使用Spring Boot的默认配置方式,如果需要特殊处理的再通 ...

  10. NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...