DOM与BOM操作
| 复习链接: http://c.biancheng.net/view/9360.html |
| 事件对象: https://www.runoob.com/jsref/dom-obj-event.html |
初识DOM
| DOM --> Document Object Model --> 文档对象模型 --> 通过js来操作网页内容 |
| |
| 前几节课学习的是JavaScript的基本语法.学习过程中可能会产生割裂感(和html/css没有联系). 从这节课开始就是和之前的知识点串联在一起. |
| 通过dom让js和html/css产生联系 |
| |
| DOM树 --> 一个网页文档里的所有内容(图片,文本,样式)在网页底层中是用树形结构保存的.树里面每个分支的终点叫做node(节点). 每个节点都属于一个对象(属性/方法) |
| |
| 网页的内容是以树形结构的方式保存在程序里.每个元素都是一个对象.都有自己对应的属性和方法 |
| Document对象是DOM树的根部.是所有节点的根节点.可以通过Document访问网页里的所有内容 |
| |
| 操作网页元素分为两步: |
| 1.找出元素 |
| 2.对元素实施操作 |
DOM元素的选中方式
| Element -- 元素 |
| 函数语法基本都是小驼峰(第一个单词不大写,第二个单词开始首字母大写) |
| |
| 1.通过id获取元素 |
| document.getElementById() |
| 2.通过class获取元素 |
| document.getElementsByClassName() |
| 3.通过标签名获取元素 |
| document.getElementsByTagName() |
| |
| 获取的元素默认值为HTMLCollection.类似于数组,但它不是数组 |
| 同: 数据都有下标的概念 / 数据可以被遍历 |
| 异: 它不可以使用数组的方法 |
| 基于这个原因,如果直接对伪数组进行dom操作是无效的. 我们要操作的不是这个伪数组,而是伪数组里的元素. 所以要添加下标,来访问对应的元素 |
DOM操作文本内容
| innerText: 读取/修改元素里的文本内容(不识别标签语法) |
| innetHTML: 读取/修改元素里的文本内容(识别标签语法) |
DOM操作元素属性/样式
| 操作元素属性 --> 获取到元素后, 通过元素名. 的方式进行操作 |
| |
| 元素名.属性名 |
| 元素名.属性名 = XXX |
| |
| 元素名.title |
| 元素名.src |
| 元素名.className |
| |
| 操作元素样式(css) --> 获取元素后,通过元素名.style.样式名 的方式进行操作 |
| 元素名.style.样式名 |
| |
| 元素名.style.width |
| |
| 如果css的样式有(-)减号作为连接符.在用js写的时候,不写连接符而是用小驼峰命名法 |
| font-size --> fontSize |
| background-color --> backgroundColor |
交互事件(event)
| 事件指的是用户跟网页内容产生交互时的操作: |
| 按下键盘/单击鼠标/双击鼠标/输入文本 |
| 当这些事件触发时,就可以通过JavaScript的监听器.来获取到交互情况,并运行对应的功能 |
| |
| 事件流程: |
| 1.获取事件对象 |
| 2.绑定监听事件 |
| 事件对象.监听事件 = function(){} 当触发事件时,执行函数里的功能 |
| box.onclick = function(){功能代码} |
| |
| 在获取到元素之后.可以用this表示当前对象。 |
DOM复习
| DOM -- Document Object Model --> 文档对象模型 |
| 一个网页可以称为文档.通过js代码实现找到/操作网页文档内容 |
| document -- 文档 |
| element -- 元素 |
| node -- 节点 |
| event -- 事件 |
| Browser -- 浏览器 |
| |
| DOM操作流程: |
| 1.获取目标元素 |
| 2.进行对应操作 |
| |
| document.getElementById() |
| document.getElementsByClassName() |
| document.getElementsByTagName() |
| |
| 获取到元素对象后.就可以使用/修改里面的属性/方法 |
| |
| 获取到的元素对象表示形式类似于数组: 1.有下标 2.能遍历数据 3.不能使用数组的方法 |
| 用类名/标签名获取到的数据.哪怕只有一个对象.也是存在伪数组里的 |
DOM补充
| 可以通过dom对元素进行增删改查操作 --> 增删改查是基于Node节点来实现的 |
| |
| parent: 父级 |
| child: 子级 |
初识BOM:
| Browser Object Model --> 浏览器对象模型 |
| dom简单来说就是通过js和网页内容进行交互 |
| bom简单来说就是通过js和浏览器进行交互(弹窗,刷新,加载) |
| |
| 其实我们之前用的alert,prompt.都属于bom操作 --> 控制浏览器弹出一个窗口再进行操作 --> 他们都属于同一个对象.叫做window(当前页面窗口) |
| |
| window.alert() |
| window.prompt() |
| 但是一般不这么写.因为网页默认运行 |
定时器:
| 作用就是可以让网页里的一段程序.过一阵子再运行 |
| |
| setInterval() > 周期性定时器 > 隔一阵子就运行一次 |
| setTimeOut() > 一次性定时器 > 执行一次就结束 |
代码块:
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Document</title> |
| </head> |
| <body> |
| <p> |
| 什么是dom操作?和html进行交互<br> |
| 1、获取html标签,返回一个元素对象<br> |
| 2、设置 值/改变 值<br> |
| |
| </p> |
| <input id="inp1" type="text" value="aa"> |
| <ul id="ul1"> |
| <li>1-a-12</li> |
| <li>2-b-13</li> |
| <li>3-c-14</li> |
| </ul> |
| <button onclick="changeTest()">替换按钮</button> |
| <ul> |
| <li>onclick属性表示一个点击事件属性</li> |
| <li>onclick属性值是一个函数名称()</li> |
| <li>表示,一旦点击该按钮,就调用这个函数</li> |
| </ul> |
| </body> |
| <script> |
| |
| |
| let inp1=document.getElementById('inp1') |
| |
| inp1.value='曹操' |
| |
| let arr2=[ |
| {id:1,name:'曹操',age:36}, |
| {id:2,name:'刘备',age:34}, |
| {id:3,name:'孙权',age:30}, |
| ] |
| |
| let ul1=document.getElementById('ul1') |
| function changeTest(){ |
| |
| let s='' |
| arr2.forEach((e)=>{ |
| s+=`<li>${e.id}-${e.name}-${e.age}</li>` |
| }) |
| ul1.innerHTML=s |
| } |
| </script> |
| </html> |
强盛集团案例:
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <title>Document</title> |
| <style> |
| button{ |
| width: 100px; |
| height: 40px; |
| |
| margin-left: 40px; |
| |
| border: none; |
| |
| outline: none; |
| |
| border-radius: 8px; |
| color: white; |
| |
| font-size: large; |
| cursor: pointer; |
| } |
| .fb>button:nth-child(1){ |
| background-color: rebeccapurple; |
| } |
| .fb>button:nth-child(2){ |
| background-color:red; |
| } |
| .fb>button:nth-child(3){ |
| background-color: green; |
| } |
| .fb>button:nth-child(4){ |
| background-color: blue; |
| } |
| |
| tbody>tr:nth-child(odd){ |
| background-color: skyblue; |
| } |
| tbody>tr:nth-child(even){ |
| background-color: rgb(227, 181, 62); |
| } |
| </style> |
| </head> |
| <body> |
| <h1 style="text-align: center;">强盛集团员工薪资表</h1> |
| <h3 style="text-align: center;">强盛集团经营理念:风浪越大,鱼越贵</h3> |
| <div class="fb" style="text-align: center;"> |
| <button onclick="generateTab()">生成表格</button> |
| <button onclick="doubleSalary()">薪资翻倍</button> |
| <button onclick="restEmp()">退休人员</button> |
| <button onclick="sumSalary()">薪资总数</button> |
| </div> |
| <table style="margin-top: 30px;" align="center" border="1" cellpadding="18" cellspacing="0"> |
| <thead> |
| <tr> |
| <th><a href="javascript:orderEmp('id')">序号</a></th> |
| <th>姓名</th> |
| <th><a href="javascript:orderEmp('age')">年龄</a></th> |
| <th><a href="javascript:orderEmp('salary')">薪资</a></th> |
| </tr> |
| </thead> |
| <tbody id="tbody"> |
| <tr> |
| <td>1</td> |
| <td>高启强</td> |
| <td>36</td> |
| <td>200</td> |
| </tr> |
| </tbody> |
| <tfoot id="tfoot"> |
| <tr style="text-align: center;"> |
| <td colspan="4">薪资总数:</td> |
| </tr> |
| </tfoot> |
| </table> |
| </body> |
| <script> |
| let emps=[ |
| {id:1,name:'高启强',age:36,salary:200}, |
| {id:2,name:'高启盛',age:30,salary:300}, |
| {id:3,name:'唐小龙',age:35,salary:100}, |
| {id:4,name:'唐小虎',age:35,salary:100}, |
| {id:5,name:'陈泰',age:66,salary:100}, |
| ] |
| |
| let tbody=document.getElementById('tbody') |
| let tfoot=document.getElementById('tfoot') |
| |
| function generateTab(){ |
| |
| createTab(emps) |
| } |
| |
| function createTab(arr){ |
| let s='' |
| arr.forEach((e)=>{ |
| s+=`<tr> |
| <td>${e.id}</td> |
| <td>${e.name}</td> |
| <td>${e.age}</td> |
| <td>${e.salary}</td> |
| </tr>` |
| }) |
| tbody.innerHTML=s |
| } |
| let newEmps; |
| function doubleSalary(){ |
| |
| newEmps=emps.map((e)=>{ |
| e.salary*=2 |
| return e |
| }) |
| |
| createTab(newEmps) |
| } |
| |
| function restEmp(){ |
| let newEmps=emps.filter((e)=>{ |
| return e.age>65 |
| }) |
| |
| createTab(newEmps) |
| } |
| |
| function sumSalary(){ |
| let salarySum |
| if(newEmps){ |
| salarySum=newEmps.reduce((sum,e)=>{ |
| return sum+=e.salary |
| },0) |
| }else{ |
| salarySum=emps.reduce((sum,e)=>{ |
| return sum+=e.salary |
| },0) |
| } |
| console.log(salarySum) |
| tfoot.innerHTML= |
| `<tr style="text-align: center;"> |
| <td colspan="4">薪资总数:${salarySum}</td> |
| </tr>` |
| } |
| |
| let a=true |
| function orderEmp(type){ |
| a=!a |
| let newEmps2 |
| switch(type){ |
| case 'id': |
| console.log('根据id排序') |
| newEmps2=emps.sort((e1,e2)=>{ |
| return a? e2.id-e1.id : e1.id-e2.id |
| }) |
| break; |
| case 'age': |
| console.log('根据age排序') |
| newEmps2=emps.sort((e1,e2)=>{ |
| return a? e2.age-e1.age : e1.age-e2.age |
| }) |
| break; |
| case 'salary': |
| console.log('根据salary排序') |
| newEmps2=emps.sort((e1,e2)=>{ |
| return a? e2.salary-e1.salary : e1.salary-e2.salary |
| }) |
| break; |
| } |
| |
| createTab(newEmps2) |
| } |
| |
| </script> |
| </html> |
效果图展示:


本文作者:二价亚铁
本文链接:https://www.cnblogs.com/xw-01/p/17538385.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。