js（1）代码编写

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <link rel="stylesheet" href="./style.css">
10     <!-- <style>
11         div {
12             color: red
13         }
14     </style> -->
15 </head>
16 
17 <body>
18     <h1>我是标题</h1>
19     <div>我是div1</div>
20     <div>我是div2</div>
21 
22     <!-- 001-方案一，在script标签中间编写JavaScript代码 -->
23     <!-- <script type="text/javascript"> -->
24     <!-- <script>
25         //当点击div的标签的时候，设置标签的文字为蓝色
26         // 001-先通过JavaScript代码来获取标签
27         // document.getElementsByTagName("div");  获取页面中所有的div标签
28         var oDiv = document.getElementsByTagName("div")[0];
29 
30         // 002-给标签添加点击事件
31         oDiv.onclick = function() {
32             oDiv.style.color = "blue";
33         }
34     </script> -->
35 
36     <!-- 002-方案2，把JavaScript代码编写到单独的文件中，引入执行文件 -->
37     <script src="./index.js"></script>
38 </body>
39 
40 </html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <!-- <style>
        div {
            color: red
        }
    </style> -->
</head>

<body>
    <h1>我是标题</h1>
    <div>我是div1</div>
    <div>我是div2</div>

    <!-- 001-方案一，在script标签中间编写JavaScript代码 -->
    <!-- <script type="text/javascript"> -->
    <!-- <script>
        //当点击div的标签的时候，设置标签的文字为蓝色
        // 001-先通过JavaScript代码来获取标签
        // document.getElementsByTagName("div");  获取页面中所有的div标签
        var oDiv = document.getElementsByTagName("div")[0];

        // 002-给标签添加点击事件
        oDiv.onclick = function() {
            oDiv.style.color = "blue";
        }
    </script> -->

    <!-- 002-方案2，把JavaScript代码编写到单独的文件中，引入执行文件 -->
    <script src="./index.js"></script>
</body>

</html>