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

大学生小郑

已于 2024-07-13 14:40:28 修改

阅读量946

点赞数 28

分类专栏：零基础学JS 文章标签：前端 javascript

于 2024-07-08 00:07:09 首次发布

本文链接：https://blog.csdn.net/m0_74948742/article/details/140245352

版权

零基础学JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

喝下这碗鸡汤

心中有目标，脚步有力量，奋斗不止，实现梦想。

1.DOM树和DOM对象

1.1 作用和分类

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

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

1.2 什么是DOM？

DOM(Document Object Model--文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文: DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用：开发网页内容特效和实现用户交互

1.3 什么是DOM树？

DOM树是什么

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用:文档树直观的体现了标签与标签之间的关系

1.4 DOM对象（重要）

DOM对象:

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

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

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

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

document 对象
是 DOM 里提供的一个对象

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

例:document.write()

网页所有内容都在document里面

2. 获取DOM元素

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

1.选择匹配的第一个元素语法:

document.querySelector('css选择器')

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

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

document.querySelectorAll('css选择器')

得到的是一个伪数组
有长度有索引号的数组
但是没有 pop() push()等数组方法想要得到里面的每一个对象，则需要遍历(for)的方式获得

3. DOM修改元素内容

3.1 元素innerText 属性

将文本内容添加/更新到任意标签位置显示纯文本，不解析标签


<body>

    <div class="box">我是帅哥</div>

    <script>

        const box = document.querySelector('.box')
        console.log(box.innerText)
        box.innerText = '<strong>我是帅哥小郑</strong>' // 不解析标签
    </script>


</body>

3.2 元素.innerHTML属性

将文本内容添加/更新到任意标签位置会解析标签，多标签建议使用模板字符

   const box = document.querySelector('.box')
        console.log(box.innerHTML)
        box.innerHTML = '我要修改'

3.3 操作元素样式属性

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

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

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

3.4 通过style 修改样式属性

3.5 操作类名(className)操作CSS

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

语法:


// active 是一个css类名

元素.className ='active'

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

<style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink
    }

    .nav {
      color: blue;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      margin: 100px auto;
      padding: 10px;
    }
  </style>
</head>


<body>

  <div class="nav">12</div>
  <script>
    const div = document.querySelector('div')
    div.className = 'nav box'
  </script>
</body>

3.6通过 classList 操作类控制CSS

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

//追加一个类
元素.classList.add('类名')

//删除一个类
元素.classList.remove('类名')

//切换一个类
元素.classList.taggle('类名') //有就切换 没有就加

4. 定时器间隙函数

setInterval(函数，间隔时间)

它返回一个 interval ID，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 clearInterval() 来移除定时器。

注意：

函数名字 不需要加括号

定时器返回的是一个id数字

  <script>
    function show() {
      console.log('hello world')
    }

    let timer = setInterval(show, 1000)

    //清除定时器
    clearInterval(timer)

  </script>

5. 用户注册倒计时

<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(6)</button>

    <script>
        //1. 获取元素button
        let btn = document.querySelector('.btn')

        let i = 6

        //2.开启定时器 间歇函数 
        let timer = setInterval(function () {
            i--
            btn.innerHTML = `我已经阅读用户协议${i}`
            if (i === 0) {
                clearInterval(timer)
                //开启按钮
                btn.disabled = false
                //更换文字
                btn.innerHTML = '我同意该协议啦'
            }
        }, 1000)
    </script>

</body>