Web API--DOM

Web API–DOM

DOM:

1. 为啥使用const的频率较高？

   const是声明常量时用到的关键字。它的语义化要比let、var都要好（const很稳定，一经确定就不会再变，用let的话，还是可以重新赋值的，所以在稳定性这方面，const就比let做得好）。在开发过程中，更倾向于用const，但是要修改值的情况下,请用let。

   建议：在开发时，若不确定变量是用const还是let，推荐先用const,后续发现该变量的值需要修改，再将const改为let.

   引用数据类型存储的是地址，而不是值，地址不变，就不会报错，推荐数组和对象（对象和数组均是引用数据类型）使用const来声明。

2. Web API是做什么用的？

   Web API的作用是使用js来操作html和浏览器。

3. WebAPI是由什么组成的？

   WebAPI分为DOM（文档对象模型）和BOM（浏览器对象模型）。

4. DOM是什么，它的作用是什么？

   DOM（文档对象模型）是用来呈现并与任意HTML或XML文档交互的API。

   简单来说，DOM是浏览器提供的用于操作网页内容。

   主要用途：开发网页特效和实现用户交互。

5. DOM如何操作网页内容？

   DOM的功能是浏览器赋予的，浏览器会根据html标签生成js对象。

   这样所有的标签都可以当作是js对象，要是修改js对象的属性，那么标签属性也会被修改。（即对象属性会自动映射到标签上）。

   DOM的核心思想就是将网页内容看作是对象来处理，对对象的操作实际就是对网页内容进行操作。

   操作网页内容的步骤：

   • 第一：获取DOM对象（网页元素）；
   • 第二：操作网页内容。

6. 如何获取DOM对象？

   获取DOM对象要选中一个标签（跟CSS选择器类似）才能够对它进行操作。

   document是DOM里提供的一个对象，该对象的属性和方法都是用于访问和操作网页内容的。网页内容都放在document中。

   选中匹配的第一个元素的语法：document.querySelector('css选择器')。

   • 注意：该方法的参数可以包含一个或多个有效的css选择器字符串
   • 返回值：css选择器匹配的第一个元素，若未匹配到则返回null。
   • 可以直接修改。

   （重点）获取多个DOM对象的语法：

   document.querySelectorAll('css选择器')

   • 注意：该方法的参数可以包含一个或多个有效的css选择器字符串
   • 返回值：css选择器匹配NodeList对象集合（NodeList类似数组但不具备数组方法的对象。），若未匹配到则返回null。
   • 不能直接修改，但可以利用遍历的方式一次给里面的元素做修改。
   • 注意：运用该语法得到的是一个伪数组（该数组有长度，有索引号，但是没有pop()，push()等数组方法），想获取里面的对象，得遍历才能获得。

   其他获取DOM对象得方法：

   document.getElementById('header')//通过id获取一个对象

   document.getElementsByTagName('nav')//通过标签获取一类标签，获取的是该页面中所有的nav

   document.getElementsByClassName('div')//通过类名获取对象 ，获取类名为div

7. 如何操作网页内容？

   前边提到操作网页内容的步骤分为获取对象，操作网页内容。所以说想要操作网页内容，必须得先获取对象后，才能选择操作内容。

   操作网页内容的语法为：

   1.对象.innerText(只能识别文本内容，注意：该对象是你获取到的对象)

   2.对象.innerHTML（既能识别文本内容，也能解析HTML标签）

   例如：const nav=document.querySelector('.nav') //选择的是含有类选择器.nav的标签元素

   console.log(nav.innerHTML)//获取标签内部的文字

   nav.innerHTML=`你好，很高兴认识你。`

8. 该如何操作标签属性？

   思路：先将该标签元素获取过来，然后再修改标签属性。

   标签常见属性有src,href等

   语法：对象.属性=值

   例如：

   const pic = document.querySelector('img')

   pic.src='路径'

9. 修改样式属性的方法有哪些？

   思路：同样是先将该标签元素获取过来，再修改样式属性。

   • 需要在对象的后面加上style(修改的属性样式较少时)

   常见的样式属性：width、height等

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

   例如：const box = document.querySelector(.box)

   box.style.width='100px'

   box.style.height='200px'

   • 借助css类名该修改属性样式（操作类名达到操作css样式属性的目的）

     语法：元素（对象）.className = 'nav' //nav为css类名

     缺点：用className实际是用新值换旧值，即新的类名会覆盖旧的类名,旧的类名就不会存在于元素的class属性。

   • 利用classList操作类控制CSS

     如果你想要保留旧的类名并添加新的类名，可以使用 classList 对象来实现。

     classList是为了解决className覆盖旧的类名的问题，通过classList方式追加和删除类名

     语法：对象.classList.add('类名') //追加一个类

     对象.classList.remove('类名')//移除一个类

     对象.classList.toggle('类名')//切换一个类

10. 如何修改表单元素的属性？

    思路：同样是先将该标签元素获取过来，再修改表单元素属性。

    常见的表单元素属性：value、type等。

    语法：对象. 表单元素属性=值

11. 什么是自定义属性？

    自定义属性是html5推出来的，能够定义自己想要的属性。

    自定义属性在标签上一律以data开头。如：自定义属性data-id。

    一律以dataset对象获取，注意！注意！注意！

12. 什么是定时器函数-间歇函数？

    定时器函数有两种，它的作用是能够根据间隔时间重复执行某段代码。

    有些时候我们需要每隔一段时间之后自动执行某一段代码，但不想手动去触发它，由此我们才需要定时器函数。

    它的语法（开启定时器）如下：

    setInterval(函数，间隔时间)

    注意：

    • 间隔时间的单位是毫秒；

    • 该函数返回的是一个id数字；

    • 函数名不加括号。

    例如：function add(){

    ​ alert('2')

    }

    setInterval(add,1000) //只写函数名，没有加括号，1秒后调用add函数

    关闭定时器的语法为：

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

    clearInterval(变量名)