【JavaScript】Web API基础（三）

最新推荐文章于 2024-07-11 20:55:36 发布

A Lucky Boy

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量93

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_43797577/article/details/125322090

版权

javascript 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

添加节点appendChild(newChild)

创建节点createElement()

插入节点insertBefore(newChild,refChild)

克隆节点：cloneNode()

删除节点removeChild(child)

节点操作

查找节点

孩子节点

获取元素用的较多

作用属性
获取所有子节点（包括元素节点、注释节点、文本节点） childNodes
获取所有子元素（只有元素节点） children
获取第一个子节点（包括元素节点、注释节点、文本节点） firstChild
获取第一个子元素（只有元素节点） firstElementChild
获取最后一个子节点（包括元素节点、注释节点、文本节点） lastChild
获取最后一个子元素（只有元素节点） lastElementChild

作用	属性
获取所有子节点（包括元素节点、注释节点、文本节点）	childNodes
获取所有子元素（只有元素节点）	children
获取第一个子节点（包括元素节点、注释节点、文本节点）	firstChild
获取第一个子元素（只有元素节点）	firstElementChild
获取最后一个子节点（包括元素节点、注释节点、文本节点）	lastChild
获取最后一个子元素（只有元素节点）	lastElementChild

<!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>
  <ul>
    <li>张三</li>
    <li>李四</li>
    <!-- 我是一个注释 -->
    <li>王五</li>
    <li>赵六</li>
  </ul>

  <script>
    // 查找结点
    const ul = document.querySelector('ul')
    // 查找所有子节点（包括换行、注释、标签）（了解）
    console.log(ul.childNodes)
    // 查找所有标签节点（掌握）
    console.log(ul.children)
    // 查找第一个子节点（包括换行、注释、标签）（了解）
    console.log(ul.firstChild)
    // 查找第一个标签节点（掌握）
    console.log(ul.firstElementChild)
    // 查找最后一个子节点（包括换行、注释、标签）（了解）
    console.log(ul.lastChild)
    // 查找最后一个标签节点（掌握）
    console.log(ul.lastElementChild)

  </script>
</body>

</html>

兄弟节点

获取元素用的较多

作用属性
获取上一个兄弟节点（包括元素节点、注释节点、文本节点） previousSibling
获取上一个兄弟元素（只有元素节点） previousElementSibling
获取下一个兄弟节点（包括元素节点、注释节点、文本节点） nextSibling
获取下一个兄弟元素（只有元素节点） nextElementSibling

作用	属性
获取上一个兄弟节点（包括元素节点、注释节点、文本节点）	previousSibling
获取上一个兄弟元素（只有元素节点）	previousElementSibling
获取下一个兄弟节点（包括元素节点、注释节点、文本节点）	nextSibling
获取下一个兄弟元素（只有元素节点）	nextElementSibling

<!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>

  <ul>
    <li>张三</li>
    <li class="ls">李四</li>
    <!-- 我是一个注释 -->
    <li>王五</li>
    <li>赵六</li>
  </ul>
  <script>
    const ls = document.querySelector('.ls')
    // 查找上一个节点 (了解)
    console.log(ls.previousSibling)
    // 查找上一个元素节点 (掌握)
    console.log(ls.previousElementSibling)
    // 查找下一个节点 (了解)
    console.log(ls.nextSibling)
    // 查找下一个元素节点 (掌握)
    console.log(ls.nextElementSibling)
    // 查找下两个元素节点 (了解)
    console.log(ls.nextElementSibling.nextElementSibling)

  </script>
</body>

</html>

父节点

一般html中都是标签包裹内容，所以一般获取父节点就是父元素

作用属性
获取父节点 parentNode

作用	属性
获取父节点	parentNode

<!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>
  <ul>
    <li>张三</li>
    <li class="ls">李四</li>
    <!-- 我是一个注释 -->
    <li>王五</li>
    <li>赵六</li>
  </ul>

  <script>
    const ls = document.querySelector('.ls')
    // 查找父节点
    console.log(ls.parentNode)
    // 如果一直往上查找 查找到HTML再往上找则是document
    console.log(ls.parentNode.parentNode.parentNode.parentNode) // document

    // 查找父元素
    console.log(ls.parentElement)

    // 如果一直往上查找 查找到HTML再往上找则是null

    console.log(ls.parentElement.parentElement.parentElement.parentElement) // null
  </script>
</body>

</html>

添加节点appendChild(newChild)

语法：

parent.appendChild(newChild)

parent：要添加内容的父节点

newChild：需要添加进入的子节点

作用：表示把newChild添加到parent内容的最后

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
    }

    .red {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>

</head>

<body>
  <button>移花接木</button>
  <div class="father">
    这是.father的盒子
  </div>

  <div class="red">
    这是.red的盒子
  </div>

  <script>
    const btn = document.querySelector('button')
    const father = document.querySelector('.father')
    const red = document.querySelector('.red')
    btn.addEventListener('click', function () {
      // 将red 添加到father中去
      father.appendChild(red)
    })
  </script>
</body>

</html>

创建节点createElement()

语法： document.createElement('标签名')

作用： 在内存中创建一个元素节点

返回值：

创建好的元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <button>点击生成一个h1标签</button>
  <div class="father">
    我是div中的内容
  </div>
  <script>
    const btn = document.querySelector('button')
    const div = document.querySelector('.father')
    btn.addEventListener('click', function () {
      // 判断如果长度大于等于9 则退出函数
      if (div.children.length >= 9) {
        console.log('退出函数')
        return
      }
      console.log(div.children.length)
      const h = document.createElement('h1')
      h.innerHTML = '我是用节点添加的h1标签'
      h.style.margin = '0'
      div.appendChild(h)
      console.log(h)
    })
  </script>
</body>

</html>

插入节点insertBefore(newChild,refChild)

语法： parent.insertBefore(newChild,refChild)

参数：

parent：要插入元素的父元素

newChild：添加的元素

refChild：被插入前面的元素

作用： 把newChild添加到parent里面的refChild节点的前面

注意点：

如果是在父元素内容的最前添加，可以使用 parent.inserBefore(newChild,firstElementChild);

如果是在父元素内容的最后添加，可以使用appendChild，也可以使用 parent.insertBefore(newChild,null)

<!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>

  <button>点击插队</button>
  <ul>
    <li>张三</li>
    <li>李四</li>
    <li class="ww">王五：我预感等会田七会插到我前面</li>
    <li>赵六</li>
  </ul>

  <li class="tq">田七：我要插队！！</li>
  <script>
    const btn = document.querySelector('button')
    const ww = document.querySelector('.ww')
    const tq = document.querySelector('.tq')
    btn.addEventListener('click', function () {
      // 语法：parent.insertBefore(需要插入的元素, 插入到哪个元素前边)
      ww.parentElement.insertBefore(tq, ww)
      // 插入到第一个元素前边
      // ww.parentElement.insertBefore(tq, ww.parentElement.firstElementChild)
      // 插入到最后一个元素后边
      // ww.parentElement.insertBefore(tq, null)
      // ww.parentElement.append(tq)

    })
  </script>
</body>

</html>

克隆节点：cloneNode()

语法： node.cloneNode()

作用： 在内存中复制克隆一份node节点

参数：

false：浅克隆，只克隆当前节点，不包含其中内容节点

true：深克隆，克隆当前节点以及其中所有内容节点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
    }

    .red {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <button>移花接木</button>
  <div class="father">
    这是.father的盒子
  </div>

  <div class="red">
    这是.red的盒子
  </div>

  <script>
    const btn = document.querySelector('button')
    const father = document.querySelector('.father')
    const red = document.querySelector('.red')
    /* 
    克隆节点：需要克隆的节点.cloneNode()
    注意点：如果只写.cloneNode() 则只会克隆当前节点 而节点内的内容是不会被克隆的 
            如果想要克隆则应该为cloneNode(Boolean)
    false：浅拷贝：只克隆当前标签 里边的内容不会拷贝
    true： 深拷贝：不仅克隆当前标签 里边的内容也会拷贝
    */
    btn.addEventListener('click', function () {
      // 如果father中大于等于3个盒子 则退出函数
      if (father.children.length >= 3) {
        console.log('已经不能再多啦~~~')
        return
      }
      // 深拷贝 克隆所有内容
      const copyRed = red.cloneNode(true)
      father.append(copyRed)
      console.log(copyRed)

    })
  </script>
</body>

</html>

删除节点removeChild(child)

需求： 点击哪一个li，就删除这个一个li

语法： parent.removeChild(child)

参数：

parent：要删除元素的父元素

child：需要删除的元素

作用： 通过父节点调用，删除其中的某个子节点

<!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>
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
    <li>我是第11个li</li>
    <li>我是第12个li</li>
    <li>我是第13个li</li>
    <li>我是第14个li</li>
    <li>我是第15个li</li>
    <li>我是第16个li</li>
    <li>我是第17个li</li>
    <li>我是第18个li</li>
    <li>我是第19个li</li>
    <li>我是第20个li</li>

  </ul>

  <script>
    const lis = document.querySelectorAll('li')
    for (let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('click', function () {
        // this.parentNode 父节点（ul）
        this.parentNode.removeChild(this)
      })
      lis[i].style.cursor = 'pointer'
    }
  </script>
</body>

</html>

日期对象Date

创建日期对象

let now = new Date() // 不传参，默认是一个当前时间的对象
let date = new Date("2021-10-14 05:20:00") // (格式固定)指定具体的时间对象，后面的时分秒可以省略
console.log(now)
console.log(date)

日期对象的常用方法



  <script>
    const now = new Date()  // 默认创建当前日期对象
    // 年
    const year = now.getFullYear()
    // 月 需要加1得到当前月份 因为默认从0开始
    const month = now.getMonth() + 1
    // 日 
    // getday()表示一周中的第几天 不是一个月中的第几天
    const day = now.getDate()
    // 时
    const hour = now.getHours()
    // 分
    const min = now.getMinutes()
    // 秒
    const s = now.getSeconds()
    console.log(`${year}年${month}月${day}日${hour}时${min}分${s}`)
  </script>

时间戳

时间戳：表示距离1970年01月01日00时00分00秒起，过去的总毫秒数

作用： 用来计算时间差

代码： let date = +new Date();

  // 作用:用来计算时间差
    // 开始时间
    const begin = new Date()
    let num = 0
    for (let i = 1; i <= 100000000; i++) {
      num += i
    }
    console.log(num)
    // 结束时间
    const end = new Date()
    console.log(end - begin)

A Lucky Boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】Web API基础（三）

目录节点操作查找节点孩子节点兄弟节点父节点添加节点appendChild(newChild)创建节点createElement()插入节点insertBefore(newChild,refChild)克隆节点：cloneNode()删除节点removeChild(child)日期对象Date创建日期对象日期对象的常用方法时间戳...
复制链接

扫一扫