js 获取 DOM 节点值、类型、名称的方法

最新推荐文章于 2024-06-20 14:42:51 发布

大闸蟹~

最新推荐文章于 2024-06-20 14:42:51 发布

阅读量2k

点赞数

分类专栏： js 文章标签： javascript

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

版权

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!-- 这是关于 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>