访问DOM对象指定节点

快来打我* 2022-05-12 00:14 120阅读 0赞

**一 介绍**

使用getElementById()方法来访问指定id的节点，并用nodeName属性、nodeType属性和nodeValue属性来显示出该节点名称、节点类型和节点值。

1、nodeName属性

该属性用来获取某一个节点的名称。

［sName=］obj.nodeName

sName：字符串变量用来存储节点的名称。

2、nodeType属性

该属性用来获取某一个节点的类型。

［sType=］obj.nodeType

sType：字符串变量，用来存储节点的类型，该类型值为数值型。该参数的类型如下表所示。

<table style="border-collapse:collapse;border:1px solid #bbbbbb;width:632px;"> 
 <tbody> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:142px;" align="left">类 型</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">数 值</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">节 点 名</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:249px;" align="left">说 明</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:142px;" align="left">元素（element）</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">1</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">标记</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:249px;" align="left">任何HTML或XML的标记</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:142px;" align="left">属性（attribute）</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">2</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">属性</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:249px;" align="left">标记中的属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:142px;" align="left">文本（text）</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">3</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">#text</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:249px;" align="left">包含标记中的文本</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:142px;" align="left">注释（comment）</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">8</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">#comment</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:249px;" align="left">HTML的注释</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:142px;" align="left">文档（document）</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">9</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">#document</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:249px;" align="left">文档对象</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:142px;" align="left">文档类型（documentType）</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">10</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:120px;" align="left">DOCTYPE</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:249px;" align="left">DTD规范</td> 
  </tr> 
 </tbody> 
</table>

3、nodeValue属性

该属性将返回节点的值。

［txt=］obj.nodeValue

txt：字符串变量用来存储节点的值，除文本节点类型外，其他类型的节点值都为“null”。

**二 应用**

访问指定节点,本示例在页面弹出的提示框中，显示了指定节点的名称、节点的类型和节点的值。

**三 代码**

<head>
    <title>访问指定节点</title>
    </head>
    <body id="b1">
    <h3 >三号标题</h3>
    <b>加粗内容</b>
    <script language="javascript">
     
    </script>
    </body>

**四 运行结果**

![6d7b8f2e-3fc1-3b92-bf22-9494a4a3875b.png][]

[6d7b8f2e-3fc1-3b92-bf22-9494a4a3875b.png]: /images/20220512/ef74ce43546d4c23ac1b79ecc7853038.png