简介:webAPI主要是对javascript中的DOM(document object model:操作(增删改查)网页内容)和BOM(操作浏览器窗口)进行学习.

DOM工作原理

修改内存中的dom树结构,最终页面渲染也会发生变化. 1.代码从硬盘读取到内容(代码) 2.生成dom树(dom树相当于页面中所有的标签内容) 3.渲染引擎开始渲染dom树(页面)

下面开始进入代码内容部分

请记住,第一步一定要先获取元素,也就是查找页面元素,才能进行后面的操作.

1.查找页面元素

(1)获取单个元素: document.querySelector('选择器')

(2)获取多个元素: document.querySelectorAll('选择器')

***请注意区别:查找单个元素只能找到满足条件的第一个元素,查找多个元素可以找到满足条件的所有元素. 并且查找单个元素返回的值是dom对象,可以使用dom点语法,但是获取多个元素返回值是伪数组,不可以使用dom点语法,必须要先将下标取出dom对象才可以使用dom点语法.

2.元素内容操作

元素.innerText :获取元素文本

元素.innerHTML : 获取元素文本+标签

***请注意区别:innerText无法解析字符串中的html标签,但是innerHTML可以解析字符串中的html标签

// 获取元素
let box = document.querySelector('.box')
        //1.元素.innerText
        console.log(box.innerText)
        //2.元素.innerHTML
        console.log(box.innerHTML)

3.元素属性操作

元素属性言简意赅就是a标签里的href属性,img标签里的src属性等.

元素.属性名

例如: a.href='网址'

4.元素style操作样式

***请先注意,由于css的命名规则与js命名规则是不一样的,所有要记住样式的区别哦,如css中 font- border- 等,在js中需要转换成小驼峰命名,首先去掉 - ,然后 - 后面的首字母大写

1.修改单个样式(行内权重)

 元素.style.样式名 = 样式值

2.修改多个样式(类名权重,该方式了解即可,使用较少)

 元素.className = '类名'

3.修改多个样式(类名权重)

新增类名：元素.classList.add('类名')

移除类名：元素.classList.remove('类名')

切换类名：元素.classList.toggle('类名')

      * 切换:有则移除,无则新增

判断类名: 元素.classList.contains('类名')

      * true:有这个类名 ; false:没有这个类名

5.表单元素常用属性

1.表单内容 : 表单元素.value

2.表单状态 :

        元素.disabled : 是否禁用
        
        元素.checked :  是否选中(radio和checkbox)
        
        元素.selected : 是否选中(option)

6.事件及注册事件

1.交互功能 : 什么元素在什么时刻做什么事情

2.事件三要素

      事件源 : 什么元素
      事件类型 : 什么时刻
      事件处理函数 : 做什么事

3.注册事件：给元素添加交互

      事件源.事件类型 = 事件处理函数

4.事件原理及注意点 (1)事件处理函数在注册的时候不会执行. (函数在声明的时候不会执行) (2)事件处理函数只有两种情况可以执行第一种：用户主动触发交互，浏览器会捕捉交互，底层会自动帮我们调用对象的方法第二种：手动调用对象事件处理函数

       鼠标事件类型 
       onclick  点击
       ondblclick 双击
       onmouseenter 移入
       onmouseleave 移除

webAPI中DOM工作原理