Javascript中的DOM是什么？有哪些常用的DOM操作方法？

DOM 是 Document Object Model 的缩写,它代表了 HTML 和 XML 文档的节点树结构。DOM 提供了对元素进行创建、删除、修改、查找等操作的 API。

在 JavaScript 中,常用的 DOM 操作方法有:

1. 查找元素:

• document.querySelector():传入 CSS 选择器,返回第一个匹配元素。
• document.querySelectorAll():传入 CSS 选择器,返回所有匹配元素的节点列表。
• document.getElementById():根据 id 获取元素。
• document.getElementsByTagName():根据标签名获取元素。

2. 元素内容操作:

• innerHTML:获取/设置元素内部 HTML 内容。
• textContent:获取/设置元素内部文本内容。
• value:获取/设置表单元素的值。

3. 元素属性操作:

• element.getAttribute():获取元素属性值。
• element.setAttribute():设置元素属性值。
• element.removeAttribute():删除元素属性。

4. 元素事件绑定:

• element.onclick = function(){}:给元素绑定点击事件。
• element.addEventListener():给元素绑定事件,需要指定事件类型和回调函数。

5. 元素增删改:

• document.createElement():创建一个元素节点。
• element.appendChild():添加子节点。
• element.removeChild():删除子节点。
• element.replaceChild():替换子节点。
• element.cloneNode():克隆元素。

6. 元素样式操作:

• element.style.width:设置/获取元素内联样式。
• element.className:设置/获取元素类名。

所以,总结来说 DOM 操作的主要方法有:

1. 查找元素:querySelector() querySelectorAll() getElementById() getElementsByTagName()
2. 元素内容:innerHTML textContent value
3. 元素属性:getAttribute() setAttribute() removeAttribute()
4. 元素事件:onclick addEventListener()
5. 元素增删改:createElement() appendChild() removeChild() replaceChild() cloneNode()
6. 元素样式:style className