前端JS基础知识复习笔记（10）---DOM操作

JS的三部分组成：
* ECMAScript 3 / 6
* DOM：document object model 文档对象模型（提供一系列的属性和方法，让我们能操作页面中的DOM元素->简单理解为操作页面中的HTML标签）
* BOM
*
* 获取DOM元素
* document.getElementById([ID]) 基于元素的ID获取到这个元素（一个元素对象）
* document.body 获取页面中的BODY元素
* document.getElementsByTagName([标签名]) 根据标签名获取到页面中（指定容器中）所有的元素标签集合 （一组元素集合）
*/
//=>基于JS获取到的DOM元素是“对象数据类型”值，里面包含很多浏览器自带的，用来操作元素的键值对

JS中常用的DOM操作

DOM：document object model 文档对象模型（提供一系列的属性和方法，供我们获取和操作DOM元素）

1.获取DOM的方式

• document.getElementById([元素的ID])：在整个文档中，根据元素的ID，获得这个元素对象
  • document是获取元素的上下文（获取元素的范围），getElementById方法的上下文只能是document
  • 获取到的结果是一个对象（堆内存：里面存储着很多内置的属性和方法）
• [context].getElementsByTagName([标签名])：在指定的上下文中，基于元素的标签名获取一组元素集合
  • 获取的结果是HTMLCollection元素集合
• [context].getElementsByClassName([样式类名])：在指定上下文中，基于样式类名获取对应的元素集合
  • 不兼容IE6~8低版本浏览器
• document.getElementsByName([NAME属性值])：根据元素的NAME属性值，在整个文档中获取一组元素集合
  • 在IE浏览器中（9及以下）只对表单元素作用
• document.documentElement：获取整个HTML元素对象（HTML是页面的根节点）
• document.body：获取整个BODY元素对象
• document.head：获取整个HEAD元素对象

不兼容IE6~8低版本浏览器，可以根据选择器（类似于CSS选择器）快速获取元素和元素集合的办法：

• [context].querySelector([SELECTOR]) 获取一个元素对象
• [context].querySelectorAll([SELECTOR]) 获取一组元素集合
  在不考虑兼容的情况下，这两个方法就足以获取我们需要的元素对象和元素集合了

2.获取DOM节点的属性和方法

我们认为在页面中所有呈现的内容，都是DOM文档中的一个节点（node），例如：元素标签是元素节点、注释的内容是注释节点、文本内容是文本节点、document是文档节点…

3.关于DOM元素中的增加/删除/修改

• document.createElement([标签名])：动态创建一个DOM元素

• [CONTAINER].appendChild([元素])：把元素动态插入到指定容器的末尾

• [CONTAINER].insertBefore([新元素],[原始页面中的元素])：把新创建的元素放置到指定容器原始页面元素的前面 [原始页面中的元素]肯定在[CONTAINER]容器中

• [CONTAINER].removeChild([元素])：在指定容器中移除元素

• document.createTextNode()：创建一个文本节点

• …

• 设置元素的属性/自定义属性

  • 元素.xxx=xxx
  • 元素.setAttribute(xxx,xxx) setAttribute/getAttribute/removeAttribute

4.修改DOM元素的样式

• 元素.style.xxx ：修改（获取）当前元素的行内样式
  • 操作的都是行内样式，哪怕把样式写在样式表中，只要没有写在行内上，也获取不到
• 元素.className：操作的是当前元素的样式类，基于样式类的管理给予其不同的样式

5.给DOM元素设置内容

• innerHTML / innerText：给非表单元素设置或者操作其内容
• value：操作表单元素的内容