前言
当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了
首先我们思考一下:JavaScript是用来做什么的?
- JavaScript诞生就是为了能够让它在浏览器中运行
那么DOM就是我们学习中不可或缺的一个环节,下面让我们深入了解DOM
DOM简介
DOM定义:
- 文档对象模型(DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
DOM作用:
- 用来修改网页内容,结构和样式
DOM树:
- 我们用一个图片来表示(来自B站黑马程序员Pink老师)
获得元素
DOM在我们实际开发中主要用来操作元素
那么如果要操作元素,最基本的就是要先获得元素:
- ID获得元素:
代码:
//注意这里返回的是元素对象 document.getElementById('ID');
案例展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div1"></div> <script> //1.我们常常把script放在body的内部下方 //2.get 获得 Element 元素 by 通过 Id //3.注意ID是大小写敏感 //4.返回的是一个元素对象 var div1 = document.getElementById('div1'); //这里正常输出 console.log(div1); //这里dir表示更好的输出(展示其整体内容) console.dir(div1); </script> </body> </html>
- 标签名获取元素:
代码:
//注意这里返回的是元素对象集合 document.getElementsByTagName('TagName'); //可以获得某个父元素中的全部元素对象集合 element.getElementsByTagName('TagName');
案例展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ol id="ol"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <script> //这里是整个body中的li,返回的是元素对象集合 var lis = document.getElementsByTagName('li'); console.log(lis); //通过遍历获得集合中各个元素对象 for (const iterator of lis) { console.log(iterator); } //当li为空,仍旧返回数组,但为空数组(伪数组) //我们可以单独获得ol中的li var ol = document.getElementById('ol'); var ollis = ol.getElementsByTagName('li'); //通过遍历获得集合中各个元素对象 for (const iterator of ollis) { console.log(iterator); } </script> </body> </html>
- 类名获取元素(HTML5):
代码:
document.getElementByClassName('类名');
案例展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="nav"></div> <div class="box"></div> <div class="box"> <ul> <li></li> <li></li> </ul> </div> <script> //1.通过类名获得对象 var box = document.getElementsByClassName('div'); console.log(box); //2.document.querySelector('.box')我们可以获得选择器中的第一个 var fristBox = document.querySelector('.box'); //3。上方的获取方法同样适用于id选择,注意需要用‘’包括 var nav = document.querySelector('#nav'); //4.同样使用于标签选择 var fristLi = document.querySelector('li'); //5.document.querySelectorAll()获取所有的类型的集合 var allLi = document.querySelectorAll('li'); </script> </body> </html>
- 获得特殊标签body和html元素
代码:
//body元素 document.body //html元素 document.documentElement
案例展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //1.获得body元素 var bodyEle = document.body; console.log(bodyEle); console.dir(bodyEle); //2.获得html元素 var htmlEle = document.documentElement; console.log(htmlEle); </script> </body> </html>
事件基础
JavaScript使我们有能力创建动态页面,而事件就是被JavaScript所侦测到的行为。
页面中的每个元素都可以产生某些触发JavaScript的事件,简单来说就是产生:触发——响应机制
事件三要素
我们把事件分为三部分:
- 事件源
- 事件被触发的对象
- 事件类型
- 如何触发,例如点击onclick
- 事件处理程序
- 通过一个函数赋值的方法完成
我们下面给出基本格式:
name.methodName = function() { ~~~ ~~~ }
我们给出一个基础案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="but">按钮</button> <script> //我们下面做出的:点击按钮就会弹出“你好”的对话框 //1.获得事件源 var button = document.getElementById('but'); //2.针对事件源,给出事件类型和事件处理程序(这里指点击事件) button.onclick = function() { alert("你好"); } </script> </body> </html>
事件类型概括
我们下面给出所有可用到的事件类型:
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
操作元素
我们学习事件的目的就是为了对元素进行修改
下面我们依次介绍一些操作元素的方法:
元素内容修改
元素内容修改有两种方法:
//element.innerText不识别HTML标签,会去除空格和换行 element.innerText = ''; //element.innerHTML识别HTML标签,不会去除空格和换行(推荐) element.innerHTML = ''; //注意:我们可以通过上述方法来获得该元素的内容
除内容修改外,元素属性同样也可以进行修改:
//我们需要把下述图片修改放于某元素的事件中就可以进行修改 img.src = '';
案例展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-