5-3 DOM操作详解 · 前端笔记

### JavaScript是前台语言 JavaScript运行在用户的终端网页上，而不是服务器上，所以我们称为“前台语言”。JavaScript就是一个简单的制作页面效果的语言，就是服务于页面的交互效果、美化、绚丽，不能操作数据库。 ### JavaScript的做成 JavaScript基础分为三个部分： > ECMAScript: JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 > > DOM：操作网页上元素的API。比如让盒子移动、变色、轮播等。 > > BOM：操作浏览器部分功能的API，比如上浏览器自动滚动。 ### JavaScript用法 ~~~ HTML中的脚本必须位于<script>与<script>标签之间。脚本可被放置在HTML页面的<body>和<head>部分中。 ~~~ ### JavaScript网页中输出信息的写法 #### 弹出警告框：alert（""） ~~~ <script type="text/javascript"> alert("生命壹号"); </script> ~~~ #### 控制台输出：console.log("") #### 用户输入：prompt()语句 ~~~ <script type="text/javascript"> var a = prompt("随便写些什么吧！"); //必须用一个变量来接收用户给的值 console.log(a); </script> ~~~ ### DOM操作详解 #### 事件：JS是以**事件驱动为核心**的一门语言 **事件的三要素：事件源、事件、事件驱动程序** **总结如下：** 1.事件源：引发后续事件的html标签 2.事件：js已经定义好了的（如下图） 3.事件驱动程序：对样式和html的操作，也就是DOM **代码书写步骤具体如下**（重点）：（1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById （2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 }; （3）书写事件驱动程序：关于DOM的操作。 ~~~ <body> <div id="box1"></div> <script type="text/javascript"> // 1、获取事件源 var div = document.getElementById("box1"); // 2、绑定事件 div.onclick = function () { // 3、书写事件驱动程序 alert("我是弹出的内容"); } </script> </body> ~~~ 常见的事件如下： ![](https://box.kancloud.cn/6567c29d6932cea5ba82a9fff7ed6683_582x464.png) 下面针对这事件的三要素，分别介绍 #### 1.获取事件源的方式（DOM节点的获取）获取事件源的常见方式如下： ~~~ var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二：通过标签名获得标签数组，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通过类名获得标签数组，所以有s ~~~ #### 2.绑定事件的方式方式一：直接绑定匿名函数 ~~~ <div id="box1" ></div> <script type="text/javascript"> var div1 = document.getElementById("box1"); //绑定事件的第一种方式 div1.onclick = function () { alert("我是弹出的内容"); } </script> ~~~ 方式二：先单独定义函数，再绑定 ~~~ <div id="box1" ></div> <script type="text/javascript"> var div1 = document.getElementById("box1"); //绑定事件的第二种方式 div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。 //单独定义函数 function fn() { alert("我是弹出的内容"); } </script> ~~~ 注意上方代码的注释。**绑定的时候，是写fn，不是写fn()**。fn代表的是整个函数，而fn()代表的是返回值方式三：行内绑定 ~~~  <div id="box1" onclick="fn()"></div> <script type="text/javascript"> function fn() { alert("我是弹出的内容"); } </script> ~~~ 注意第一行代码，绑定时，是写的`"fn()"`，不是写的`"fn"`。因为绑定的这段代码不是写在js代码里的，而是被识别成了**字符串**。 #### 3.事件驱动程序点击鼠标时，原本粉色的div变大了，背景变红： ~~~ <script type="text/javascript"> var div1 = document.getElementById("box1"); //点击鼠标时，原本粉色的div变大了，背景变红了 div1.onclick = function () { div1.style.width = "200px"; //属性值要写引号 div1.style.height = "200px"; div1.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-Color } </script> ~~~