【零基础】学JS之APIS第四天

news2024/9/22 7:22:05

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习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)
    //父元素.inserBefore
    ul.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: 展示在页面上