私信我或关注微信号：猿来如此呀，回复：学习，获取免费学习资源包。

程序员经常讲在IDE中写C#、Java会越来越手残，那么经常用jQuery也会让我们忘记JavaScript是如何作用于DOM的。今天，就来谈谈JavaScript操作DOM内容。

什么是DOM？

基本上网页由 HTML 和 CSS 文档组成。浏览器用于创建文档的描述被称为文档对象模型（DOM）。它使 Javascript 能够访问和操作页面的元素和样式。该模型构建在基于对象的树结构中，并定义：

HTML 元素作为对象HTML 元素的属性和事件访问HTML元素的方法

HTML DOM模型

元素的位置称为节点。不仅元素获得节点，而且元素和文本的属性也有属于它们自己的节点（属性节点和文本节点）。

Web前端常讲的DOM API (web 或 XML 页面) = DOM + JS (脚本语言)

文档对象模型

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

获取文档对象

document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

document.getElementsByClassName()

操作DOM对象内容

innerText

innerHTML

操作DOM对象的属性

DOM对象[属性名称]

getAttribute(属性名称)、setAttribute(属性名称,属性值)

removeAttribute(属性名称)

document.getElementById(“box”).value = 10

document.getElementById(“box”)[“name”] =“ZZY”

document.getElementById(“box”).setAttribute(“value”,“ZZY”)

document.getElementsByTagName("p")

操作DOM对象样式

获取样式的值（有单位）

标签对象.style.样式名称

获取样式的数值（无单位，数字）

注意内部样式表和外部样式表中的样式获取需要使用到

getComputedStyle(对象).width

52

操作DOM节点

节点创建删除

createElement（）：创建元素节点

appendChild（）：末尾追加方式插入节点

insertBefore（新元素,参考元素）：在指定节点前插入新节点

remove() ：删除指定节点

removeChild（）:删除子节点

相关节点获取

parentElement父元素

children 所有的子元素

firstElementChild第一个子元素

lastElementChild最后一个子元素

previousElementSibling前一个

nextElementSibling后一个

操作DOM对象事件

Js事件分为鼠标和键盘事件、窗口个事件

常见的鼠标事件：onclick、ondblclick等

常见的键盘事件：onmousedown、onmouseup、onmousepress、onmousemove、onmouseenter、onmouseleave、onmouseover、onmouseout

常见窗口事件：onload、onscroll、onresize、

所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如click事件的事件处理函数就是：onclick

来源网络，侵权联系删除