zoukankan      html  css  js  c++  java
  • 节点属性

    在DOM中,每一个节点都是一个对象。DOM节点有3个重要的属性:
    1、nodeName : 节点的名称

    2、nodeValue : 节点的值

    3、nodeType : 节点的类型

    nodeName属性: 节点的名称

    1、元素节点的nodeName与标签名相同

    2、属性节点的nodeName是属性的名称

    3、文本节点的nodeName是#text

    4、文档节点的nodeName是#document

    <div id="node" name="getNodeName">1111</div>
    <script>
        var node = document.getElementById("node");
        document.write(node.nodeName+"<br />"); //DIV
        document.write(document.nodeName+"<br />");//#document
        document.write(node.firstChild.nodeName+"<br />");//#text
      document.write(node.getAttributeNode("name")+"<br />");//[object Attr]
      document.write(node.getAttributeNode("name").nodeName+"<br />");//name
    </script>

    getAttributeNode():通过指定返回具有指定名称的属性节点的一个元素,作为一个Attr对象。

    如果是返回属性节点的属性值getAttribute();

    nodeValue属性:节点的值

    1、元素节点的nodeValue是undefined或null

    2、属性节点的nodeValue是属性的值

    3、文本节点的nodeValue是文本自身

    <div id="node" name="getNodeName">1111</div>
    <script>
        var node = document.getElementById("node");
        document.write(node.nodeValue+"<br />");//null
        document.write(node.firstChild.nodeValue+"<br />");//1111
        document.write(node.getAttributeNode("name").nodeValue+"<br />");//getNodeName
    </script>

     nodeType属性:节点的类型

    常用的几种节点类型

    元素  1

    属性  2

    文本  3

    文档  9

    <div id="node" name="getNodeName">1111</div>
    <script>
        var node = document.getElementById("node");
        document.write(node.nodeType+"<br />");//1
        document.write(document.nodeType+"<br />");//9
        document.write(node.firstChild.nodeType+"<br />");//3
        document.write(node.getAttributeNode("name").nodeType+"<br />");//2
    </script>
  • 相关阅读:
    pagic Deno + React 驱动的静态网站生成器 入门
    antd Form.Item label添加解释信息
    deno可以通过url引入标准库,运行时自动下载,下载到哪里呢
    如何查看github开源项目star趋势
    使用deno开发post请求,get请求,监测文件变化自动重启(类似于nodemon)
    windows安装deno
    react 轮播图 react-slick
    display:flex 元素垂直居中,有间距,右对齐
    Java对map键名进行顺序排序后转为字符串
    IDEA快捷键大全
  • 原文地址:https://www.cnblogs.com/wanbi/p/4179248.html
Copyright © 2011-2022 走看看