week 6 in bluemsun

目录

DOM概述

DOM查找

DOM修改（核心DOM的四个操作）

DOM添加

步骤：

添加元素优化：

---

DOM概述

DOM全程 document object model ，是 w3c 的标准，是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。简而言之，其功能为对网页进行增删改查的操作。

常用的DOM操作有：查找节点、读取节点信息、修改节点信息、创建新节点、删除节点。

DOM查找

• 按 id 属性，精确查找一个元素
  • 语法： document.getElementById("id")
  • 注： getElementById 仅可用于 document 上
• 按标签名查找
  • 语法： parent.getElementsByTagName("tag")
  • 注：可用于任何父元素，不仅查找直接子节点，也会查找子代节点。返回的是一个动态集合，即使只有一个元素，也要使用数组下标进行访问。
• 通过 name 属性查找
  • 语法： document.getElementsByName(" name 属性值")
  • 注：返回 DOM 树中所有指定 name 属性值的子元素的集合。
• 通过 class 查找
  • 语法： parent.getElementsByClassName(" class 属性值")
  • 注：可用于任何父元素，不仅查找直接子节点，也会查找子代节点。返回的是一个动态集合，即使只有一个元素，也要使用数组下标进行访问。
• 通过CSS选择器查找
  • 只找一个元素
    • 语法： parent.querySelector("CSS选择器")
    • 注：支持CSS中的所有选择器，若对应的元素有多个，只返回第一个
  • 找多个：
    • 语法： parent.query.SelectorAll("CSS选择器"）
    • 注：返回的是非动态集合

DOM修改（核心DOM的四个操作）

• 读取属性值
  • 先获得属性节点对象，再获得节点对象的值： element.attributes[下标\属性名].value  or  element.getAttributeNode(属性名).value
  • 直接获得属性值： elem.getAttribute("属性名")
• 修改属性值
  • 语法： element.setAttribute("属性名",属性值)
• 判断是否包含指定属性
  • 语法： element.hasAttribute("属性名")
  • 注：返回的是一个布尔类型的数据
• 移除属性
  • 语法： element.removeAttribute("属性名")

DOM添加

步骤：

• 创建空元素
  • 语法： document.createElement("元素名")
• 设置关键属性
  • 新建元素.属性名 = 属性值
• 设置关键样式
  • 单个样式： 新建元素.style.样式名 = ""
  • 多个样式： 新建元素.style.cssText = "(多个样式，各样式之间用分号隔开)"
• 将元素添加到DOM树
  • 为一个父元素追加 最后一个 子节点： parentNode.appendChild(childNode) 
  • 在父元素的指定节点 前 添加子节点： parentNode.insertBefore(newChild,existingChild)

添加元素优化：

核心思想：减少对DOM树的操作，因为每次修改DOM树，都需要重新布局

操作方式：

• 若同时创建新的父元素和子元素，在内存中先将子元素添加到父元素中，再将父元素添加到DOM 树中
• 若添加多个平级子元素，将所有子元素临时添加到文档片段中，再将文档片段添加到DOM树中
  • 文档片段：内存中用于临时保存多个平级子元素的虚拟父元素，用法与普通父元素相同，添加到DOM树中后所占用的内存自动释放
  • 操作
    • 创建片段： var frag = document.createDocumentFragment()
    • 将子元素临时添加到文档片段中： frag.appendChild(child)
    • 将文档片段添加到DOM树中： parent.appendChild(frag)