首页 > 其他分享> 文章详细

HTML DOM属性

2019-09-01 16:00:09 阅读：218 来源： 互联网

标签：nodeName DOM 元素 nodeValue HTML 节点属性

一、HTML DOM属性

属性是节点（HTML元素）的值，可以对其进行修改或获取。

编程接口：

可以通过JavaScript（以及其他编程语言：可以让计算机读的懂得语言）对HTML DOM进行访问。

所有的HTML元素被定义为对象，而编程接口则是对象方法和对象属性。方法是可以执行的动作（如，添加和修改元素）；属性是能被获取或是修改的值（如，节点名称或内容）

二、HTML DOM属性分类

innerHTMl获取元素内容；nodeName规定节点的名称；nodeValue规定节点的值；nodeType规定节点的类型。

（一）、innerHTML 属性

获取元素内容最简单的方式就是使用innerHTML属性；获取或是替换HTML元素的内容

注意：innerHTML属性可以用于获取或改变任何一个HTML元素，包括<html>和<body>

实例：获取id为box的title元素的innerHTML，getElementById是一个方法，innerHTML是属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title id="box">My title</title>
 6 </head>
 7 <body>
 8     <script>
 9     var txt=document.getElementById('box').innerHTML;
10     document.write(txt)
11     </script>
12 </body>
13 </html>

显示效果：title标签的内容正常情况下是无法在页面中显示的，但是经过设置后title元素中的内容显示在了页面中。

（二）、nodeValue属性

nodeValue属性规定节点的值。

元素节点的nodeValue是undefined或null

文本节点的nodeValue是文本本身

属性节点的nodeValue是属性值

实例：获取元素的值，获取<p id="box">标签的文本节点值：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title id="box1">My title</title>
 6 </head>
 7 <body>
 8 <p id="box">hellow world</p>
 9     <script>
10     x=document.getElementById("box");document.write(x.firstChild.nodeValue);
11     </script>
12 </body>
13 </html>

显示效果：

（三）、nodeName属性

nodeName规定节点的名称。

nodeName是只读的

元素节点的nodeName与标签名相同

文本节点的nodeName始终是 #text

文档节点的nodeName始终是#document

注意：nodeName始终包含HTML元素的大写字母标签名。

（四）、nodeType属性

nodeType属性返回节点的类型，nodeType是只读类型的。

比较重要的节点类型有

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

标签：nodeName,DOM,元素,nodeValue,HTML,节点,属性
来源： https://www.cnblogs.com/nyw1983/p/11442568.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML DOM属性