js 获取 DOM 节点值、类型、名称的方法_获取dom元素的类名-CSDN博客

本文链接：https://blog.csdn.net/YCHH1/article/details/123348087

这篇博客详细介绍了DOM的基本操作，包括获取元素节点、属性节点、文本节点和注释节点的方法，并通过示例展示了如何访问这些节点的名称、值和类型。此外，还探讨了不同类型的节点在HTML文档中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 这是关于 input 的上一个注释 -->
<input type="password" id="ipt" name="password">
<!-- 这是关于  input 的 下一个 注释 -->

<script>
    // 获取元素的  节点名称  节点值   节点类型
    // 获取  html 元素
    var html = document.documentElement;
    console.log("节点名称:", html.nodeName, "节点值", html.nodeValue, "节点类型", html.nodeType);
    //节点名称: HTML 节点值 null 节点类型 1

    // 获取元素的属性节点 
    var iptAll = document.querySelector("#ipt");
    var ipt = iptAll.getAttributeNode("id");
    console.log("属性节点的名称", ipt.nodeName, "属性节点的值", ipt.nodeValue, "属性节点的类型", ipt.nodeType);
    //属性节点的名称 id 属性节点的值 ipt 属性节点的类型 2 


    // 获取元素的文本节点
    var txt = document.getElementsByTagName('title')[0].firstChild;
    console.log("属性节点的名称", txt.nodeName, "节点值", txt.nodeValue, "节点类型", txt.nodeType);
    //属性节点的名称 #text 节点值 标题 节点类型 3


    // 获取元素的注释节点  下一个注释
    var nextZS = iptAll.nextSibling.nextSibling;
    console.log("注释节点的名称", nextZS.nodeName, "注释节点的值", nextZS.nodeValue, "注释节点的类型", nextZS.nodeType);
    // 注释节点的名称 #comment 注释节点的值  这是一段文本的注释  注释节点的类型 8

    
    // 获取元素的注释节点  上一个节点
    var parentZS = iptAll.previousSibling.previousSibling;
    console.log("注释节点的名称", parentZS.nodeName, "注释节点的值", parentZS.nodeValue, "注释节点的类型", parentZS.nodeType);
    //注释节点的名称 #comment 注释节点的值  这是关于 input 的上一个注释  注释节点的类型 8


    // 获取文档的值 类型  名称
    console.log("文档名称", document.nodeName, "文档值", document.nodeValue, "节点类型", document.nodeType);
    //dom.html:21 文档名称 #document 文档值 null 节点类型 9


</script>