api自定义属性操作&节点操作

1 获取属性值

在这里插入图片描述

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');
    </script>
</body>

2. H5自定义属性

<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

3. 获取父节点

细节:一个元素的父节点一定是一个元素,而不是(文本、注释、属性),只有元素才有子节点

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>
</body>

4.子节点

所有子节点在这里插入图片描述在这里插入图片描述

<body>
    <!-- 节点的优点 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>

    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>

    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        // DOM 提供的方法(API)获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>

5.兄弟节点与兄弟元素

获取兄弟节点与兄弟元素

nextSibling:获取下一个节点 previousSibling:获取上一个节点
IE8及之前:文本(不包含非空)、注释、元素
其他浏览器:文本(包含非空)、注释、元素

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

封装

 function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会为你详细解读如何自定义 Node-RED 节点的示例。 首先,你需要准备一个 Node.js 环境和 Node-RED。然后,我们来看看如何创建一个简单的自定义节点。 1. 创建一个新的文件夹,命名为 &quot;node-red-contrib-myfirstnode&quot;,并在其中创建一个名为 &quot;myfirstnode.js&quot; 的文件,这个文件将包含我们的自定义节点的代码。 2. 在 Node-RED 的安装目录下找到 &quot;nodes&quot; 文件夹,并将 &quot;node-red-contrib-myfirstnode&quot; 文件夹复制到该文件夹中。 3. 打开 &quot;myfirstnode.js&quot; 文件,开始编写自定义节点的代码。以下是一个简单的示例: ```javascript module.exports = function(RED) { function MyFirstNode(config) { RED.nodes.createNode(this,config); var node = this; node.on(&#39;input&#39;, function(msg) { //处理节点输入 node.send(msg); //将处理后的结果传递给下一个节点 }); } RED.nodes.registerType(&quot;myfirstnode&quot;,MyFirstNode); } ``` 4. 在代码中,我们使用 `module.exports` 导出我们的自定义节点函数。该函数接受一个参数 `RED`,它是一个全局变量,它允许我们访问 Node-RED 的 API。 5. 在函数中,我们定义了一个名为 `MyFirstNode` 的构造函数。这个构造函数接受一个参数 `config`,它是我们在 Node-RED 编辑器中配置节点时提供的配置数据。 6. 在构造函数中,我们使用 `RED.nodes.createNode` 方法来创建一个新的节点实例。我们还将 `this` 和 `config` 传递给此方法,这将设置节点的 `id` 和 `name` 属性,并将配置数据存储在 `config` 属性中。 7. 接下来,我们定义了一个名为 `node` 的变量,并在 `this` 上调用 `on` 方法来监听输入事件。当节点接收到输入消息时,我们可以在回调函数中处理它,并使用 `node.send` 方法将处理后的消息传递给下一个节点。 8. 最后,我们使用 `RED.nodes.registerType` 方法来注册我们的自定义节点类型。这个方法需要两个参数:节点类型的名称和我们定义的构造函数。在这个例子中,我们将节点类型命名为 &quot;myfirstnode&quot;,并将构造函数传递给 `registerType` 方法。 9. 现在,我们可以启动 Node-RED 并在编辑器中找到我们的自定义节点。我们可以将它拖放到流程中,并配置它的参数,然后测试它是否按预期工作。 希望这个解读能够帮助你理解如何自定义 Node-RED 节点,并让你开始构建自己的节点。如果你有任何疑问,请随时问我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值