HTML DOM基础知识及value、innerHTML、innerText属性的区别

学习&实践爱好者

已于 2022-06-21 08:06:42 修改

阅读量1.2k

点赞数 4

分类专栏： JavaScrip技术文章标签： javascript html

于 2022-06-19 13:40:09 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/125357033

版权

JavaScrip技术专栏收录该内容

119 篇文章 24 订阅

订阅专栏

HTML DOM基础知识及value、innerHTML、innerText属性的区别

本文首先介绍HTML DOM基础知识，再介绍JS中value、innerHTML、innerText属性的区别

HTML DOM基础知识

文档对象模型 (DOM) - Web API 接口参考 | MDN

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当浏览器载入 HTML 文档, 它就会成为 Document 对象。HTML DOM 把 HTML 文档呈现为节点树结构。参见下图：

HTML 文档中的所有内容都是节点：

整个文档（Document）是一个文档节点

每个 HTML 元素（Element）是元素节点

HTML 元素内的文本（Text）是文本节点

每个 HTML 属性（Attribute）是属性节点

注释（Comment）是注释节点

一般地，说DOM操作，可以简单理解成“元素操作”，每一个元素就是一个节点，而每一个节点就是一个对象。因此说，对DOM的元素操作，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。

DOM节点类型较多，不过常见的有3种

（1）元素节点

（2）属性节点

（3）文本节点

属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。

在JavaScript中，我们可以使用nodeType属性来判断一个节点的类型。不同节点的nodeType属性值如下表所示：

节点类型	nodeType值
元素节点	1
属性节点	2
文本节点	3

在 HTML DOM 中, 元素对象代表着一个 HTML 元素——在 DOM 中，所有 HTML 元素都被定义为对象。

元素对象的子节点可以是元素节点，文本节点、属性节点、注释节点。

NodeList 对象代表了节点列表，类似于 HTML元素的子节点集合。

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。

HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素，在 DOM 中，所有 HTML 元素都被定义为对象。

所有 HTML 元素的属性

访问所有 HTML 元素的方法

所有 HTML 元素的事件

HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。

HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

JavaScript 能够在事件发生时执行，比如想当用户点击某个 HTML 元素时，可以向 HTML 事件属性添加 JavaScript 代码：οnclick=JavaScript处理程序

JS（JavaScript）通过HTML DOM可以获取、更改、添加、删除HTML 元素，更改HTML 元素。

DOM元素（Element）获取的几种方法（method）：

★通过ID

getElementByld("id名")

★通过class名

getElementsByClassName("class名")

★通过标签名

getElementsByTagName("标签名")

★通过name属性

getElementsByName(" name名")

★通过选择器获取一个元素

querySelector("选择器名")

★通过选择器获取一组元素

querySelectorAll("选择器名")

提示：参数是字符串的""引号是英文引号，单引号、双引号没有区别。

元素操作，准确来说，操作的是“元素节点”。属性操作，准确来说，操作的是“属性节点”。

HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。像下面有一个input元素，指的就是操作它的id、type、value等，其他元素也类似。

在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”；另外一种是使用“对象方法”。不管是用“对象属性”方式，还是用“对象方法”方式，都涉及以下2种操作：1）获取HTML属性值；2）设置HTML属性值

☆用“对象属性”方式来操作

获取HTML属性值语法：

obj.attr

说明：

obj是元素名，它一个DOM对象。所谓的DOM对象，指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。

attr是属性名，对于一个对象来说，当然是通过点运算符（.）来获取它的属性值。

设置HTML属性值语法：

obj.attr = "值";

说明：

obj是元素名，它一个DOM对象，attr是属性名。

☆用“对象方法”方式操作

可以使用getAttribute()方法来获取元素的某个属性的值。

语法：

obj.getAttribute("attr")

说明：

obj是元素名，attr是属性名。getAttribute()方法只有一个参数。注意，attr是要用英文引号括起来的，初学者很容易忽略这个问题。

下面给出一个示例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>测试示例</title>
 
    <script>
        function myFunction() 
        {
            var d = document.getElementById("div2");
            alert(d.getAttribute("style"));
        }
    </script>
</head>
<body>
<h3>这是测试示例</h3>
<div id ="div2" style="color:#00FF00">  
    <p>这段文本颜色为绿色</p
</div> 
    <button onclick="myFunction()">查看上段文本颜色属性值</button>
</body>
</html>

保存文件名：getAttribute()方法示例.html，用浏览器打开运行结果：

可以使用setAttribute()方法来设置元素的某个属性的值。

语法：

obj.setAttribute("attr","值")

说明：

obj是元素名，attr是属性名。setAttribute()方法有两个参数：第1个参数是属性名；第2个参数是你要设置的属性值。

可以使用removeAttribute()方法来删除元素的某个属性。

语法：

obj.removeAttribute("attr")

说明：

想要删除元素的某个属性，我们只有removeAttribute()这一个方法。

可以使用hasAttribute()方法来判断元素是否含有某个属性。

语法：

obj.hasAttribute("attr")

说明：

hasAttribute()方法返回一个布尔值，如果包含该属性，则返回true。如果不包含该属性，则返回false。

实际上我们直接使用removeAttribute()删除元素的属性是不太正确的，比较严谨的做法是先用hasAttribute()判断这个属性是否存在，如果存在，才去删除。

value、innerHTML、innerText属性的区别

value是元素的属性值，而innerText和innerHTML是元素开始和结束标签之间的值，innerHTML包括Html标签， innerText去除Html标签。

HTML DOM value 属性value 属性设置或返回属性的值。

返回属性的值：attribute.value

设置属性的值：attribute.value = value

HTML DOM value 属性

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。

获取元素的内容：element.innerHTML;

给元素设置内容：element.innerHTML =htmlString;

element.innerHTML - Web API 接口参考 | MDN

innerText属性可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。

获取元素的内容：element.innerText;

给元素设置内容：element.innerText = string;

HTMLElement.innerText - Web API 接口参考 | MDN

value、innerHTML、innerText属性的区别的例子，源码如下：

<!doctype html>
<html 
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>

<div id="divID"> 
    <span style="color:red">提示：</span> 请在文本输入框输入数值（默认值123）：
    <br> 
    <input type="text" id="input"  value="123">     <!--文本输入框，默认值123-->
</div>
<br>
<!--通过点击click按钮，弹窗中显示文本框内用户输入的内容-->
<input type="button" onclick="test1()"  value="click">
<input type="button" onclick="test2()"  value="click2">
<input type="button" onclick="test3()"  value="click3">
<script>
function test1(){
    var aa=document.getElementById("input").value; //通过 document.getElementById(“id名”).value来获取value值。
    alert(aa);
}

function test2(){
    var aa=document.getElementById("divID").innerHTML; //通过 document.getElementById(“id名”).innerHTML来获取。
    alert(aa);
}

function test3(){
    var aa=document.getElementById("divID").innerText; //通过 document.getElementById(“id名”).innerText来获取。
    alert(aa);
}
</script>
</body>
</html>

保存文件名：value、innerHTML、innerText的区别.html ，用浏览器打开运行结果：