蓝旭工作室2022第六次讨论班DOM

一，什么是DOM

dom是文档对象模型，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。 在这个文档对象里，所有的元素呈现出一种层次结构，就是说除了顶级元素html外，其他所有元素都被包含在另外的元素中。

文档对象模型就是基于这样的文档视图结构的一种模型所有的html页面都逃不开这个模型，也可以把它称为节点树更为准确。

DOM的具体表现：DOM 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

二，获取元素

• document.getElementById();
  参数为大小写敏感的字符串，返回的是一个元素对象。
• document.getElementsByTagName();
  取过来是元素对象的集合，以伪数组的形式存储,顺序是它们在文档中的顺序。操作数据时需要按照操作数组的方法进行。（注意：getElementsByTagName 方法内部获取的元素是动态增加的）
• document.getElementsByName();
  一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
• document.getElementsByClassName();
  返回文档中所有指定类名的元素集合，作为 NodeList 对象。
  NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
• document.querySelector();document.querySelectorAll();
  调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素。而querySelectorAll 方法，通过 css 中的选择器去选取所有符合条件的标签元素集合（伪数组）。

三，事件

• 事件源：给谁绑定事件
• 事件类型：绑定什么类型的事件 （例：click 单击 ，按下鼠标任意键等）
• 常用事件监听方法
  （1）绑定 HTML 元素属性。
  （2）绑定 DOM 对象属性。
• 常用的鼠标事件类型
  onclick 鼠标左键单击触发
  ondbclick 鼠标左键双击触发
  onmousedown 鼠标按键按下触发
  onmouseup 鼠标按键放开时触发
  onmousemove 鼠标在元素上移动触发
  onmouseover 鼠标移动到元素上触发
  onmouseout 鼠标移出元素边界触发
  onfocus 获得鼠标焦点触发
  onblur 失去鼠标焦点触发
• 其它事件类型
  onload onunload 事件：当用户进入或离开页面时，会触发 onload 和 onunload 事件。
  onchange 事件：常用于输入字段的验证。

事件冒泡与事件捕获

obj.addEventListener(event, function, useCapture)

type事件类型，function事件处理函数，useCapture是否在捕获或冒泡阶段执行(true or false)
ie9以下不支持，一次可以绑定多个事件处理函数
事件流
当一个DOM事件被触发时，经历一下三个阶段

• 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
• 目标阶段：到达目标事件位置（事发地），触发事件；
• 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

事件冒泡
当父子元素绑定同一事件类型时，子级元素先触发，父级元素后触发（自底向上）
focus,change, reset, select, submit, blur不冒泡
取消冒泡：
event.stopPropagation() w3c规范，ie9以下不支持
event.cancelBubble = true ie独有

事件捕获
当父子元素绑定同一事件类型时，父级元素先触发，子级元素后触发（自顶向下）
ie没有事件捕获

四，DOM 元素属性操作

1. 获取，更改标签内容
   element.innerText = ();element.innerHTML = ();
   element.innerHTML包含html标签，而element.innerText 只包含文本内容。

2. 非表单元素的属性
   例如：href、title、id、src 等。
   给元素属性赋值,等号右侧的赋值都是字符串格式。
   element.href=“…”

3. 表单元素属性
   例如：value,disabled等

4. 自定义属性
   element.getAttribute(‘属性’)；
   element.setAttribute(‘属性’, ‘值’);
   element.removeAttribute(‘属性’);

5. style 样式属性操作
   （样式修改比较少或功能简单时使用）
   eg:element.style.width

五，节点操作

我们常用的节点标签：

• 元素节点（标签）
• 文本节点
• 属性节点（标签里的属性）

节点分类：

1. 父级节点element.parentNode;
2. 子节点
   所有节点element.childNodes
   只获得元素节点element.children
   获取第一个或者最后一个节点
   parentnode.firstChild；
   parentnode.lastChild;
   获取第一个或者最后一个元素节点（IE9以上支持）
   parentnode.firstElementChild；
   parentnode.lastElementChild;
3. 兄弟节点
   下一个兄弟节点 node.nextSibling;
   上一个兄弟节点node.previousSibling;
   下一个兄弟元素节点 node.nextElementSibling;
   上一个兄弟元素节点node.previousElementSibling;

DOM 结构操作：

• 新增/插入节点
  document.createElement(‘li’);
  父.appendChild(子);
  node.insertBefore(孩子，指定元素);
• 获取子元素列表，获取父元素
  element.parentNode;
  element.childNodes
• 删除子元素
  父.removeChild(子);