JavaScript的DOM编程--01--js代码的写入位置

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>