DOM简单介绍&DOM对象+定时器间歇函数开关

不要图透
191 阅读7分钟

DOM

DOM简单说明：

介绍：

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API； 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能。

原因：

js不能直接操作页面内容，就需要一个东西能让js操作到页面内容，这个东西就是DOM。

作用：

使js能控制页面内容，开发网页内容特效和实现用户交互

原理：

浏览器会自动的为标签生成一个对象(DOM对象)，js通过DOM功能，可以拿到这个对象，然后用操作对象的形式操作标签对象也就是操作标签，从而达到操作页面内容的功能。

DOM的核心思想

把网页内容当做对象来处理。

##############################################

DOM树

介绍：

将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树。描述网页内容关系的名词。

作用：

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

效果如下：

image-20220409095504746

image-20220409095600184

##############################################

DOM对象

介绍：

浏览器根据html标签生成的 JS对象；所有的标签属性都可以在这个对象上面找到；修改这个对象的属性会自动映射到标签身上。

document对象

介绍：

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

  2. 老师的解释：document理解成JS单独针对DOM所封装的一个大大管家；大管家里面有很多工具，可以辅助我们写操作页面标签的代码，如：

    document.addEventListener( ）、document.querySelector( )；

  3. document 对象表示文档本身， table 对象实现了特定的 HTMLTableElement DOM 接口来访问HTML 表格等；

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

原因：

比如：浏览器虽然可以为标签生成一个对象，但是js没办法直接拿过来用，所以就需要一个东西可以把这些对象拿过来拿到js这里来。这个东西就是document。

作用：

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

############################################

获取DOM对象

提问：我们想要操作某个标签首先做什么？ 肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作； 查找元素DOM元素就是选择页面中标签元素

语法：

1、document.querySelector('css选择器')
特点：

只能匹配一个元素；当多个元素满足css选择器时，他只能选到第一个元素。

可以直接对选出来的对象做修改等操作。

返回值：

CSS选择器匹配的第一个元素，即一个 HTMLElement对象。 如果没有匹配到，则返回null。

例子：

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    
    <script>

        // 获取dom元素p
        let p = document.querySelector('p')//选择到第一个元素，变量p为一个对象。
    </script>
</body>
2、document.querySelectorAll('css选择器')
特点：

可以选择到满足css选择器的所有元素。

不能直接对选出来的对象集做操作，需要通过遍历的方式，挑选出来单个对象，然后再进行操作。

返回值：

CSS选择器匹配的NodeList 对象集合；通俗的说：也就是把满足条件的元素对象全选出来，组成一个伪数组。

例子：

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>

    <script>

        // 获取dom元素p
        let p = document.querySelectorAll('p')//选择到所有p元素，变量p为一个伪数组
    </script>
</body>
注意：

如果选择器没有找到对应的元素，则变量p为{}。

3、早期选择器
1、document.getElementById('id名')

根据id获取一个dom元素。

2、document.getElementsByTagName('标签名')

根据标签名获取一类dom元素。

3、document.getElementsByClassName('类名')

根据类名获取一类dom元素。

注意：

选择器必须是字符串，也就是必须加引号。

##############################################

设置修改DOM元素（修改DOM元素内容属性为例）

前言：

DOM对象都是根据标签生成的,所以操作DOM对象,本质上就是操作标签。

介绍：

获取到DOM元素，我们就能在js里通过js修改对象属性一样，修改标签样式或属性。

语法：

对象.属性='属性值'

注意：

有些属性在标签中是添加就有效果的，比如表单属性中的disabled、checked、selected，那么在js中我们一律用布尔值表示，如果为true 代表添加了该属性 ，如果是false 代表移除了该属性。如

image-20220410222740864

例子：设置修改DOM元素内容属性

介绍：

我们可以通过innerText属性或innerHTML属性对标签内容进行修改。

语法：
1、对象.innerText='内容'

例：

<body>
    <span>我是原文</span>

    <script>

        // 获取dom元素span
        let span = document.querySelector('span')
        // 修改span标签内容
        span.innerText = '我是更新后的文字'
    </script>
</body>

内容更新前：image-20220409151211552

内容更新后：image-20220409151250362

2、对象.innerHTML='内容'

例：

<body>
    <span>我是原文</span>
    <script>

        // 获取dom元素span
        let span = document.querySelector('span')
        // 修改span标签内容
        span.innerHTML = '我是更新后的文字'
    </script>
</body>

效果和第一种语法一样。

3、第一种语法和第二种语法的区别

1、更新标签内容时：

  1. 第一种语法是更新的内容中包含的标签不会被解析，原样输入给标签；
  2. 第二种语法是更新的内容中包含的标签会被解析。

例：

<body>
    <span class="span1"></span>
    <span class="span2"></span>
    <script>

        // 获取dom元素span
        let span1 = document.querySelector('.span1')
        // 设置span标签内容,并且加上标签
        span1.innerHTML = '<h2>我是innerHTML</h2>'



        // 获取dom元素span
        let span2 = document.querySelector('.span2')
        // 设置span标签内容,并且加上标签
        span2.innerText = '<h2>我是innerText</h2>'

    </script>
</body>

效果：image-20220409152934901

2、获取标签内容时：

  1. 第一种语法在获取标签内容时，假如获取的内容里包含标签，innerText不会获取标签，只会获取里面的文本；
  2. 第二种语法在获取标签内容时，假如获取的内容里包含标签，innerHTML会把标签原样获取。

例如：

<body>
    <div class="div1">
        <h2>我是innerHTML</h2>
    </div>


    <div class="div2">
        <h2>我是innerText</h2>
    </div>


    <script>

        // 获取dom元素div1
        let div1 = document.querySelector('.div1')
        // 利用innerHTML获取div1内容
        console.log(div1.innerHTML)




        // 获取dom元素div2
        let div2 = document.querySelector('.div2')
        // 利用innerText获取div2内容
        console.log(div2.innerText)

    </script>
</body>

网页内容区域：image-20220409153957753

控制台区域：image-20220409154011658

注意：

innerText和innerHTML只能修改和获取双标签的文本内容，而不能修改和获取单标签的文本内容；比如表单元素，表单元素可以通过value来修改文本内容。

特别指出：

1、修改标签样式

自己解释：

因为样式不是对象的直接属性，所以我们也不能用上面修改文本的方式修改它；

但是我们知道样式是dom对象属性style里的属性，所以我们可以先选择到对象属性style，然后再选择到style属性，再对它更新属性值，就可以达到修改元素样式的要求。如：

div.style.paddingLeft= "20px"
语法：

对象.属性(style).样式属性='样式属性值'

例如：

<body>
    <span>我天，又来疫情</span>

    <script>

        // 获取dom元素span
        let span = document.querySelector('span')
        // 修改span标签文字颜色
        span.style.color = 'green'
    </script>
</body>

修改前：image-20220409163024052

修改后：image-20220409163039010

注意：
  1. 修改样式通过style属性引出；
  2. 如果属性有-连接符，需要转换为小驼峰命名法；
  3. 赋值的时候，需要的时候不要忘记加css单位。
2、修改类名
介绍：

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

语法：
1、对象.className='类名'

---特点： 会把前面设置的类名全部给覆盖掉，简单来说只有这一个类名.

例子：

<body>
    <div class="aa"> </div>

    <script>

        // 获取div对象
        let div = document.querySelector('div')

        // 修改div类名，会覆盖已有类名
        div.className = 'bb'
    </script>
</body>

修改前：image-20220410221127731

修改后：image-20220410221155596

2.1、对象.classList.add('类名')

---特点： 追加一个类，如果前面有这个类名，则会覆盖它；不会覆盖掉前面其他的类。

例子：

<body>
    <div class="aa"> </div>

    <script>

        // 获取div对象
        let div = document.querySelector('div')

        // 修改div类名，不会覆盖已有类名
        div.classList.add('bb')
    </script>
</body>

修改前：image-20220410221413737

修改后：image-20220410221431088

2.2、对象.classList.remove('已有类名')

---特点： 删除一个类，不会影响前面其他的类

2.3、对象.classList.toggle('类名')

---特点： 切换一个类，如果已经有这个类名，则表示删除；前面没有这个类名，则表示追加，不会覆盖掉前面其他的类。

##############################################

定时器-间歇函数

开启定时器

前言：

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

介绍：

每隔一段时间就执行指定函数的技术。

语法&作用：

setInterval(函数，间隔时间)----间隔时间单位是毫秒。

作用： 每隔一段时间执行这个函数。

使用方法：

image-20220410223724314

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

##############################################

关闭定时器

前言：

人们会经常用到定时器，但是也不一定会让他一直运行下去；然而我们开启了定时器，它是不会自动停止的，都需要我们手动配置，然后才会关闭。

介绍：

用来关闭定时器的技术。

语法：

clearInterval(变量名)；

原理：

我们每开启一个定时器，定时器就会有一个返回值id，我们正是利用这个id来准确关闭定时器的。

使用方法：

image-20220410224706396

总结

我的思维导图[第一天的内容]

avatar
文章
阅读
粉丝