JavaScript访问DOM指定节点的方法与属性详解

JavaScript访问DOM指定节点的方法与属性详解

本文通过具体实例，详细讲解在JavaScript中访问DOM对象指定节点的实现方法，供读者参考学习。

基础知识介绍

一、基础知识介绍

主要利用getElementById()函数来定位并获取指定ID的DOM节点，随后通过nodeName、nodeType以及nodeValue这三个属性，分别提取并展示该节点的名称、类型以及具体数值。

1. nodeName属性详解

该属性主要用于获取特定节点的名称字符串。

[sName=]obj.nodeName

sName：这是一个字符串类型的变量，用于存储从节点获取到的名称信息。

2. nodeType属性详解

该属性用于识别并返回特定节点的类型标识。

[sType=]obj.nodeType

sType：这是一个字符串变量，用于存储节点类型的数值结果。具体的类型与数值对应关系如下表所示：

3. nodeValue属性详解

该属性用于返回节点所包含的具体值。

[txt=]obj.nodeValue

txt：这是一个字符串变量，用于存储节点的值。需要注意的是，除了文本节点（text node）外，其他所有类型的节点其nodeValue属性值均为“null”。

实际应用案例

二、实际应用案例

本示例演示如何访问指定节点，并在页面加载时通过浏览器弹出的提示框，直观显示该节点的名称、类型以及节点值。

完整代码实现

三、完整代码实现

<!DOCTYPE html>
<html>
<head>
<title>www.jb51.net 访问指定节点</title>
</head>
<body id="b1">
<h3 >三号标题</h3>
<b>加粗内容</b>
<script language="javascript">
 <!--
 var by=document.getElementById("b1");
 var str;
 str="节点名称:"+by.nodeName+"\n";
 str+="节点类型:"+by.nodeType+"\n";
 str+="节点值:"+by.nodeValue+"\n";
 alert(str);
 -->
</script>
</body>
</html>

运行结果展示

四、运行结果展示

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》