💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
前言
本栏目是根据黑马程序员的网课来整理的笔记,也会结合我的一些个人见解,来记录自己学习web APIS的过程,俗话说,好记性不如烂笔头,小郑喜欢在学习的过程中记笔记,记下自己在学习过程中难以理解的知识点,反复练习,加深印象,希望广大网友一起监督学习,互相进步!
DOM节点操作
DOM树里每一个内容都称之为节点
节点类型
元素节点 : 所有的标签 :比如 body、 div ( html 是根节点 )属性节点 :所有的属性 比如 href文本节点 :所有的文本
查找节点
父节点查找:
parentNode 属性
返回最近一级的父节点 找不到返回为null
子元素.parentNode
子节点查找:
childNodes
获得所有子节点、包括文本节点(空格、换行)、注节点等
children (重点)
仅获得所有元素节点
返回的还是一个伪数组
父元素.children
兄弟关系查找:
1. 下一个兄弟节点
nextElementSibling 属性
2. 上一个兄弟节点
previousElementSibling 属性
增加节点
很多情况下,我们需要在页面中增加元素, 比如,点击发布按钮,可以新增一条信息。
一般情况下,我们新增节点,按照如下操作:
1. 创建一个新的节点
2. 把创建的新的节点放入到指定的元素内部
1.创建节点
即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
document.createElement('标签名')
2.追加节点
要想在界面看到,还得插入到某个父元素中
插入到父元素的最后一个子元素:
父元素.qppendChild(要插入的元素)
插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)
示例:
<body><ul><li>1</li><li>3</li></ul><script>//1.创建新的标签节点let ul = document.querySelector('ul')let li = document.createElement('li')li.innerHTML = '2'//2.追加节点 //父元素.appendChild//ul.appendChild(li)//父元素.inserBeforeul.insertBefore(li, ul.children[1])</script>
</body>
特殊情况下,我们新增节点,按照如下操作:
复制一个原有的节点
把复制的节点放入到指定的元素内部
克隆节点
元素.cloneNode(布尔值)
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为false
删除节点
若一个节点在页面中已不需要时,可以删除它
在 JavaScript 原生DOM操作中,要删除元素必须通过 父元素删除
语法
父元素.removeChild(要删除的元素)
如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点
时间对象
实例化
在代码中发现了 new 关键字时,一般将这个操作称为 实例化
创建一个时间对象并获取时间
获得当前时间
let date = new Date()
获得指定时间
let date = new Date('2024-7-12')
时间对象方法
方法 | 作用 | 说明 |
getFullYear() | 获得年份 | 获取四位年份 |
getMonth() | 获得月份 | 取值为 0 ~ 11 |
getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
getDay() | 获取星期 | 取值为 0 ~ 6 |
getHours() | 获取小时 | 取值为 0 ~ 23 |
getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
getSeconds() | 获取秒 | 取值为 0 ~ 59 |
时间戳
什么是时间戳?
是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
三种方式获取时间戳
1. 使用 getTime() 方法
//1. 实例化
let date = new Date()
//2. 获取时间戳
console.log(date.getTime())
2. 简写 +new Date()
console.log(+new Date())
3. 使用 Date().now()
console.log(Date.now())
无需实例化
但是只能得到当前的时间戳, 而前面两种可以返回指定时间的时间戳
重绘和回流(面试常见问题)
1. 浏览器是如何进行界面渲染的
解析(Parser)HTML,生成DOM树(DOM Tree)同时解析(Parser) CSS,生成样式规则 (Style Rules)根据DOM树和样式规则,生成渲染树(Render Tree)进行布局 Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小)进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制Display: 展示在页面上
2. 重绘和回流(重排)
回流(重排)
当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过
程称为 回流。
重绘
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、
outline等), 称为重绘。
重绘不一定引起回流,而回流一定会引起重绘。
会导致回流(重排)的操作:
页面的首次刷新
浏览器的窗口大小发生改变
元素的大小或位置发生改变
改变字体的大小
内容的变化(如:input框的输入,图片的大小)
激活css伪类 (如::hover)
脚本操作DOM(添加或者删除可见的DOM元素)
简单理解影响到布局了,就会有回流
❤️❤️❤️小郑是普通学生水平,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍