webapi的含义 :webapi=DOM+BOM 一套操作网页内容+浏览器窗口的 函数

DOM工作原理

1. 代码从硬盘 读取到 内存 （代码）
2. 生成DOM树 * 修改了dom树，最终渲染的页面也会改变
3. 渲染引擎开始渲染dom树 （页面）

查询

1.元素

获取单个元素

• 语法： document.querySelector('选择器')

获取多个元素

• 语法 : document.querySelectorAll('选择器')

两者区别:

• querySelector() : 获取满足条件的第一个元素,得到dom对象, 可以直接使用dom语法修改,如果选择器不存在,则获取null

• querySelectorAll() : 获取满足条件的所有元素,得到的一定是伪数组 （有三要素下标、元素、长度。 但是没有数组方法 ）, 不可以直接使用dom语法。 需要通过下标先取出里面的dom对象,如果选择器不存在,则获取 空数组

2.属性

内容属性

• 元素.innerText :获取元素的文本,无法解析字符串中的标签

• 元素.innerHTML :获取元素的文本+标签,可以解析字符串中的标签

HTML属性

• 语法:元素.属性名

• 改图片:img.src 改链接:a.href

CSS属性

• 修改单个样式： 元素.style.样式名 = 样式值 (行内样式权重最高)

• 修改多个样式： 元素.className = '类名' (注意:会覆盖原来的类名,不常用)

• 修改多个样式： 元素.classList

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

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

  • 切换类名 ： 元素.classList.toggle('类名') * 切换： 有则移除，无则新增

  • 判断类名 ： 元素.classList.contains('类名') * true:有类名 false:没有

• 注意点： 如果css属性有- 的需要转成小驼峰命名 (原因：js命名规范与css命名规范不一样)

  小驼峰： (1)去掉- (2)-后面首字母大写

表单属性

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

• 表单状态 : 布尔类型属性

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

3.节点

查询

• 子元素 : 父元素.children

• 父元素 : 元素.parentNode

• 兄弟元素 : 上一个元素:元素.previousElementSibling

下一个元素:元素.nextElementSibling

新增

• 创建新标签

  • 语法: 在内存创建空标签： let 标签 =document.createElement('标签名')

• 设置标签内容

  • 语法:标签.属性

• 添加到页面DOM

  • 新增到最后面： 父元素.appendChild(元素)

  • 新增到元素前面 : 父元素.insertBefore(要新增的元素,哪一个元素前面)

删除

• 父元素.removeChild(子元素)

克隆

• 元素.cloneNode(true) 深克隆,后代元素一起克隆

• 元素.cloneNode(false) 浅克隆,仅克隆自己本身