前端学习-JavaScript & Dom

一.Dom结构

DOM：全称文档对象模型，是浏览器提供给 JavaScript 操作HTML文档的接口。
DOM可以将HTML文档转换成树形结构，树中的每个节点，也被称为 DOM 节点。

二.获取Dom

浏览器提供了很多中方法去获取DOM节点，现在最常用的方法有两种，如下：

方法名称	说明	入参	出参
document.querySelector	数据传入的选择器，返回第一个匹配的DOM节点	选择器	DOM节点对象
document.querySelectorAll	数据传入的选择器，返回所有匹配的DOM节点	选择器	以类数组的形式返回所有DOM节点对象

获取 Dom 的主要目的是获取 Dom 的属性，从而得知当前页面的数据和转态。
每个DOM 节点都有很多的属性，不同的DOM节点也会有一些差异的属性，常用属性如下：

• innerHTML：可获取到 DOM 节点包裹的 HTML 内容，以字符串的方式返回。

  const filter = document.querySelector('.class-name');
  filter.innerHTML;    //输出 .class-name 下的HTML内容

• textContext：可获取到 DOM 节点包裹的文本内容。

  const cn = document.querySelector('.class-name');
  cn.textContext;     //仅输出筛选框文字内容

• value：可获取到表单元素（Input）用户输入的值。

  const input = document.querySelector('input');
  input.value;    // 输出 input 框的值

• className：返回元素的类名。

  const name = document.querySelector('.class-name');
  name.className;    //输出 .class-name 的类名

三.修改 Dom

• 增加：可通过 dom.innerHTML = '' 方式设置对应 Dom 节点包裹的 HTML 内容，达到内容新增的目的。注意，innerHTML赋值会覆盖掉原来的内容。
• 删除：可通过 dom.remove() 来删除当前 Dom 节点。
• 修改：通过设置属性来更改 Dom 属性，比如 dom.className = ''，dom.value = ''。注意，会覆盖掉原来的类名。