DOM常用操作-蒲公英云

1. 修改

2. 添加删除元素

3. HTML DOM常用对象

一. 修改:

1. 样式:

内联样式: 元素.style.css属性=“值”
a. css属性名要去-，变驼峰
b. 不要用元素.style来获取样式。因为style只表示内联样式。而将来，我们样式多数写在样式表中。
(2). 获取完整样式: 用计算后的样式
- a. 什么是计算后的样式: 最终应用到一个元素上的所有样式的集合。
- b. 如何获得计算后的完整样式:2步:
  - 1). 获得包含完整样式的对象：
    var style=getComputedStyle(元素对象)
    //获取计算后的样式
  - 2). 从style对象中，提取想要的css属性
    var 属性值=style.css属性
- c. 计算后的样式都是只读，不可修改，怕牵一发而动全身。
  总结: 将来只要修改样式，都用元素.style.css属性。只要获取样式都用getComputedStyle();
(3). 问题: 元素.style.css属性，一句话只能修改一个css属性。而网页中很多效果是一次性批量应用多个css属性。如果使用元素.style.css属性方式批量修改多个css属性，代码会很繁琐
解决: 用class代替.style批量修改元素的样式
(4). 优化: 尽量减少修改样式的次数。能用一句话或用class一次性修改的样式，就不要用.style多句话修改。
- a. 只要修改一次样式，都可能导致重排重绘
- b. 原理: 重排重绘:
  - 1). 浏览器加载网页的过程: (抛开请求响应网络部分不提)
    - i. 扫描HTML代码，在内存中构建DOM树保存网页结构和内容，同时扫描CSS代码，在内存中创建CSS对象模型
    - ii. 将CSS对象模型中的css样式对象，挂载到DOM树上的对应元素上。形成加载树。
    - iii. 浏览器中排版引擎开始按照css中定义的元素布局和大小，对网页内容区域进行排版:
    - iv. 浏览器将排好版的网页，再按照css中样式的规定，绘制出来，显示给用户。
  - 2). 重排重绘：
    - i. 当在程序中修改元素的显示隐藏，大小，位置，影响到布局时，浏览器就被迫将整个网页重新排版，重新绘制——简称重排重绘。
    - ii. 如果程序中只修改颜色等不影响布局的属性时，浏览器就不需要重新排版，只需要重新绘制即可——简称重绘
    - iii. 频繁的重排重绘会导致浏览器渲染不及时，导致闪屏。
- c. 如何优化:
  - 1). 尽量用class来批量修改css样式
  - 2). 如果必须用style修改，也可放在一句话中修改多个css属性: 元素.style.cssText=“属性:值;属性:值;…”
    比如: div.style.width=“200px”;
    div.style.height=“100px”
    可简写为:
    div.style.cssText=“width:200px; height:100px”

二. 添加/删除元素

1. 添加元素: 3步:

(1). 先创建一个空元素
var 元素=document.createElement(“标签名”)
比如: var a=document.createElement(“a”)
结果: <a></a>
(2). 为新元素添加新属性:
a.href=“http://tmooc.cn”
a.innerHTML=“go to tmooc”
<a href="http://tmooc.cn"> go to tmooc </a>
问题: 此时a没有在DOM树上，浏览器就不知道有这个a元素，自然也就不会将a绘制到页面上。
(3). 将新元素挂到DOM树上指定父元素下: 3种
- a. 在当前父对象下直接子对象末尾追加新元素:
  父元素.appendChild(新元素)
  //追加孩子
- b. 将新元素插入到当前父元素下指定的一个现有子元素前
  父元素.insertBefore(新元素, 现有元素)
- c. 用新元素替换当前父元素下指定的一个现有子元素

2. 优化:

尽量减少操作DOM树的次数——减少重排重绘

(1). 如果同时添加父元素和子元素，应该先在内存中将子元素都添加到父元素中，最后再一次性将父元素添加到DOM树
(2). 如果父元素已经在页面上了，需要添加多个平级子元素。应该借助文档片段对象。
- a. 什么是文档片段对象: 内存中，临时保存多个平级子元素的虚拟父元素
- b. 何时: 父元素已经在页面上了，需要添加多个平级子元素
- c. 为什么: 减少操作DOM树的次数——减少重排重绘
- d. 如何: 3步:
  - 1). 先创建一个文档片段对象
    var frag=document.createDocumentFragment();
    // 创建文档片段
  - 2). 将多个平级子元素先添加到文档片段对象中
    frag.appendChild(子元素)
  - 3). 将文档片段对象，一次性添加到DOM树。
    父元素.appendChild(frag)
- e. 虽然子元素是先放入文档片段中，再加入父元素下的，但是文档片段不会成为页面上实际的元素。将子元素添加到页面后，文档片段就释放了！子元素依然直接隶属于原父元素。

三. HTML DOM常用对象:

HTML DOM对部分常用的元素对象，提供了专门的简化版函数

1. Image对象
  (1). 代表页面上一个<img>元素
  (2). 唯一的简化: var img=new Image();
  (3). 绝不是所有元素都能用new 创建，常用的只要new Image()和new Option()两个。
1. Select和Option对象
  - (1). select对象代表页面上一个select元素
    - a. .selectedIndex属性获得当前选中项的下标
    - b. .options属性获得当前select元素下所有option对象的集合
    - c. .length属性获得当前select元素下所有option对象的个数。等效于.options.length
  - (2). Option对象: 代表页面上一个<option>元素
    - a. 创建: var opt=new Option(内容, value)
    - 顶普通DOM三句话：
      var opt=document.createElement(“option”)
      opt.innerHTML=内容;
      opt.value=value;
1. Table/…: 采用逐级管理
  - (1). table管着行分组
    - a. table可以添加行分组
      var 行分组=table.createTHead()
      .createTBody()
      .createTFoot()
      - 一句话干两件事:
        
        (1). 都创建一个新的行分组对象 —— createElement
        (2). 同时已经把行分组添加到table中 —— appendChild
    - b. table可以删除行分组
      table.deleteTHead()
      table.deleteTFoot()
    - c. table可以获取行分组
      table.tHead
      table.tFoot
      table.tBodies[i]
      其实table中可以包含多个tbody，所以tbody时放在一个tBodies集合中保存的。并不直接隶属于table。
  - (2). 行分组管着行
    - a. 行分组可以添加一行
      - 1). var tr=行分组.insertRow(i)
      - 2). 在行分组中i位置插入一个新空行
      - 3). 一句话干两件事:
        
        i. 先创建一个空tr
        ii. 再将tr插入到行分组中指定i位置
      - 4). 如果i位置已经有行了，则行会把当前位置的行以及之后的行向后顺移一位。
      - 5). 固定套路:
        
        i. 在末尾追加新行: var tr=行分组.insertRow()
        ii. 在开头插入新行: var tr=行分组.insertRow(0)
    - b. 行分组可以删除一行
      - 1). 行分组.deleteRow(i)
      - 2). 如果.前的主语是行分组，i要求必须用行分组内的相对下标位置
      - 3). 问题: 将来要删除的行下标不能写死在程序中，只能动态获得。其实每个tr对象都有一个tr.rowIndex属性，记录自己在整个表格中的下标位置。但是这个位置不能给行分组.deleteRow()用！因为行在行分组内的下标和行在整个表内的下标很可能不一样。因为有表头行的存在。
      - 4). 解决: 今后要删除一行，不要用行分组删除。应该用table删除: table.deleteRow(tr.rowIndex);
    - c. 行分组可以获取一行
      行分组.rows[i]
  - (3). 行管着格
    - a. 行可以添加格: var td=tr.insertCell()
    - b. 行可以删除格: tr.deleteCell(i)
    - c. 行可以获取格: tr.cells[i]
补: 确认框: 浏览器除了带有警告框alert，输入框prompt，还带着一个确认框confirm
- (1). var bool=confirm(“提示信息”)
- (2). vs alert
  - a. alert，只有一个确定按钮，不能选择
  - b. confirm，有两个按钮，一个确认，一个取消
- (3). 当程序执行到confirm()时，会弹出确认框，阻止程序继续向后执行。直到用户点确认按钮或点取消按钮后，才继续执行。
- (4). 如何知道用户点的是确认还是取消?
  - a. 如果用户点的是确认，则confirm()函数返回true
  - b. 如果用户点的是取消，则confirm()函数返回false
1. Form和表单元素对象
  - (1). Form对象代表页面上一个<form>元素
    - a. 查找: var from=document.forms[i]
      document已经将当前网页中所有<form>元素，集中保存在forms集合中，只需要通过[下标]，就可取出网页中的一个<form>元素对象。
  - b. 属性:
    - 1). .elements 获得当前form元素内的所有表单元素的集合。（只包含表单元素: input textarea button select）
    - 2). .length 获得当前form元素内所有表单元素的个数
      等效于: .elements.length
  - (2). 表单元素对象: 代表<form>元素内的某一个表单元素
    a. 获取:
    1). 标准: var 表单元素=form.elements[i/id/name]
    2). 简写: 只有当表单元素上有name属性时:
    form.name
    b. 方法: 表单元素.focus() 让当前表单元素自动获得焦点。
DOM4步:
- 1. 查找触发事件的元素
- 1. 绑定事件处理函数
- 1. 查找要修改的元素
- 1. 修改元素

DOM：增删改查:

1. 查找: 4种:
  - (1). 不需要查找就可直接获得的元素:
    document.documentElement - <html>
    document.head
    document.body
  - (2). 按节点间关系查找：
    元素.parentNode
    元素.children
    元素.firstElementChild
    元素.lastElementChild
    元素.previousElementSibling
    元素.nextElementSibling
  - (3). 按HTML特征查找:
    var 元素=document.getElementById(“id”)
    var 类数组对象=父元素.getElementsByTagName(“标签名”)
    var 类数组对象=父元素.getElementsByClassName(“class名”)
    var 类数组对象=document.getElementsByName(“name名”)
  - (4). 按选择器查找:
    var 元素=父元素.querySelector(“选择器”)
    var 类数组对象=父元素.querySelectorAll(“选择器”)
1. 修改:
  - (1)内容: 元素.innerHTML 元素.textContent 元素.value
  - (2)属性:
    - a. 字符串格式的HTML标准属性:
      元素getAttribute(“属性名”)或元素.setAttribute(“属性名”,“新值”)
      元素.属性名
      特例: class->className
      HTML5: 元素.classList.add()
      元素.classList.remove()
    - b. bool类型的HTML标准属性:
      元素.属性名
  - c. 自定义扩展属性:
    元素getAttribute(“属性名”)或元素.setAttribute(“属性名”,“新值”)
    HTML5: <元素 data-自定义属性名=“值”>
    元素.dataset.自定义属性名
  - (3)样式:
    - a. 修改样式，都用内联样式: 元素.style.css属性=“值”
    - b. 获取样式，都用计算后的样式:
      var style=getComputedStyle(元素)
      var 属性值=style.css属性
    - c. 同时修改多个css属性:
      元素.style.cssText=“属性:值; 属性:值”
1. 添加元素:
  (1). 普通: 3步:
  var a=document.createElement(“a”)
  a.href=“http://tmooc.cn”;
  a.innerHTML=“go to tmooc”
  父元素.appendChild(a)
  或
  父元素.insertBefore(a, 现有子元素)
  或
  父元素.replaceChild(a, 现有子元素)
  (2). 用文档片段添加:
  var frag=document.createDocumentFragment();
  frag.appendChild(子元素)
  父元素.appendChild(frag);
1. 删除元素: 父元素.removeChild(子元素)
// 表单数据的动态添加和删除

//二级下拉菜单联动

// 表单验证

DOM4种优化:

1. 查找:
  如果查找条件简单，首选按HTML特征查找。
  因为返回动态集合，首次查找速度快
  如果查找条件复杂，就用按选择器查找
1. 修改样式: 尽量减少修改样式的次数，避免反复重排重绘
  首先用class批量修改css属性
  如果必须用style修改，也可简写为：
  元素.style.cssText=“属性:值;属性:值;…”
1. 添加元素: 尽量减少操作DOM树的次数
  如果同时添加父元素和子元素，可先将子元素加入父元素，最后再一次性将父元素添加到DOM树
  如果父元素已经在页面上，要添加多个平级子元素，应该先将子元素添加到文档片段。再将文档片段一次性添加到DOM树