本文在介绍关于JavaScript DOM是什么？有什么作用，重点探讨了其具体步骤，本文内容紧凑，希望大家可以有所收获。
创新互联专注于企业网络营销推广、网站重做改版、新区网站定制设计、自适应品牌网站建设、H5响应式网站、商城网站定制开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为新区等各大城市提供网站开发制作服务。Javascript DOM（文档对象模型）是一个允许开发人员操纵页面内容、结构和风格的接口。在本文中，我们将理解什么是 DOM 以及如何用 Javascript 去操作它。本文还可以作为基本 DOM 操作的参考。
什么是 DOM？基本上网页由 HTML 和 CSS 文档组成。浏览器用于创建文档的描述被称为文档对象模型（DOM）。它使 Javascript 能够访问和操作页面的元素和样式。该模型构建在基于对象的树结构中，并定义：
HTML DOM模型
元素的位置称为节点。不仅元素获得节点，而且元素和文本的属性也有属于它们自己的节点（属性节点和文本节点）。
DOM 文档DOM 文档是网页中所有其他对象的所有者。这意味着如果你想访问网页上的任何对象，必须从这里开始。它还包含许多重要的属性和方法，使我们能够访问和修改自己的页面。
查找 HTML 元素现在我们了解了 DOM 文档是什么，接下来就可以开始获取我们的第一个 HTML 元素了。 Javascript DOM 有许多不同的方法可以用，不过这些最常见：
按 ID 获取元素getElementById()方法用于通过其 id 获取单个元素。我们来看一个例子：
var title = document.getElementById(‘header-title’);
我们得到 id 为header-title的元素，并将其保存到变量中。
还可以用getElementsByClassName()方法获取多个对象，该方法返回一个元素数组。
var items = document.getElementsByClassName(‘list-items’);
这里我们得到类list-items的所有项目，并将它们保存到变量中。
还可以用getElementsByTagName()方法按标记名称获取元素。
var listItems = document.getElementsByTagName(‘li’);
这里我们获取 HTML 文档中所有得li元素并将它们保存到变量中。
querySelector()方法返回与指定的CSS选择器匹配的第一个元素。这意味着你可以通过id、class、tag和所有其他有效的 CSS 选择器获取元素。在这里我列出了一些最常用的选项。
按 id 获取：
var header = document.querySelector(‘#header’)
按 class 获取：
var items = document.querySelector(‘.list-items’)
按标签获取：
var headings = document.querySelector(‘h2’);
获取更具体的元素：
我们还可以使用CSS Selectors获得更多的特定元素。
document.querySelector(“h2.heading”);
在这个例子中，我们同时搜索标记和类，并返回传递给 CSS Selector 的第一个元素。
QueryselectorallquerySelectorAll()方法与querySelector()完全相同，只是它返回符合 CSS Selector 的所有元素。
var heading = document.querySelectorAll(‘h2.heading’);
在这个例子中，我们得到所有属于heading类的h2 标签，并将它们存储在一个数组中。
更改 HTML 元素
HTML DOM 允许我们通过更改其属性来对 HTML 元素的内容和样式进行修改。
更改HTMLinnerHTML 属性可用于修改 HTML 元素的内容。
document.getElementById(“#header”).innerHTML = “Hello World!”;
在这个例子中，我们得到 id 为 header 的元素，并把其内容设置为“Hello World！”。
InnerHTML 还可以把标签放入另一个标签中。
document.getElementsByTagName("div").innerHTML = "Hello World!
"在这里将 h2 标记放入所有已存在的 div 中。
更改属性的值还可以用 DOM 更改属性的值。
document.getElementsByTag(“img”).src = “test.jpg”;
在这个例子中，我们把所有src改为test.jpg。
要更改 HTML 元素的样式，需要更改元素的样式属性。以下是更改样式的示例语法：
document.getElementById(id).style.property = new style
接下来看一个例子，我们获取一个元素并将底部边框改为纯黑线：
document.getElementsByTag(“h2”).style.borderBottom = “solid 3px #000”;
CSS 属性需要用 camelcase 而不是普通的 css 属性名来编写。在这个例子中，我们用borderBottom而不是border-bottom。
现在我们来看看如何添加新元素和删除现有元素。
添加元素var div = document.createElement(‘div’);
在这里我们用了createElement()方法创建一个 div 元素，该方法将标记名作为参数并将其保存到变量中。之后只需要给它一些内容，然后将其插入到 DOM 文档中。
var content = document.createTextNode("Hello World!");
p.appendChild(newContent);
document.body.insertBefore(p, currentp);这里用了createTextNode()方法创建内容，该方法用字符串作参数，然后在文档中已经存在的 div 之前插入新的 div 元素。
var elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);本例中我们得到一个元素并使用removeChild()方法将其删除。
现在让我们来看看怎样替换一个项目。
var p = document.querySelector('#p');
var newp = document.createElement(‘p’);
newp.innerHTML = "Hello World2"
p.parentNode.replaceChild(newp, p);这里我们使用replaceChild()方法替换元素。第一个参数是新元素，第二个参数是要替换的元素。
还可以使用write()方法将 HTML 表达式和 JavaScript 直接写入 HTML 输出流。
document.write(“Hello World!
This is a paragraph!
”);
我们也可以把像日期对象这样的参数传给 JavaScript 表达式。
document.write(Date());
write() 方法还可以使用多个参数，这些参数会按其出现的顺序附加到文档中。
事件处理HTML DOM 允许 Javascript 对 HTML 事件做出反应。下面列出了一些比较重要的事件：
可以用标记上的属性直接在 HTML 代码中定义事件。以下是onclick事件的例子：
Click me!
在此例中，单击按钮时，的文本将被改为 “Hello！”。
还可以在触发事件时调用函数，如下一个例子所示。
Click me!
这里我们在单击按钮时调用 changeText() 方法，并将该元素作为属性传递。
还可以用 Javascript 代码为多个元素分配相同的事件。
document.getElementById(“btn”).onclick = changeText();指定事件监听器
接下来看看怎样为 HTML 元素分配事件监听器。
document.getElementById(“btn”)addEventListener('click', runEvent);这里我们刚刚指定了一个 click 事件，在单击 btn 元素时调用 runEvent 方法。
当然还可以把多个事件指定给单个元素：
document.getElementById(“btn”)addEventListener('mouseover', runEvent);节点关系DOM Document 中的节点之间具有层次关系。这意味着节点的结构类似于树。我们用 parent，sibling 和 child 等术语来描述节点之间的关系。
顶级节点称为根节点，是唯一一个没有父节点的节点。普通 HTML 文档中的根是标记，因为它没有父标记，并且是文档的顶部标记。
可以用以下属性在节点之间导航：
下面是得到h2的父元素的例子。
var parent = document.getElementById(“heading”).parentNode总结
望本文能帮助你理解 Javascript DOM 以及如何用它来操作页面上的元素。
以上就是JavaScript DOM是什么及其作用的分享，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注创新互联网站制作公司行业资讯频道哦！
