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. 算法训练 最大的算式 DP

    算法训练 最大的算式 时间限制:1.0s   内存限制:256.0MB     问题描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果 ...

  2. 【OCR技术系列之二】文字定位与切割

    要做文字识别,第一步要考虑的就是怎么将每一个字符从图片中切割下来,然后才可以送入我们设计好的模型进行字符识别.现在就以下面这张图片为例,说一说最一般的字符切割的步骤是哪些. 当然,我们实际上要识别的图 ...

  3. Music Tags 隐私政策

    隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...

  4. C++雾中风景4：多态引出的困惑，对象的拷贝？

    C++作为一门面向对象的语言,自然具备了面向对象的三大特征:封装,继承,多态.在学习多态性质的过程中,发现了C++与其他语言很大的区别(坑?).在C++中的=操作符的使用与C++呈现的内存模型似乎并不 ...

  5. AspNet Core 初步认识

    Core 的出现对我我没有很大的影响,当时在Core要发布的时候听到周围的人再聊再谈,我没有去太多关注,就是一个屌丝开发人员. 直到又一次偶然见到一位特别喜欢.net的老开发人员谈起Core时落泪了, ...

  6. OpenXml读取word内容(一）

    OpenXml读取word内容注意事项 1.使用OpenXml读取word内容,word后缀必须是".docx":如果word后缀是".doc"需要转成&quo ...

  7. ajax请求处理和views处理函数的优先级

    当采用ajax处理请求的时候,在views函数中使用 return render(request,'XXX.html',{'error':form.get_error()}) 返回渲染模板时,会优先处 ...

  8. NDK开发过程自认为好的一些参考资料

    虽然NDK开发时间很短, 但也接触了一些自认为还不错的资料, 记录下来. 一.首先就说官方文档吧 网上资料好多过时了, 并且有点参差不齐. 所以看官方文档还是很有必要的,我根据我的需求整理了两个的链接 ...

  9. 腾讯qq等级计算公式面试题

    就三道题大概是: 1. 推算出等级相应的天数 这个还比較简单,公式是:(b=2a+3)   a是等级, b是相应的天数 2. 推算出等级总共的天数 先看下规律 等级a 相应天数b 总天数s 1 5 5 ...

  10. HDOJ 1507 Uncle Tom&#39;s Inherited Land*

    直接对每一个格子进行dfs结果除以2能够得到答案可是有大量反复的结果,不好输出答案. 能够仅仅对横纵坐标相加是奇数的格子dfs.... Uncle Tom's Inherited Land* Time ...