HTML DOM属性

Posted 2022-09-19 nyw1983

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML DOM属性相关的知识，希望对你有一定的参考价值。

一、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>