# # 组件选择器

UIExtension 提供了一种类似 CSS 选择器的语法，可以快速搜索组件。它通常用来配置 fragments的 `target` 属性和搜索组件。

## # 语法

选择器名称 | 示例 | 描述
--- | --- | ---
name selector | `'componentName', 'component_name','component-name', 'component-name1', '1component'` | 组件名称选择器只能包含单字母、数字、下划线或减号字符。
type selector | `'@div','@dropdown-menu', '@print:print-dialog'` | 组件类型是指在布局模板中定义的标记名称，一个类型选择器以@字符开始，且带单字母、数字、下划线和减号符号。有时包括用冒号字符分隔的组件模块名称。
star selector | `'*'` | 选择所有组件。
children selector | `'selector1>selector2'` | 选择所有匹配`selector2`且父级组件是`selector1`的组件。
descendants | `'selector1 selector2'` | 选择所有在`selector1`中的`selector2`组件。
attribute selector | `[attr=value]` | 选择所有属性或者属性名称为`attr` ，且值为`value`的组件。
attribute selector | `[attr^=value]` | 选择所有属性或者属性名称为`attr` ，且值以`value`开头的组件。
attribute selector | `[attr$=value]` | 选择所有属性或者属性名称为`attr` ，且值以`value`结尾的组件。
attribute selector | `[attr*=value]` | 选择所有属性或者属性名称为`attr` ，且值包含`value`的组件。
attribute selector | `[attr!=value]` | 选择所有属性或者属性名称为`attr` ，且值不等于`value`的组件。
method selector | `selector1::childAt(index)` | 选择匹配`selector1`组件的所有第i个子组件
method selector | `selector1::parent()` | 选择匹配 `selector1`的组件的父组件
method selector | `selector1::allAfter()` | 选择位于匹配`selector1`的组件之后的所有兄弟组件
method selector | `selector1::allBefore()` | 选择位于匹配`selector1`的组件之前的所有兄弟组件
index-related selector | `selector1::eq(index)` | 选择匹配`selector1`的第 index 个组件，index 从0 开始
index-related selector | `selector1::last()` | 选择匹配 `selector1` 的最后一个组件
index-related selector | `selector1::first()` | 选择匹配 `selector1` 的第一个组件。其等同于`selector1:eq(0)`。

## # 示例

    <html>
    </html>
    <script>
        UIExtension.PDFUI.module('custom',[])
            .controller('customController', {
                handle: function() {
                    const root = this.component.getRoot();
                    const contextmenuItems = root.querySelectorAll('fv--page-contextmenu>@contextmenu-item');
                    contextmenuItems.forEach(function(contextmenu) {
                        contextmenu.element.style.cssText += 'color: red';
                    })
                }
            })
        var CustomRibbonAppearance = UIExtension.appearances.RibbonAppearance.extend({
            getDefaultFragments() {
                // 移除 export comment 下拉菜单。
                return [{
                    target: 'home-tab-group-hand::childAt(0)',
                    action: 'after',
                    template: `<xbutton class="fv__ui-toolbar-show-text-button">Click me!</xbutton>`
                },{
                    target: 'commentlist-export-comment::parent()',
                    action: 'remove'
                }];
            }
        });

        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomRibbonAppearance,
                addons: []
        });
    </script>

    {
        "iframeOptions": {
            "style": "height: 500px"
        }
    }