Generates relations between DOM elements depending on their depth

栏目: IT技术 · 发布时间: 4年前

内容简介:It figures out relations between DOM elements without storing them or creating actual dom tree. Instead, it gets relationship based on element depth. In case you are studying any dom-tree, you can build entire branches and navigate through them using gener

@dflex/dom-gen

Generates relations between DOM elements depending on their depth.
npm install @dflex/dom-gen

It figures out relations between DOM elements without storing them or creating actual dom tree. Instead, it gets relationship based on element depth. In case you are studying any dom-tree, you can build entire branches and navigate through them using generated unique keys.

const domGen = new Generator()

domGen.getElmPointer(id: string, depth: number)

Returns pointer object refers to element relation with its unique keys and related index:

  • order: Object <elementOrder>

    self: number
    parent: number
    
  • keys: Object <relationKey>

    sK: string
    pK: string
    chK: string
    
import Generator from "@dflex/dom-gen";

const domGen = new Generator();

let pointer = domGen.getElmPointer("id-0", 0);

// pointer = {
//   keys: {
//     chK: null,
//     pK: "1-0",
//     sK: "0-0",
//   },
//   order: {
//     parent: 0,
//     self: 0,
//   },
// };

Internally Generator has build dom tree as following:

DOM-root
│
│───id-0 => order: { parent: 0, self: 0 } || keys: { chK: null , pK: "1-0", sK: "0-0" }

Adding more elements on the same level:

const domGen = new Generator();

const pointer1 = domGen.getElmPointer("id-1", 0);

// pointer1 = {
//   keys: {
//     chK: null,
//     pK: "1-0",
//     sK: "0-0",
//   },
//   order: {
//     parent: 0,
//     self: 1,
//   },
// };

const pointer2 = domGen.getElmPointer("id-2", 0);

// pointer2 = {
//   keys: {
//     chK: null,
//     pK: "1-0",
//     sK: "0-0",
//   },
//   order: {
//     parent: 0,
//     self: 2,
//   },
// };

And dom tree is:

DOM-root
│
│───id-0 => order: {parent: 0, self: 0} || keys: {chK: null, pK: "1-0", sK: "0-0"}
│
│───id-1 => order: {parent: 0, self: 1} || keys: {chK: null, pK: "1-0", sK: "0-0"}
│
│───id-2 => order: {parent: 0, self: 2} || keys: {chK: null, pK: "1-0", sK: "0-0"}

Note:id/0-2 all have same parent and siblings key. So any incoming parent will carry key 1-0 and exists in position 0 . And this goes also for any parent which means for any element you can go up↑ and down↓ .

Following the same logic we can go deeper:

const domGen = new Generator();

const pointer = domGen.getElmPointer("id-parent-1", 1);

// pointer = {
//   keys: {
//     chK: "0-0",
//     pK: "2-0",
//     sK: "1-0", // this key was generated previously in children level
//   },
//   order: {
//     parent: 0,
//     self: 0,
//   },
// };

And dom tree is with relational key is as following:

DOM-root
├───id-parent-1  => order: {parent: 0, self: 0} || keys: {chK: "0-0", pK: "2-0", sK: "1-0"}
    |
    │───id-0  => order: {parent: 0, self: 0} || keys: {chK: null, pK: "1-0", sK: "0-0"}
    │
    │───id-1 => ..
    │
    │───id-2 => ..

dom-gen doesn't store keys and ids. All the id's validations should be done outside Generator logic. Also, storing relationships should be done separately in a store.

Test

npm test

License

This project is licensed under the GPL-3.0 License


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

司法的过程

司法的过程

(美)亨利·J.亚伯拉罕 / 泮伟江 宦盛奎 韩阳 / 北京大学出版社 / 2009-07-28 / 58.00元

本书是以比较研究的方法来分析司法哲学的经典文本之一。作者以敏锐的眼光透视了司法过程背后的理论、实践和参与其中的人。比较了美国、英国、法国的具体法院运作,审视了“司法能动主义”和“司法克制主义”之间的争辩。本书第七版的介绍吸收了美国、英国、法国和欧洲法院体系运作中的最新和重要的发展。 目前国内非常关注司法的运作过程、法官的裁判过程,此书的翻译对于这方面的研究很有助益,对于英国和法国法院的介绍填补了国......一起来看看 《司法的过程》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具