登录 注册

php|python|golang|C语言|XMl|前端|数据库|运维|工具类|微信|JAVA|

归纳分享DOM节点属性知识点

本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了DOM节点属性的相关问题，DOM节点的属性取决于它们的类，下面一起来看一下，希望对大家有帮助。

归纳分享DOM节点属性知识点

【相关推荐：javascript视频教程、web前端】

经过前几篇文章的学习，对DOM有一定的了解。但这仅仅是DOM一些基础性的知识，如果要对DOM更了解，需要更深入地了解DOM节点。在这一节中，咱们将围绕DOM的节点属性、标签和内容来展开。这样我们就可以更进一步的了解它们是什么？以及它们最常的属性。

DOM节点类

DOM节点的属性取决于它们的类（class）。例如，标签对应的是一个元素节点和链接a相关的属性。文本节点与元素节点不一样，但是它们之间也有相同的属性和方法，因为所有的DOM节点会形成一个DOM树。

每个DOM节点属于相应的内置类。

root是DOM树的EventTarget，它是由Node继承的，而其他DOM节点继承它。

下图可以帮助我们更易于理解：

640?wx_fmt=png

DOM节点的类主要有：

对于HTMLElement类，还有很多其它种，比如下图所示的这些。

640?wx_fmt=png

因此，节点的全部属性和方法都是继承的结果！

例如，DOM对象中的元素。它属于HTMLElement类中的HTMLInputElement类。它将属性和方法叠加在一起：

如果我们想查DOM节点类名，可以使用对象常用的constructor属性。它引用类构造函数，可以使用constructor.name来获取它的name。比如：

640?wx_fmt=png

或者使用toString把它串起来，比如：

640?wx_fmt=png

我们还可以使用instanceof来检查继承关系：

640?wx_fmt=png

正如我们所看到的，DOM节点是常规的JavaScript对象。他们使用基于原型的类来继承。

在浏览器中使用console.dir(elem)输出元素也很容易。在控制台可以看到HTMLElement.prototype、Element.prototype等等。

640?wx_fmt=png

DOM节点类型

在浏览器和DOM一节中，我们知道浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个DOM树。在DOM中的最小组成单位叫做节点（Node），DOM树由12种类型的节点组成。

DOM中的Node至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同，这三个属性的值也会不相同。

  • nodeType：该属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值，如下面的表格所示

  • nodeName：该属性返回节点的名称

  • nodeValue：该属性返回或设置当前节点的值，格式为字符串

nodeType节点类型：

640?wx_fmt=png

而其中元素节点、文本节点和属性节点是我们操作DOM最常见的几种节点类型。

在JavaScript中，我们可以使用instanceof和其他基于类的测试来查看节点类型，但是有时候nodeType可能更简单。

640?wx_fmt=png

而nodeType是只能属性，我们不能修改它。

640?wx_fmt=png

DOM节点标签

前面提到过nodeName将会返回节点名称（返回的是HTML标签，并且是大写的）。也就是说，给定的DOM节点，可以通过nodeName属性读取它的标签名称，比如：

document.body.nodeName 
// => BODY

除了nodeName属性之外，还可以通过tagName属性来读取：

document.body.tagName  
// => BODY

虽然nodeName和tagName都能读取到元素标签名，但两者之间有区别吗？当然，两者之间有略微的差异：

  • tagName属性只能用于元素节点（Element）

  • nodeName属性可以用于任意节点（Node）上，如果用于元素上，那么和tagName相同，如果用于其他节点类型，比如文本、注释节点等，它有一个带有节点类型的字符串

也就是说，tagName只支持元素节点（因为它源于Element类），而nodeName可以用于所有节点类型。比如下面这个示例，来比较一下tagName和nodeName的结果：

640?wx_fmt=png

如果我们只处理DOM元素，那么我们就可以选择tagName属性来做相应的处理。

除了XHTML，标签名始终是大写的。浏览器有两种处理文档的模式：HTML和XML。通常HTML模式用于Web页面。当浏览器接收到一个带有Content-Type:application/xml+xhtml的头，就会启用XML模式。在HTML模式中，tagName或者nodeName总是返回大写标签，比如或返回的是BODY；对于XML模式，现在很少使用了。

DOM节点内容

对于DOM节点的内容，JavaScript中提供了几个方法来对其进行操作，比如innerHTML、outerHTML、textContent、innerText、outerText和nodeValue等。接下来，咱们看看他们的使用场景以及相应的差异性。

为了易于帮助大家理解和掌握这向方法的使用，接下来的示例都将围绕着下面这个DOM结构来做处理：

<body>    
<!-- 主内容 -->    
<div id="main">        
<p>The paragraph element</p>        
<div>The div </div>        
<input type="text" id="name" value="User name" />    
</div>
</body>

innerHTML

innerHTML属性允许我们获取元素的HTML，而且其获取的的值是一个String类型。比如：

let ele = document.getElementById(&#39;main&#39;)
let eleContent = ele.innerHTML; console.log(typeof eleContent, eleContent)

输出的结果如下：

640?wx_fmt=png

上面看到的是innerHTML属性获取某个元素的内容，当然innerHTML也可以修改某个元素的内容。比如：

let eleP = document.querySelector(&#39;p&#39;) eleP.innerHTML = &#39;我是一个段落，新修改的内容：<a href="#">我是一个链接</a>&#39;

刷新页面，段落p元素整个内容都将被修改了：

640?wx_fmt=png

如果使用innerHTML将