Skip to content

1. 选择器

语法参考遵循HTML的标准选择器,熟悉html的可以立即上手。

1.1. 应用场景:

- 图形反序列化后操作图中的对象
- 脚本中如何获取对象引用

1.2. 语法示例:

js

// 根据自定义样式名称
let nodes = layer.querySelectorAll('.myClass');

// 根据类名称
let circleNodes = layer.querySelectorAll('CircleNode');

// 根据类名称+属性
let node = layer.querySelector('Node[name="node1"]');

// 根据某个属性查找,例如根据text属性查找
let link = layer.querySelector('[text="myLink"]');

// 支持简单的比较运算
let leftNodes = layer.querySelectorAll('[x<=10]'); 
let rightNodes = layer.querySelectorAll('TextNode[x>=20]'); 

// 支持函数,可以做各种复杂的比较:
let arr = layer.querySelectorAll(obj => obj.x > 20 && obj.y < 100);

// 更复杂的
let arr2 = layer.querySelectorAll(obj => {
    if(obj instanceof CircleNode){
        return obj.x > 20 && obj.y < 100;
    }else if(obj.type == 'MyNode'){
        return obj.getAttribute('ratio') == 1;
    }else{
        return obj.hasClass('.myClass');
    }
    //...
});

querySelector 返回一个对象(如果找不到返回null)

querySelectorAll 返回数组(如果找不到返回空数组)