01-获取DOM元素修改属性 - 前端凹凸曼

时间：2024-03-04 14:44:34

01-获取DOM元素修改属性

 

Web API 基本认知

核心目标

 

能够完成网页中对的js效果即可

重点：

  1. webAPI基本组成

  2. DOM, DOM数概念介绍

  3. 获取元素

  4. 设置/获取标签属性(标准属性,样式属性,表单属性)

  5. 定时器(间歇函数)

  6. 综合案例作用和分类

API概念

  1. 应用程序编程接口【方法（工具）】（预定义好的函数或者方法，函数是独立存在的，方法是属于一个对象的）

  2. 目的：不需要知道代码如何实现、工作细节，快速使用

  3. 特点：

    1. 任何开发语言都有自己的API；

    2. API的特征是输入和输出； var max = Math.max(1,2,3)

    3. API的使用方法（console.log(\'abc\')) 在控制台打印结果，不是输出内容

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

  5. 组成：

    1. ECMASCRIPT（js语法标准）

    2. DOM (文档对象模型)：document（文档，html文件） object（对象） model（模型）

      1. 在js中（Web API）将整个网页（html网页）封装成一个对象，该对象叫document

        ------------------------>操作网页

    3. BOM（浏览器对象模型）：Browser（文档，html文件） object（对象） model（模型）

      1. 在js中将整个浏览器封装成一个对象，该对象叫window

        ------------------------------------------------>操作网页操作浏览器

作用和分类

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

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

什么是DOM

  1. DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

  2. 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能

    1. 操作DOM，本质上就是在操作网页（html各种标签）

  3. DOM作用：开发网页内容特效和实现用户交互

DOM树

  1. DOM树是什么？

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

    2. 描述网页内容关系的名词

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

DOM对象【重要】

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

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

    2. 修改这个对象的属性会自动映射到标签身上

    3. DOM的核心思想：把网页内容当做对象来处理

    4. document 对象

      1. 是 DOM 里提供的一个对象

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

        1. 例：document.write()

      3. 网页所有内容都在document里面

获取页面的标签（获取DOM标签对象）

==查找元素DOM元素就是选择页面中标签元素==

DOM学习路径

  1. ==先获取页面的标签==------->给标签设置相关的样式属性--------->关键：如何获取页面的标签

获取页面的标签--根据CSS选择器

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

query 查询 Selector选择器

选择匹配的第一个元素

  1. 语法：var abc= document.querySelector(\'CSS选择器\');

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

  3. 返回值：

    1. CSS选择器匹配的第一个元素,一个 HTMLElement对象。

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

多参看文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

 

补充教师视频07

<body>
    <div>我是cdd</div>
    <p class="one" id=two>小兔子真可爱</p>
​
    <script>
        //代码演示--获取标签
        let a = document.querySelector(\'p\') //标签选择器
        console.log(a) //<p class="one" id="two">我喜欢小兔子</p>
​
        let b = document.querySelector(\'.one\') //类选择器
        console.log(b)
​
        let c = document.querySelector(\'#two\') //ID选择器
        console.dir(c)
​
        let d = document.querySelector(\'p\') //后代选择器
        console.dir(d)
        //获取返回值
    </script>
</body>

 

 

选择匹配的多个元素

  1. 语法：var abc= document.querySelectorAll(\'CSS选择器\');

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

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

    1. 例如：document.querySelectorAll(\'ul li\');

  4. 得到的是一个伪数组：

    1. 有长度有索引号的数组

    2. 但是没有 pop() push() 等数组方法

    3. 想要得到里面的每一个对象，则需要遍历（for）的方式获得。

    4. 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

案例

需求：请控制台依次输出 3个 li 的 DOM对象

<script>
​
</script>

 

 

 

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

显示隐藏一个div-----获取元素---获取指定div

 

根据id获取一个元素

语法：document.getElementById(\'\')

示例：document.getElementById(\'nav\')

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById

注意：返回一个匹配特定 ID的元素.

 

根据标签名字获取标签一类元素

语法：var abc= document.Element.tagName(\'标签名\')

示例：var abc= getElementByTagName(\'div\')

根据标签的name属性获取一类元素，获取页面所有的div

调用：

document.Element.tagName()

container.Element.tagName()

注意：

getElementByTagName() 获取到的集合是动态集合，获取到的是 ==数组== ，展开数组里面又是一个个对象。

 

根据类名获取元素

语法：var abc= getElementsByClassName(\'\')

示例：var abc= document.getElementsByClassName(\'w\')

根据类名获取元素 获取页面 所有类名为w

注意：浏览器兼容性 IE9以后才支持的

 

获取标签中的文字内容（非表单元素）

设置/修改DOM元素内容-----获取标签中的内容

<body>
    <div>我是div标签中的文字</div>
   <script>
      //代码演示--获取标签
         let res = document.querySelector(\'div\') //后代选择器
         //获得标签中的文字内容
         console.dir(res); //得到标签中的对象
         console.log(res.innerHTML) //获取文字
         console.log(res.innerText) //获取文字
   </script>
</body>

==获取一下页面标签---------->接收一下它---------------->获取一下标签文字内容==

 

能够修改元素的文本更换内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。 就是操作对象使用的点语法。 如果想要修改标签元素的里面的内容，则可以使用如下几种方式： 学习路径： document.write() 方法 对象.innerText 属性 对象.innerHTML 属性

document.write() 方法

只能将文本内容追加到 </body> 前面的位置 文本中包含的标签会被解析

<script>
    document.write(\'hello world\');
    document.write(\'<h3>你好，世界</h3>\')
</script>

 

对象.innerText 属性

将文本内容添加/更新到任意标签位置 文本中包含的标签不会被解析

<script>
    let info=document.getElementById(\'info\');
    info.innerText=(\'<h3>你好，世界</h3>\')   //你好，世界
</script>

 

对象.innerHTML 属性

将文本内容添加/更新到任意标签位置 文本中包含的标签会被解析

<script>
    box.innerHTML=(\'<h3>你好，世界</h3>\');  //<h3>你好，世界</h3>
</script>

innerText 跟innerHTML获取标签中文字的区别

  1. 如果标签中==只包含纯文字==,那么通过innerHTML 和 innerText得到的结果是一样

  2. 如果标签中==包含其他标签==,那么innerHTML获取内容的时候,==包含了标签==.innerText只获取==纯文本==

三者的区别是什么？

  1. document.write() 方法 只能追加到body中

  2. 元素.innerText 属性 只识别内容，不能解析标签

  3. 元素.innerHTML 属性 能够解析标签

  4. 如果还在纠结到底用谁，你可以选择innerHTML

 

打印4个div中的值

<body>
    <div>狮子</div>
    <div>猴子</div>
    <div>兔子</div>
    <div>老牛</div>
    <script>
        //获取一下页面4个标签-----接收一下它------获取一下标签文字内容
        //将每一个人div中的文字输出到控制台中
        let res = document.querySelectorAll(\'div\') //此时res是一个数组！！
        for(let i=0;i<res.length;i++){
            console.log(res[i].innerText)
        }
     </script>
</body>

 

给标签设置文字内容

 

 

总结：给标签设置内容

  1. 标签对象.innerHTML =值;

  2. 标签对象.innerText =值;

 

innerHTML 和innerText给标签赋值时候的区别:

  1. 如果给标签只赋值==纯文本,没有区别==

  2. 如果通过innerHTML给表设置内容,如果内容中包含标签,将该标签在网页中==渲染成对应的标签==

  3. 如果通过innerText给表设置内容,如果内容中包含标签,==不会渲染标签==,

<body>
    <div></div>
    <script>
        //通过js的方式给标签设置文字内容
        // 1、先获取div
        let res = document.querySelector(\'div\')
​
        //2、给对象赋值
        res.innerText = \'阿里巴巴\'
        res.innerHTML = \'阿里巴巴\'
      
    </script>
</body>

 

 

案例

需求：随机抽取的名字显示到指定的标签内部，将名字放入span 盒子内部

 

分析： ①：获取span 元素 ②：得到随机的名字 ③：通过innerText 或者 innerHTML 讲名字写入元素内部

编程思维：

  1. 在网页中准备一个html标签，添加样式；

  2. 在程序中准备一个数组，保存的就是学生姓名

  3. 生成一个随机数

  4. 从数组中取值

  5. 将名字赋值给div

  6. 给div标签对象赋值

        <style>
            div {
                width: 300px;
                height: 50px;
                border: 1px solid #000;
            }
        </style>
    </head>
    ​
    <body>
        今天中午吃什么<div></div>
        <script>
            //1. 在网页中准备一个html标签，添加样式；
            //2. 在程序中准备一个数组，保存的就是学生姓名
            let ary = [\'老苏\', \'老段\', \'pink\', \'秋姐\', \'刀哥\', \'老汤\', \'老狗\'];
            //3. 生成一个随机数,保存一下这个随机数
            let a = Math.floor(Math.random() * (ary.length - 1 - 0 + 1) + 0)
            //4. 从数组中取值---序号等于随机数，找到具体的名字
            let b = ary[a]
            //5. 将名字赋值给div----找到html标签位置
            let res = document.querySelector(\'div\')
            //6. 给div标签对象赋值---人->位置
            res.innerText = b
        </script>
    </body>

 

 

 

 

 

 

 

设置/修改DOM元素属性

==看视频15补充==

通过js操作图片标签 核心：操作图片的src属性 何获取图片标签的src属性？

图片

<body>
    <img src="./images(1)/1.webp" alt="">
​
    <script>
        let a = document.querySelector(\'img\')
        console.log(img.src)
        img.src = "./images(1)/2.webp"
    </script>
</body>

 

设置/修改元素常用属性

  1. 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片

  2. 最常见的属性比如： href、title、src 等

  3. 语法： 对象.属性=值

  4. 案例1

<script>
//1、获取元素
    let pic=document.querySelector(\'img\')
    //2、操作元素
    pic.src=\'./images/b02.jpg\'
    pic.title=\'这是一个图片\'
</script>

 

  1. 案例2

    页面刷新，图片随机更换

    需求：当我们刷新页面，页面中的图片随机显示不同的图片

    分析：

    ①：随机显示，则需要用到随机函数 ​ ②：更换图片需要用到图片的 src 属性，进行修改 ​ ③：核心思路： ​ 1. 获取图片元素 ​ 2. 随机得到图片序号 ​ 3. 图片.src = 图片随机路径

<script>
<body>
    <img src="./images(1)/1.webp" alt="">

    <script>
            //随机切换图片
            //1准备一个数组,数组里面保存所有的图片路径
            let ary = [\'./images(1)/1.webp\', \'./images(1)/2.webp\', \'./images(1)/3.webp\', \'./images(1)/4.webp\',\'./images(1)/5.webp\', \'./images(1)/6.webp\']
            //2.产生一个随机数(整数)
            let i = Math.floor(Math.random() * (ary.length - 1 - 0 + 1) + 0)
            //3．从数组中将路径随机获取出来
            let img_src = ary[i]
            //4、将图片路径赋值给图片标签
            let res = document.querySelector(\'img\')  //来个容器，接一下图片img
            res.src = img_src    //容器地址=随机地址
    </script>
</body>
</script>

 

 

操作标签样式---设置/修改元素样式属性

给标签设置样式（CSS)

  • 行内式：

  • 内嵌式：

  • 外联式：

还可以通过 JS 设置/修改标签元素的样式属性。

  1. 比如通过 轮播图小圆点自动更换颜色样式

  2. 点击按钮可以滚动图片，这是移动的图片的位置 left 等等

 

通过Js给标签设置样式--2种方式

行内式：

 

通过js给标签设置样式

通过 style 属性操作CSS

==行内式==：

  1. ==语法==： 标签对象.style.CSS样式属性 = 值

  2. 举例

    image-20211020153412245

    <body>
        <!-- <img src="./images(1)/1.webp" alt=""> -->
        <div>通过js给标签设置样式</div>

        <script>
            let div = document.querySelector(\'div\')
            div.style.width = \'200px\';
            div.style.height = \'200px\';
            div.style.color = \'#fff\';
            div.style.backgroundColor = \'#456789\';
            div.style.textAlign = \'center\'
            div.style.lineHeight = \'200px\'
        </script>
    </body>

  1. 注意：

    1. 修改样式通过style属性引出

    2. 如果属性有-连接符，需要转换为小驼峰命名法

    3. 赋值的时候，需要的时候不要忘记加css单位

    4. ==一定要记得等号后面的‘ ’==

 

4.案例：

需求：当我们刷新页面，页面中的背景图片随机显示不同的图片

分析： ​ ①： 随机函数 ​ ②： css页面背景图片 background-image ​ ③： 标签选择body， 因为body是唯一的标签，可以直接写 document.body.style

 

通过类名(className)给标签设置样式

image-20211020162640548

 

image-20211020162453682

 

image-20211020162750994

 

<style>
    .box {
        width: 200px;
        height: 200px;
        
    }
    .bd {
        border-radius: 50%;
    }
</style>

</head>
<body>
    <div></div>
    <script>
        let div = document.querySelector(\'div\')
        div.className = \'box bd\'
    </script>
</body>

 

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

  2. 语法： 标签对象.className=\'active\'

  3. 注意：

    1. 由于class是关键字, 所以使用className去代替

    2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

 

通过classList 方式添加类名

【知识点15】

 

通过 classList 操作类控制CSS

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

  2. 语法：

    1. ==追加一个类== 元素.classList.add(\'类名\')

       

      image-20211020165451382

       

    2. ==删除一个类== 元素.classList.remove(\'类名\',\'类名\')

    3.  

 

  1. ==切换一个类== 元素.classList.toggle(\'类名\') 电源开关

    image-20211020162640548

     

 

使用 className 和classList的区别？

  1. 修改大量样式的更方便

  2. 修改不多样式的时候方便

  3. classList 是追加和删除不影响以前类名

    image-20211020172508087

 

设置/修改 表单元素 属性

  1. 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

  2. 正常的有属性有取值的 跟其他的标签属性没有任何区别

    1. 获取: DOM对象.属性名

    2. 设置: DOM对象.属性名 = 新值

      表单.value=\'用户名\'

      表单.type=\'password\'

  3. 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 ==如果为true 代表添加了该属性== 如果是false 代表移除了该属性

    1. 比如： disabled、checked、selected

      image-20211020173640326

      image-20211020174134006

image-20211020174301677

 

 

<body>
    <input type="text" value="请输入文字">
    <script>
        let text = document.querySelector(\'input\');
        text.value = \'你好啊\'
    </script>
</body>

 

定时器-间歇函数

定时器函数介绍

  1. 使用场景

    1. 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发

    2. 例如：网页中的倒计时

    3. 要实现这种需求，需要定时器函数

    4. 定时器函数有两种，今天我先讲间歇函数

定时器函数基本使用

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

  1. 开启定时器

    1. 语法： setInterval(函数,间隔时间)

    2. 作用：每隔一段时间调用这个函数

    3. 间隔时间单位是==毫秒==

    4. 注意：函数名字不需要加括号，定时器返回的是一个id数字

    5. 举例

      <body>
          <script>
              function fn() {
                  console.log(\'删库跑路\')
              }
              setInterval(fn, 1000)   //337   删库跑路
          </script>
      </body>

       

      <script>
           function repeat(){
                  console.log(\'前端程序员都是好样的\')
              }
           //每隔1秒调用repeat函数
           setInterval(repeat,1000)   //setInterval(函数,间隔时间)
      </script>

  1. 关闭定时器

    image-20211020183043506

    1. 语法：

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

    2. 一般不会刚创建就停止，而是满足一定条件再停止

    3. 注意：函数名字不需要加括号，定时器返回的是一个id数字

 

案例：倒计时效果

补充

 

  1. 需求：按钮60秒之后才可以使用

  2. 分析： ①：开始先把按钮禁用（disabled 属性） ②：一定要获取元素 ③：函数内处理逻辑

    1. 秒数开始减减

    2. 按钮里面的文字跟着一起变化

    3. 如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击

<script>

</script>

 

 

综合案例：网页轮播图效果

  1. 需求：每隔一秒钟切换一个图片

  2. 分析： ①：获取元素（图片和文字） ②：设置定时器函数 设置一个变量++ 更改图片张数 更改文字信息 ③：处理图片自动复原从头播放 如果图片播放到最后一张就是第9张 则把变量重置为0 注意逻辑代码写到图片和文字变化的前面

<script>

</script>

 

相关文章