前端之路——DOM的增删改查

所谓动态页面，无论是页面第一次打开页面完成渲染之前就已经发生变化，还是在后续响应用户的操作时发生，或者兼而有之，都会引起DOM的变更，即DOM节点的增删改查。概括地说，主要包括以下方面：

• 查找节点
• 增加节点
• 删除节点
• 修改节点属性
  • 查找属性
  • 增加属性
  • 删除属性
  • 修改属性

我们可以通过了解DOM的继承关系，来理解以上这些操作的接口。

DOM继承对象图

注：以上四个接口的相关属性和方法并为完全列举

基于以上继承类图，我们可以知道DOM的基本层次结构。

• EventTarget赋予了DOM对象处理事件的能力，即增加监听器、移除监听器和触发事件。
• Node是对网页中所有的元素的抽象，网页是节点，元素是节点，属性是节点，文本是节点，注释也是节点。作为节点，需要考虑的有父节点，子节点(第一个子节点和最后一个子节点)，兄弟节点。以及对子节点的增加、删除和替换。
• Document是对网页的抽象，因此创建网页中的内容(元素、属性、文本…)的操作由Document来完成。同时，其中也包含了查询网页中的元素的接口。
• Element是元素的抽象，最主要的是属性，因此提供了对属性值的设置和获取和删除属性的接口。其中的querySelector和querySelectorAll两个接口主要用来查询当前元素下的子节点，参数是合法的CSS选择器。