php网站的优势,免费建网站软件下载手机,北仑网站网页建设,网站加载进度条DOM- 节点操作 一.节点操作 1.DOM节点 目标#xff1a;能说出DOM节点的类型 DOM节点 DOM树里每一个内容都称之为节点 节点类型 元素节点 所有的标签 比如 body、 div html 是根节点 属性节点 所有的属性 比如 href 文本节点 所有的文本 document树#xff1a; 总结能说出DOM节点的类型 DOM节点 DOM树里每一个内容都称之为节点 节点类型 元素节点 所有的标签 比如 body、 div html 是根节点 属性节点 所有的属性 比如 href 文本节点 所有的文本 document树 总结 1. 什么是DOM 节点  DOM树里每一个内容都称之为节点 2. DOM节点的分类  元素节点 比如 div标签  属性节点 比如 class属性  文本节点 比如标签里面的文字 3. 我们重点记住那个节点  元素节点  可以更好的让我们理清标签元素之间的关系 2.查找节点 目标能够具备根据节点关系查找目标节点的能力 关闭二维码案例 点击关闭按钮 关闭的是二维码的盒子 还要获取erweima盒子 思考 关闭按钮 和 erweima 是什么关系呢父子关系所以我们完全可以这样做点击关闭按钮 直接关闭它的爸爸就无需获取erweima元素了 节点关系 父节点子节点兄弟节点 父节点查找 parentNode 属性 返回最近一级的父节点 找不到返回为null !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodydiv classfatherdiv classson儿子/div/divscriptlet son document.querySelector(.son)// 找爸爸//console.log(son.parentNode)//此项运行时会返回Null,被隐藏了//son.parentNode.style.display none/script /body /html 案例关闭二维码案例 !DOCTYPE html html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.erweima {position: relative;width: 160px;height: 160px;margin: 100px auto;border: 1px solid #ccc;}.erweima i {position: absolute;left: -13px;top: 0;width: 10px;height: 10px;border: 1px solid #ccc;font-size: 12px;line-height: 10px;color: #ccc;font-style: normal;cursor: pointer;}/style /headbodydiv classerweimaimg src./images/code.png alti classclose_btnx/i/divscript//1.获取元素 事件源i 关闭的二维码erweimalet close_btn document.querySelector(.close_btn)//2.事件监听close_btn .addEventListener(click,function(){//找他爸this指的就是close_btnthis.parentNode.style.display none})/script /body/html 案例关闭二维码案例 需求多个二维码点击谁谁关闭 分析 ①需要给多个按钮绑定点击事件 ②关闭的是当前的父节点 !DOCTYPE html html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.erweima {width: 149px;height: 152px;border: 1px solid #000;background: url(./images/456.png) no-repeat;position: relative;}.close {position: absolute;right: -52px;top: -1px;width: 50px;height: 50px;background: url(./images/bgs.png) no-repeat -159px -102px;cursor: pointer;border: 1px solid #000;}/style /headbodydiv classerweimaspan classclose/span/divdiv classerweimaspan classclose/span/divdiv classerweimaspan classclose/span/divdiv classerweimaspan classclose/span/divdiv classerweimaspan classclose/span/divscript// 获取元素let close_btn document.querySelectorAll(.close)//2.绑定多个点击事件给closefor (let i 0;i close_btn.length;i){close_btn[i].addEventListener(click, function(){//3.关闭当前的那个二维码 点击谁就关闭谁的爸爸this.parentNode.style.display none})}/script /body/html 子节点查找 childNodes 获得所有子节点、包括文本节点空格、换行、注释节点等 children 重点 仅获得所有元素节点 返回的还是一个伪数组 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodybutton点击/buttonulli我是孩纸/lili我是孩纸/lili我是孩纸/lili我是孩纸/lili我是孩纸/lili我是孩纸/li/ulscriptlet btn document.querySelector(button)let ul document.querySelector(ul)btn.addEventListener(click,function(){// console.log(ul.children)for (let i 0;i ul.children.length;i){ul.children[i].style.color red}})ul.children[1].style.color green//console.log(ul.childNodes)/script /body /html 兄弟关系查找 1. 下一个兄弟节点nextElementSibling 属性 2. 上一个兄弟节点previousElementSibling 属性 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodybutton点击/buttonulli第1个/lili第2个/lili第3个/lili第4个/li/ulscriptlet btn document.querySelector(button)let two document.querySelector(.two)btn.addEventListener(click,function(){two.nextElementSibling.style.color redtwo.previousElementSibling.style.color red})/script /body /html 1. 查找父节点用那个属性  parentNode 2. 查找所有子节点用那个属性  children 3. 查找兄弟节点用那个属性  nextElementSibling  previousElementSibling 3.增加节点 目标能够具备根据需求新增节点的能力  1).创建节点  即创造出一个新的网页元素再添加到网页内一般先创建节点然后插入节点  创建元素节点方法 2).追加节点  要想在界面看到还得插入到某个父元素中  插入到父元素的最后一个子元素: !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodyulli我是大毛/lili我是二毛/li/ulscript//二毛 ul.children[1]//1.创建新的标签节点// let div document.createElement(div)//div.className currentlet ul document.querySelector(ul)let li document.createElement(li)li.innerHTML 我是小li//2.追加节点 父元素.appendChild(子元素) 后面追加ul.appendChild(li)/script /body /html  插入到父元素中某个子元素的前面 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodyulli我是大毛/lili我是二毛/li/ulscript//二毛 ul.children[1]//1.创建新的标签节点// let div document.createElement(div)//div.className currentlet ul document.querySelector(ul)let li document.createElement(li)li.innerHTML 我是小li//2.追加节点 父元素.appendChild(子元素) 后面追加// ul.appendChild(li)//3.追加节点 父元素.insertBefore(子元素,放到哪个元素的前面) ul.insertBefore(li,ul.children[1])/script /body /html 案例:学成在线案例渲染 需求按照数据渲染页面 分析 ①准备好空的ul 结构②根据数据的个数创建一个新的空li③li里面添加内容 img 标题等④追加给ul !DOCTYPE html html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle学车在线首页/titlelink relstylesheet hrefstyle.cssstyle/style /headbody!-- 4. box核心内容区域开始 --div classbox wdiv classbox-hdh3精品推荐/h3a href#查看全部/a/divdiv classbox-bdul classclearfix!-- liimg src./images/course01.png alth4Think PHP 5.0 博客系统实战项目演练/h4div classinfospan高级/span • span 1125/span人在学习/div/li --/ul/div/divscriptlet data [{src: images/course01.png,title: Think PHP 5.0 博客系统实战项目演练,num: 1125},{src: images/course02.png,title: Android 网络动态图片加载实战,num: 357},{src: images/course03.png,title: Angular2 大前端商城实战项目演练,num: 22250},{src: images/course04.png,title: Android APP 实战项目演练,num: 389},{src: images/course05.png,title: UGUI 源码深度分析案例,num: 124},{src: images/course06.png,title: Kami2首页界面切换效果实战演练,num: 432},{src: images/course07.png,title: UNITY 从入门到精通实战案例,num: 888},{src: images/course08.png,title: 我会变你呢,num: 590},{src: images/course08.png,title: 我会变你呢,num: 590}]let ul document.querySelector(ul)//1.根据数据的个数 决定这个小Li的个数for (let i 0;i data.length;i){//2.创建小lilet li document.createElement(li)//console,log(li)//4.先准备好内容再追加li.innerHTMLimg src${data[i].src} alth4${data[i].title}/h4div classinfospan高级/span • span ${data[i].num}/span人在学习/div//3.追加给ul 父元素.appendChild(子元素)ul.appendChild(li)}/script /body/html 特殊情况下我们新增节点按照如下操作  复制一个原有的节点 把复制的节点放入到指定的元素内部 克隆节点 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodyulli我是内容/li/ulscriptlet ul document.querySelector(ul)//括号为空则默认为false 如果是false则不克隆后代节点// let newUL ul.cloneNode()//如果是true则克隆后代节点let newUL ul.cloneNode(true)document.body.appendChild(newUL)/script /body /html cloneNode会克隆出一个跟原标签一样的元素括号内传入布尔值  若为true则代表克隆时会包含后代节点一起克隆  若为false则代表克隆时不包含后代节点  默认为false 3).删除节点 目标能够具备根据需求删除节点的能力 若一个节点在页面中已不需要时可以删除它在 JavaScript 原生DOM操作中要删除元素必须通过父元素删除 语法 注 如不存在父子关系则删除不成功删除节点和隐藏节点display:none 有区别的 隐藏节点还是存在的但是删除则从html中删除节点 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodybutton点击/buttonulli我是内容11111/li/ulscript//需求点击按钮,删除小lilet btn document.querySelector(button)let ul document.querySelector(ul)btn.addEventListener(click,function(){//删除的语法 父元素.removeChild(子元素)ul.removeChild(ul.children[0])})/script /body /html 二.时间对象 目标掌握时间对象可以让网页显示时间  时间对象用来表示时间的对象  作用可以得到当前系统时间 1.实例化   目标能够实例化时间对象 在代码中发现了 new 关键字时一般将这个操作称为实例化,创建一个时间对象并获取时间 获得当前时间获得指定时间  !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodyscript//let arr []// let arr new Array()// let obj {}// let obj new Object()//new 实例化 时间对象//小括号为空可以得到当前时间let date new Date()console.log(date)//小括号里面写上时间可以返回指定的时间let last new Date(2024-3-27 10:09:00)console.log(last)/script /body /html 2.时间对象方法 目标能够使用时间对象中的方法写出常见日期 因为时间对象返回的数据我们不能直接使用所以需要转换为实际开发中常用的格式 方法作用说明getFullYear()获得年份获取四位年份getMonth()获得月份取值为 0 ~ 11getDate()获取月份中的每一天不同月份取值也不相同getDay()获取星期取值为0 ~ 6getHours()获取小时取值为 0 ~ 23getMinutes()获取分钟取值为 0 ~ 59getSeconds()获取秒取值为 0 ~ 59 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodyscript//new 实例化 时间对象//小括号为空可以得到当前的时间let date new Date()console.log(date.getFullYear()) //年console.log(date.getMonth() 1) //月console.log(date.getDate()) //日console.log(date.getHours()) //时console.log(date.getMinutes()) //分console.log(date.getSeconds()) //秒console.log(date.getDay() ) //星期几/script 案例页面显示时间 需求将当前时间以YYYY-MM-DD HH:mm 形式显示在页面 分析 ①调用时间对象方法进行转换 ②字符串拼接后通过 innerText 给 标签 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head bodydiv/divscriptlet arr [星期日,星期一,星期二,星期三,星期四,星期五,星期六,]//1.实例化事件对象setInterval(function(){let date new Date()let year date.getFullYear()let month date.getMonth() 1let date1 date.getDate()let hour date.getHours()let min date.getMinutes()let sec date.getSeconds()let day date.getDay()let div document.querySelector(div)div.innerHTML今天是${year}年${month}月${date1}日 ${hour}:${min}:${sec} ${arr[day]}},1000)/script /body /html 3.时间戳 目标能够获得当前时间戳 什么是时间戳  是指1970年01月01日00时00分00秒起至现在的毫秒数它是一种特殊的计量时间的方式 三种方式获取时间戳 使用 getTime() 方法