一：介绍

1.DOM

　　

2.节点分类

　　节点及其类型:
　　　　1). 元素节点
　　　　2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
　　　　3). 文本节点: 是元素节点的子节点, 其内容为文本.

　　

二：JS的位置

0.新建静态web项目

　　

1.第一种方式　　

　　在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,　
　　该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.

2.程序

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.  <script type="text/javascript">
  7.      //onload的使用方式
  8.      window.onload=function(){
  9.          var bt=document.getElementsByTagName("button")[0];
  10.          bt.onclick=function(){
  11.              alert("have click on");
  12.          }
  13.      }
  14.  </script>
  15.  </head>
  16.  <body>
  17.      <button>click on me</button>
  18.  </body>
  19.  </html>

3.运行效果

　　

4.第二种方式

　　直接在html代码程序里写js。

　　缺点:
　　　　①. js 和 html 强耦合, 不利用代码的维护
　　　　②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦

5.程序

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8.     <button onclick="alert('hello JS 2')"></button>
  9. </body>
  10. </html>

　　

6.运行结果

　　

7.第三种方式

　　将js直接放在html文档的后部分，这样在html文档加载完成后再加载js。

　　但是，不符合习惯。

8.程序

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.  </head>
  7.  <body>
  8.      <button>click on me</button>
  9.      <script type="text/javascript">
  10.          var bts=document.getElementsByTagName("button");
  11.          bts[0].onclick=function(){
  12.              alert("hello js 3");
  13.          }
  14.      </script>
  15.  </body>
  16.  </html>

9.运行结果

　　

三：问题

1.这里缺少的第四种方式

　　将js与html代码分开的第四种方式，有空将补充完整。

000 在什么位置写js代码的更多相关文章

  1. html文件在head标签中引入js地址和直接写js代码，所用时间是不同的，因为引入js地址，文件加载的时候需要通过通讯协议去解析地址，读取外部文件

    html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件

  2. Asp.net mvc怎么在razor里写js代码

    我试图在Razor里写JS代码,但是不行 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 ...

  3. 在wxml中直接写js代码(wxs)

    我们在h5开发中,很多时候要在html中写到js代码,这个很容易实现.但是在微信小程序开发中,是不能直接在wxml中写js代码的,因此就有了wxs.在wxml中用wxs代码,有以下几种方式(在小程序文 ...

  4. 手写js代码（一）javascript数组循环遍历之forEach

    注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...

  5. 在HTML标签的事件后面直接写JS代码

    <input type="button" onclick="document.getElementdByTagName('div')[0].innrtHTML='S ...

  6. 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分

    找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...

  7. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  8. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

  9. 也谈谈规范JS代码的几个注意点

    也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优 ...

随机推荐

  1. 【poj3693】 Maximum repetition substring

    http://poj.org/problem?id=3693 (题目链接) 题意 给定一个字符串,求重复次数最多的连续重复子串,若存在多组解,输出字典序最小的. Solution 后缀数组论文题,就是 ...

  2. Luogu 2764 最小路径覆盖问题 / Libre 6002 「网络流 24 题」最小路径覆盖 （网络流，最大流）

    Luogu 2764 最小路径覆盖问题 / Libre 6002 「网络流 24 题」最小路径覆盖 (网络流,最大流) Description 给定有向图G=(V,E).设P是G的一个简单路(顶点不相 ...

  3. 《剑指offer》— JavaScript（27）字符串的排列

    字符串的排列 题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. ...

  4. ubuntu，centor 安装apache bench

    ab全称为:apache bench. 是apache自带的压力测试工具.ab非常实用,它不仅可以对apache服务器进行网站访问压力测试,也可以对或其它类型的服务器进行压力测试.比如nginx.to ...

  5. logback常见配置

    依赖jar包 <!-- https://mvnrepository.com/artifact/ch.qos.logback/logback-core --> <dependency& ...

  6. vue 使用v-cloak让在页面加载时不显示{{}}花括号

    官方说法: 这个指令保持在元素上直到关联实例结束编译. 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准 ...

  7. ORACLE递归查询（适用于ID,PARENTID结构数据表）

    Oracle 树操作(select…start with…connect by…prior) oracle树查询的最重要的就是select…start with…connect by…prior语法了 ...

  8. zsh与oh-my-zsh是什么

    zsh是bash的增强版,其实zsh和bash是两个不同的概念.zsh更加强大. 通常zsh配置起来非常麻烦,且相当的复杂,所以oh-my-zsh是为了简化zsh的配置而开发的,因此oh-my-zsh ...

  9. koa1.x获取原始body内容

    Node版本比较老,koa1.x配合koa-body-parser,默认koa-body-parser会把请求数据转成json对象, 然而有的时候需要获取原始的内容,不要转换,看波koa-body-p ...

  10. js调试系列: 控制台命令行API

    js调试系列目录: - 上次初步介绍了什么是控制台,以及简单的 console.log 输出信息.最后还有两个小问题,我们就当回顾,来看下怎么操作吧. 先打开百度,然后按 F12 打开后,如果不是 C ...