当前位置：首页 > article >正文

JavaScript API部分知识点

article 2024/11/13 21:05:24

一、Dom获取&属性操作

（一）、 Web API 基本认知

1、变量声明

const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化

但是对于引用数据类型，const声明的变量，里面存的不是值，是地址。

有了变量先给const，如果发现它后面是要被修改的，再改为let

const中数组和对象里面可以修改因为栈没改变地址

2、作用和分类

作用: 就是使用 JS 去操作 html 和浏览器

分类：DOM (文档对象模型)、BOM（浏览器对象模型）

3、什么是DOM

DOM 是文档对象模型

作用：操作网页内容，可以开发网页内容特效和实现用户交互

4、DOM树

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

作用：文档树直观的体现了标签与标签之间的关系

5、DOM对象

DOM对象：浏览器根据html标签生成的 JS对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上
DOM的核心思想：把网页内容当做对象来处理
document 对象：是 DOM 里提供的一个对象

它提供的属性和方法都是用来访问和操作网页内容的

（二）、获取DOM对象

1、根据CSS选择器来获取DOM元素 (重点)

1）选择匹配的第一个元素

语法：

document.querySelector()

2.参数: 包含一个或多个有效的CSS选择器字符串

3.返回值： CSS选择器匹配的第一个元素,一个 HTMLElement对象。

4.如果没有匹配到，则返回null。

实例：

  <html lang="en">
<style>
    .box {
        width: 200px;
        height: 100px;
        background-color: aqua;
    }
</style>

<body>
    <p id='nav'>首页</p>
    <div class="box"> 123</div>
    <script>
        //1、标签名获取
        console.log(document.querySelector(`div`));
        //2、类选择器获取
        console.log(document.querySelector(`.box`));
        //console.dir() 打印元素对象的属性和方法
        console.dir(document.querySelector(`div`))
        //3、ID选择器获取
        console.log(document.querySelector(`#nav`));
        //4、获取第一个对象
        console.log(document.querySelector(`ul li:first-child`));//获取第一个小li
    </script>
</body>
</html>

2）选择匹配的多个元素

语法：

document.querySelectorAll(``)

参数: 包含一个或多个有效的CSS选择器字符串

返回值： CSS选择器匹配的NodeList 对象集合

例如：

document.querySelectorAll(`ul li`)
document.querySelectorAll(``)得到的是一个伪数组：有长度有索引号的数组；但是没有 pop()   push() 等数组方法
        想要得到里面的每一个对象，则需要遍历（for）的方式获得。

实例

//5、获取全部的小li div
            console.log(document.querySelectorAll(`div`));//[div.box, div.box, div.box]
           let s =  document.querySelectorAll(`div`)
//6、遍历 for循环
        for (let i = 0; i< s.length; i++) {
          console.log(s[i]);//数组类型的打印
          console.dir(s[i]);//对象的形式打印
        }

3）他们两者小括号里面的参数注意事项

** 里面写css选择器；**

** 必须是字符串，也就是必须加引号**

2、其他获取DOM元素方法（了解）

 //1、根据id获取一个元素
        console.log(document.getElementById('nav'));
        //2、根据 标签获取一类元素 获取页面 所有div
        console.log(document.getElementsByTagName('div'));//[div.box, div.box, div.box]
         //3、根据 类名获取元素 获取页面 所有类名为 box的
        console.log(document.getElementsByClassName('box'));//[div.box, div.box, div.box]

（三）、操作元素内容

1、元素innerText 属性

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

实例

<p class="info">你好js</p>
    <script>
        //获取标签内部的文字
    const info = document.querySelector(`.info`)
    //添加/修改标签内部文字内容
    info.innerTest  ="hello"
    //对<p>内容进行了更新，页面上只显示hello
    </script>

2、元素.innerHTML 属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

<p class="info">你好js</p>
    <script>
        //获取标签内部的文字
    const info = document.querySelector(`.info`)
    //添加/修改标签内部文字内容
    info.innerHTML  ="<strong>hello<strong>"
    //对<p>内容进行了更新，页面上只显示hello
    </script>

（四）、操作元素属性

1、操作元素常用属性

语法：

对象.属性 = 值

实例

<body>
    <img src="./01.jpg" alt="">
    <script>
    //1、获取元素
    const img = document.querySelector(`img`)
    //2、操作元素
    img.src  = './02.jpg'
    //更换了图片
    </script>
</body>

2、操作元素样式属性

1）、通过 style 属性操作CSS

语法：
    对象.style.样式属性 = 值

实例

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>
    // 1. 获取元素
    const box = document.querySelector('.box')
    //2. 修改样式属性 对象.style.样式属性 = '值'  别忘了跟单位
    box.style.width = '300px'
    // 多组单词的采取 小驼峰命名法
    box.style.backgroundColor = 'hotpink'
    box.style.border = '2px solid blue'
    box.style.borderTop = '2px solid red'
  </script>
</body>

注意

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位

2）、操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

语法：
	元素.calssName = '类名'

实例

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }   
    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid #000;
    }
</style>
<body>
    <div></div>
    <script>
        //1、获取元素
        const div = document.querySelector(`div`)
        //2、添加类名 class 是关键字，我们用className
       div.className = `box`
    </script>
</body>

注意

由于class是关键字, 所以使用className去代替
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类

div.className = `nav box`//box将nav覆盖了

3）、通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

方法名	方法	作用
追加类	元素.classList.add('类名')	追加一个类(类名不加点，并且是字符串)
删除类	元素.classList.remove('类名')	删除一个类(类名不加点，并且是字符串)
切换类	元素.classList.toggle('类名')	对所定的元素进行查询，有就删掉;没有就加上

3、操作表单元素属性

1）获取表单里面的值与修改

innerHTML不能修改表单元素

<body>
  <input type="text" value="请输入姓名">
   <script>
    //1、获取标签对象
    const input =document.querySelector(`input`)
    //2、获取值
    console.log(input.value);
    //3、修改
    input.value = 'sef'//修改值
    input.type = `password` //变成密码隐藏了
    </script>
</body>

2）按钮是否选中（checked）

<body>
  <input type="checkbox" name="" id="box">
   <script>
	 let box =  document.querySelector(`#box`)   //利用id选择器获取标签
    box.checked= true;  //也可以带引号‘true’但是不提倡
    </script>
</body>

3），按钮是否禁用（disabled）

<body>
  <button onclick="">点击</button>
   <script>
     let button =  document.querySelector(`button`)
    button.disabled = true;//按钮禁用 false不禁用
    </script>
</body>

4）、点击后显示的内容

<body>
  <button onclick=" printHello()">点击</button>
   <script>
     function printHello() {//点击访问
      alert(`hello`)
    }//使用此函数的同时，上面的onclick要引用函数
    </script>
</body>

4、自定义属性

语法：的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
实例：

<body>
  <div data-id="1" data-spm="不知道">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset.id)  // 1 dataset相当于对象
    console.log(one.dataset.spm)  // 不知道  对象.元素 取值
  </script>
</body>

（五）、定时器-间歇函数

能够使用定时器函数重复执行代码

1、开启定时器

setInterval(函数，间隔时间) //间隔时间单位是毫秒
作用：每隔一段时间调用这个函数

注意：

函数名字不需要加括号
定时器返回的是一个id数字

例如：

<script>
    //方式一：
        function re() {
            console.log(`前端程序员`);
        }
        //每隔一秒调用函数
        setInterval(re, 1000)  //注意此处函数不能加括号
    //方式二：使用匿名函数
        setInterval(function () { console.log(`hello`) }, 1000)
        let num = setInterval(re, 1000)
        console.log(num);//定时器返回的是id数字
    </script>

2、关闭定时器

语法：

let 变量名 = setInterval(函数, 间隔时间) 
        clearInterval(变量名)

四、Dom节点&移动端滑动

（一）日期对象

（二）节点操作

1、DOM 节点

DOM树里每一个内容都称之为节点

DOM节点的分类？

元素节点比如 div标签
属性节点比如 class属性
文本节点比如标签里面的文字

2、查找节点

1）父节点查找：parentNode

返回最近一级的父节点找不到返回为null
语法：子元素.parentNode
实例：

<body>
<div class="yeye">
  <div class="dad">
    <div class="baby"></div>
  </div>
</div>
 
<script>
  let baby = document.querySelector(`.baby`)
  console.log(baby.parentNode);//拿到dad bady的父级元素
  console.log(baby.parentNode.parentNode);//拿到yeye bady父级的父级元素
</script>
</body>

2）子节点查找：childNodes

获得所有子节点、包括文本节点（空格、换行）、注释节点等

children 属性（重点）

仅获得所有元素节点
返回的还是一个伪数组
语法：父元素.children
实例：

<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<script>
  let ul = document.querySelector(`ul`)
  console.log(ul.children);//得到伪数组 存在五个小li对象
  console.log(ul.children[1]);//得到第二个元素对象li
  </script>
</body>

3）、兄弟关系查找

下一个兄弟节点： nextElementSibling 属性
上一个兄弟节点：previousElementSibling 属性
实例：

<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<script>
  let li = document.querySelector(`ul li:nth-child(3)`) /选择第三个小li
  console.log(li);
  //第三个小li的上一个兄弟
  console.log(li.previousElementSibling);
  //第三个小li的下一个兄弟
  console.log(li.nextElementSibling);
</script>
</body>

3、增加节点

1）、创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

语法：

//创建一个心得元素节点
  document.createElement(`标签名`)

2）、追加节点

插入到父元素的最后一个子元素

语法：
父元素.appendChild（要插入的元素）

插入到父元素中某个子元素的前面：

语法：
父元素.insertBefore（要插入的元素，放在那个元素前面）
  //查找要插入的元素位置 使用父元素.children[下标] 进行查找

3）增加节点实例

<body>
<ul>
  <li>我是老大</li>
</ul>
<script>
  //1、创建一个新节点
  let li = document.createElement(`li`)
  li.innerHTML = `我是老二`//修改值
  //2、追加节点
      //2.1、获取ul
      let ul=document.querySelector(`ul`)
      //2.2、插入到末尾
      //ul.appendChild(li)
      ///2.3、插入到某一个元素前面，insertBefore（要插入的元素，放在那个元素前面）
        ul.insertBefore(li,ul.children[0])//ul.children[0]查子元素的第一个元素
</script>
</body>

4）、克隆节点

复制一个原有的节点
把复制的节点放入到指定的元素内部
语法：

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

注意：

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为fals

实例：

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <script>
    //1、获取到父节点
    let ul = document.querySelector(`ul`)
    //ul.children[0]//ul中的第一个元素
    let li = ul.children[0].cloneNode(true)
    //追加元素  （不带true的话只复制标签，而没有里面的值）
    ul.appendChild(li)
  </script>
</body>

4、删除节点

若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法：

父元素.removeChild(要删除的元素）
父元素.remove()  //删除全部元素

注：

如不存在父子关系则删除不成功

删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

查看全文

http://www.kler.cn/a/388753.html

NAT网络工作原理和NAT类型

代码 RNN原理及手写复现

「Mac玩转仓颉内测版7」入门篇7 - Cangjie控制结构（下）

基于迭代重加权最小二乘法的算法及例程

数据结构与算法-前缀和数组

【Vue】Vue3.0（二十一）Vue 3.0中的$event使用示例

第三百一十九节 Java线程教程 - Java线程中断

element-ui-plus给头像avatar增加头像框

红黑树的平衡之舞：数据结构中的优雅艺术

Linux进程信号（信号的产生）

你对安装在自己网站上的wordpress插件了解吗?

【C语言】浮点型数据存储和整型数据存储的区别

基于深度学习的路面裂缝检测算法matlab仿真

C#-运算符重载

Redis运行时的10大重要指标

1688拿货经验分享：亚马逊中小卖家如何选合作厂家

JS面试题之---解释一下什么是闭包？

【日常经验】RPC 调用的分类及示例

非关系型数据库NoSQL的类型与优缺点对比

API接口精准获取商品详情信息案例

【前端】Svelte：响应性声明

动态规划（二）——路径问题

Android13 系统/用户证书安装相关分析总结(三) 增加安装系统证书的接口遇到的问题和坑

VScode配置C、C++环境，编译并运行并调试

Java之List常见用法

VUE3实现好看的通用网站源码模板