DOM概念
DOM（Document Object Model），是JS操作网页的接口（Document Object Model），作用是将网页转为一个JS对象，从而可以用脚本进行各种操作，例如增删改查。
DOM的最小组成单位叫节点（node）。HTML共有七种节点类型：Document节点、DocumentType节点、Element节点、Attribute节点、Text节点、Comment注释节点和DocumentFragment节点。
以下列出常见的DOM的增删改查的方法
DOM的查询
| 方法 |
含义 |
| document.querySelector('.myclass') |
选取一个CSS选择器作为参数，返回匹配该选择器的元素节点 |
| document.getElementsByTagName('p') |
返回所有指定HTML标签的元素 |
| document.getElementsByName('names') |
选择拥有name属性的HTML元素并返回 |
| getElementById('idname') |
返回匹配指定id属性的元素节点 |
DOM的增加
| 方法 |
含义 |
| document.createElement('div') |
生成文档元素节点 |
| document.createTextNode() |
用来生成文本节点，参数为所要生成的文本节点的内容 |
| document.createAttribute() |
生成一个新的属性对象节点，并返回它 |
| document.createDocumentFragment() |
生成一个DocumentFragment对象 |
DOM的删除
| 方法 |
含义 |
| Element.remove() |
用于将当前元素节点从DOM树删除 |
| removeProperty() |
用于删除一条CSS属性，返回被删除的值 |
| Element.removeAttribute() |
从当前元素节点移除属性 |
DOM的修改
| 方法 |
含义 |
| setProperty('propertyName','value') |
设置某个CSS属性 |
| Element.setAttribute('align', 'center') |
用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性 |
小结
DOM操作是整个HTML文档中最重要的操作之一，只有在实际情况中不断运用才能更好的学习和理解DOM.
网友评论