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
  • toHtml

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 (main)
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 (main)
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']));
attrs.classList.add('c');
assert.equal(attrs, 'class="a b c"');

id

Expand

type: string
The id attribute.

// id (main)
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 (main)
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(), [
	{
		rule: 'no-ignored',
		severity: 'error',
		message: 'attributes of a closing tag',
		startLine: 0,
		startCol: 3,
		startIndex: 3,
		endLine: 0,
		endCol: 15,
		endIndex: 15,
		fix: {
			range: [3, 15],
			text: '',
		},
	},
	{
		rule: 'no-ignored',
		severity: 'warning',
		message: 'containing invalid attribute',
		startLine: 0,
		startCol: 8,
		startIndex: 8,
		endLine: 0,
		endCol: 11,
		endIndex: 11,
		suggestions: [
			{
				desc: 'remove',
				range: [8, 11],
				text: ' ',
			},
		],
	},
	{
		rule: 'no-duplicate',
		severity: 'error',
		message: 'duplicated id attribute',
		startLine: 0,
		startCol: 4,
		startIndex: 4,
		endLine: 0,
		endCol: 8,
		endIndex: 8,
	},
	{
		rule: 'no-duplicate',
		severity: 'error',
		message: 'duplicated id attribute',
		startLine: 0,
		startCol: 11,
		startIndex: 11,
		endLine: 0,
		endCol: 15,
		endIndex: 15,
	},
]);

sanitize

Expand

Remove invalid attributes.

// sanitize (main)
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 (main)
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 | Record<string, string | boolean> Attribute name or attributes
param: string | boolean Attribute value
Set the specified attribute.

// setAttr (main)
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"');
attrs.setAttr({title: false, id: 'a'});
assert.equal(attrs, '  id="a"');

hasAttr

Expand

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

// hasAttr (main)
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 (main)
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 (main)
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 (main)
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 (main)
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" ');

toHtml

Expand

version added: 1.10.0

returns: string
Convert to HTML.

// toHtml (main)
var {firstChild: {firstChild}} = Parser.parse('<p / class=a\nclass=b>');
assert.equal(firstChild, ' / class=a\nclass=b');
assert.strictEqual(firstChild.toHtml(), ' class="b"');