DOM、javaScript与HTML_dom是html吗-优快云博客

本文链接：https://blog.youkuaiyun.com/ldb987/article/details/78825304

什么是DOM

DOM，文档对象模型，全称Document Object Model。是一种独立与平台和语言的接口，他允许程序和脚本语言（最常用的就是JS）动态地访问和更新文档的内容、结构和样式。简单理解就是对网页内容进行修改的接口。

DOM实际是上是以面向对象方式描述的对象模型，它将HTML或XML文档建模为一个个对象，以倒立的树状的结构显示，所以通常也称之为DOM树，树中的对象称为节点。

根据DOM，HTML文档中的每个成分都是一个节点，DOM是这样规定的：

整个文档是一个文档节点；
每个HTML标签是一个元素节点；
包含在HTML元素中的文本是文本节点；
每一个HTML属性是一个属性节点；
注释属于注释节点；

例如：

<html> 
	<head>
		<title>标题</title>		
	</head>
	<body>
		今天天气<span style="color:red;font-size:30px;">很好</span>，昨天很冷</p>
	</body>
</html>

对应的dom树如下：

此处借用一张导图：

DOM的组成

DOM定义了HTML文档和XML文档的逻辑结构，给出了一种访问和处理这两种文档的方法。文档代表的是数据，而DOM则代表了如何去处理这些数据。　　

作为W3C的标准接口规范，目前，DOM由三部分组成，包括：核心（core）、HTML接口和XML接口。　　

核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。　　

HTML接口和XML接口两部分则是专为操作具体HTML文档和XML文档所提供的高级接口。

如何使用

我们可以使用JS语言来操作DOM从而来改变网页，但是要改变页面的某个东西，JS就需要获得对HTML文档中所有元素进行访问的入口。这个入口连同对HTML元素进行添加、移动、改变后移除的方法和属性，都是通过DOM来获得的。

访问节点

我们可以通过“Document.getElementById("id的字符串")”来获得页面中指定id的节点对象，然后执行增删改；

我们也可以通过“ document.getElementByTagName("标签名");”来获得页面中所有标签名符合要求的标签，

修改节点；修改节点就是修改节点的属性与包含的文本，想要修改节点首先的通过访问节点的两种方法来获得节点。

document.getElementById(id).innerHTML=new HTML；使用innerHTML属性，来改变HTML内容；例如：

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

document.getElementById(id).attribute=new value；使用以上语法来改变HTML元素的属性；例如：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

document.getElementById(id).style.property=new style；使用以上语法来改变HTML元素的样式；例如：

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

删除节点

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1"); //找到id="div1"的元素
var child=document.getElementById("p1");    //找到id="P1"的<P>元素
parent.removeChild(child);                  //从父元素中删除子元素
</script>

如果能够在不引用父元素的情况下删除某个元素，就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

增加节点

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");                 //通过createElement创建新的<P>元素
var node=document.createTextNode("这是新段落。");     //如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点
para.appendChild(node);                               //然后通过appendChild，向 <p> 元素追加这个文本节点

var element=document.getElementById("div1");          //最后您必须向一个已有的元素追加这个新元素,这段代码找到一个已有的元素
element.appendChild(para);                            //这段代码向这个已有的元素追加新元素
</script>

DOM 和 HTML是一回事吗？

就像很多人把JQuery和Javascript的本质搞混一样，DOM和HTML也完全不是一回事，DOM是一个API，HTML(Hyper Text Markup Language)则是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。但是前端工程师，一般在浏览器端操作HTML。每个Web浏览器都会使用DOM，所以页面可以被脚本语言访问。而所有的浏览器都是以Javascript作为默认的脚本语言。所以HTML在浏览器端基本上可以直接通过DOM模型来操作，通过<script>标签载入或者直接插入Javascript脚本，通过DOM直接操作浏览器端的HTML文件。正是这种无缝融合，导致DOM和HTML的概念很容易混淆。

DOM 和 JavaScript什么关系？

Javascript可以通过DOM直接访问和操作网页文档的内容，一开始，DOM是为方便Javascript操作设计的API。但其实发展到后来，他们是两个独立的个体。而且Javascript不是唯一可以使用DOM的编程语言，比如python也可以访问DOM。所以DOM不是提供给Javascript的API，也不是Javascript里的API。但JavaScript可以通过DOM访问和操作HTML和XML文档内容。