AttributesToken (EN)

Table of Contents

• Introduction
• Properties
  • name
  • attributes
  • className
  • classList
  • id
  • sanitized
• Methods
  • getAttrTokens
  • getAttrToken
  • getAttr
  • lint
  • sanitize
  • cloneNode
  • setAttr
  • hasAttr
  • getAttrNames
  • getAttrs
  • removeAttr
  • toggleAttr

Other Languages

• 简体中文

Introduction

Attributes of extension tags, HTML tags and tables.

✅ Available in the Mini and Browser versions.

Properties

name

✅ Expand

type: string
The name of the tag in lowercase, read-only.

// name
var attrs = Parser.parse('<REF/>').querySelector('ext-attrs');
assert.equal(attrs, '');
assert.strictEqual(attrs.name, 'ref');

attributes

Expand

type: Record<string, string | true>
See getAttrs method, read-only.

className

Expand

type: string
The class attribute as a string.

// className
var attrs = Parser.parse('<p class="a b">').querySelector('html-attrs');
assert.equal(attrs, ' class="a b"');
assert.strictEqual(attrs.className, 'a b');
attrs.className = 'a';
assert.equal(attrs, ' class="a"');

classList

Expand

type: Set<string>
The class attribute as a Set, read-only.

// classList
var attrs = Parser.parse('{|class="a b"\n|}').querySelector('table-attrs');
assert.equal(attrs, 'class="a b"');
assert.deepStrictEqual(attrs.classList, new Set(['a', 'b']));

id

Expand

type: string
The id attribute.

// id
var attrs = Parser.parse('<p id=a>').querySelector('html-attrs');
assert.equal(attrs, ' id=a');
assert.strictEqual(attrs.id, 'a');
attrs.id = 'b';
assert.equal(attrs, ' id="b"');

sanitized

Expand

type: boolean
Whether the attributes contain invalid characters, read-only.

// sanitized
var attrs = Parser.parse('{|id=a | class=b\n|}').querySelector('table-attrs');
assert.equal(attrs, 'id=a | class=b');
assert(!attrs.sanitized);

Methods

getAttrTokens

✅ Expand

param: string Attribute name
returns: AttributeToken[]
All AttributeTokens with the specified attribute name.

// getAttrTokens
var attrs = Parser.parse('<p id=a>').querySelector('html-attrs'),
    attr = attrs.querySelector('html-attr');
assert.equal(attrs, ' id=a');
assert.equal(attr, 'id=a');
assert.deepStrictEqual(attrs.getAttrTokens('id'), [attr]);

getAttrToken

✅ Expand

param: string Attribute name
returns: AttributeToken
The last AttributeToken with the specified attribute name.

// getAttrToken
var attrs = Parser.parse('<p id=a id=b>').querySelector('html-attrs'),
    [, attr] = attrs.querySelectorAll('html-attr');
assert.equal(attrs, ' id=a id=b');
assert.equal(attr, 'id=b');
assert.deepStrictEqual(attrs.getAttrToken('id'), attr);

getAttr

✅ Expand

param: string Attribute name
returns: string | true
Get the value of the specified attribute.

// getAttr
var attrs = Parser.parse('<gallery mode="slideshow" showthumbnails></gallery>')
    .querySelector('ext-attrs');
assert.equal(attrs, ' mode="slideshow" showthumbnails');
assert.strictEqual(attrs.getAttr('mode'), 'slideshow');
assert.strictEqual(attrs.getAttr('showthumbnails'), true);

lint

✅ Expand

returns: LintError[]

Report potential grammar errors.

// lint
var attrs = Parser.parse('</p id=a / id=b>').querySelector('html-attrs');
assert.equal(attrs, ' id=a / id=b');
assert.deepStrictEqual(attrs.lint(), [
    {
        severity: 'error',
        message: 'attributes of a closing tag',
        startLine: 0,
        startCol: 3,
        startIndex: 3,
        endLine: 0,
        endCol: 15,
        endIndex: 15,
        excerpt: ' id=a / id=b',
    },
    {
        severity: 'error',
        message: 'containing invalid attribute',
        startLine: 0,
        startCol: 8,
        startIndex: 8,
        endLine: 0,
        endCol: 11,
        endIndex: 11,
        excerpt: ' / id=b',
    },
    {
        severity: 'error',
        message: 'duplicated id attribute',
        startLine: 0,
        startCol: 4,
        startIndex: 4,
        endLine: 0,
        endCol: 8,
        endIndex: 8,
        excerpt: 'id=a',
    },
    {
        severity: 'error',
        message: 'duplicated id attribute',
        startLine: 0,
        startCol: 11,
        startIndex: 11,
        endLine: 0,
        endCol: 15,
        endIndex: 15,
        excerpt: 'id=b',
    },
]);

sanitize

Expand

Remove invalid attributes.

// sanitize
var attrs = Parser.parse('<p / id=a>').querySelector('html-attrs');
assert.equal(attrs, ' / id=a');
attrs.sanitize();
assert.equal(attrs, ' id=a');

cloneNode

Expand

returns: this
Deep clone the node.

// cloneNode
var [ext, html, table] = Parser.parse('<ref name=a/><p id=b>\n{|id=c\n|}')
    .querySelectorAll('ext-attrs, html-attrs, table-attrs');
assert.equal(ext, ' name=a');
assert.equal(html, ' id=b');
assert.equal(table, 'id=c');
assert.deepStrictEqual(ext.cloneNode(), ext);
assert.deepStrictEqual(html.cloneNode(), html);
assert.deepStrictEqual(table.cloneNode(), table);

setAttr

Expand

param: string Attribute name
param: string | boolean Attribute value
Set the specified attribute.

// setAttr
var attrs = Parser.parse('<p id=a>').querySelector('html-attrs');
assert.equal(attrs, ' id=a');
attrs.setAttr('title', 'b');
attrs.setAttr('id', false);
assert.equal(attrs, '  title="b"');

hasAttr

Expand

param: string Attribute name
returns: boolean
Whether the tag has a certain attribute.

// hasAttr
var attrs = Parser.parse('<p id=a>').querySelector('html-attrs');
assert.equal(attrs, ' id=a');
assert(attrs.hasAttr('id'));
assert(!attrs.hasAttr('title'));

getAttrNames

Expand

returns(): Set<string>
Get all attribute names.

// getAttrNames
var attrs = Parser.parse('<p id=a title=b>').querySelector('html-attrs');
assert.equal(attrs, ' id=a title=b');
assert.deepStrictEqual(attrs.getAttrNames(), new Set(['id', 'title']));

getAttrs

Expand

returns: Record<string, string | true>
Get all attributes.

// getAttrs
var attrs = Parser.parse('<gallery mode="slideshow" showthumbnails></gallery>')
    .querySelector('ext-attrs');
assert.equal(attrs, ' mode="slideshow" showthumbnails');
assert.deepStrictEqual(attrs.getAttrs(), {
    mode: 'slideshow',
    showthumbnails: true,
});

removeAttr

Expand

param: string Attribute name
Remove the specified attribute.

// removeAttr
var attrs = Parser.parse('<p id=a>').querySelector('html-attrs');
assert.equal(attrs, ' id=a');
attrs.removeAttr('id');
assert.equal(attrs, ' ');

toggleAttr

Expand

param: string Attribute name
Toggle the specified attribute.

// toggleAttr
var attrs = Parser.parse('<gallery mode="slideshow" showthumbnails></gallery>')
    .querySelector('ext-attrs');
assert.equal(attrs, ' mode="slideshow" showthumbnails');
attrs.toggleAttr('showthumbnails');
assert.equal(attrs, ' mode="slideshow" ');