AstElement (EN)

Table of Contents

• Introduction
• Properties
  • length ✅
  • children
  • firstElementChild
  • lastElementChild
  • childElementCount
  • parentElement
  • outerText
  • hidden
  • clientHeight
  • clientWidth
• Methods
  • text ✅
  • closest ✅
  • querySelector ✅
  • querySelectorAll ✅
  • lint ✅
  • print 🌐
  • json 🌐
  • removeAt
  • insertAt
  • append
  • replaceChildren
  • setText
  • normalize
  • matches
  • getElementByTypes
  • getElementById
  • getElementsByClassName
  • getElementsByTagName
  • prepend
  • removeChild
  • insertBefore

Other Languages

• 简体中文

Introduction

AstElement is the parent class of non-text nodes. It is modeled after the HTMLElement class, and has properties and methods very similar to the HTMLElement class. AstElement inherits all the properties and methods of the AstNode class which are not repeated here.

✅ Available in the Mini and Browser versions.
🌐 Available in the Browser version.

Properties

length

✅ Expand

type: number
Total number of child nodes.

// length
assert.strictEqual(Parser.parse([[a]]b').length, 2);

// length (main)
var root = Parser.parse([[a]]b');
root.length = 1;
assert.equal(root, '[[a]]');

children

Expand

type: Token[]
Total number of non-text child nodes, read-only.

// children (main)
var root = Parser.parse([[a]]b'),
	{firstChild} = root;
assert.equal(firstChild, '[[a]]');
assert.deepStrictEqual(root.children, [firstChild]);

firstElementChild

Expand

type: Token
First non-text child node, read-only.

// firstElementChild (main)
var root = Parser.parse('b[[a]]'),
	{lastChild} = root;
assert.equal(lastChild, '[[a]]');
assert.strictEqual(root.firstElementChild, lastChild);

lastElementChild

Expand

type: Token
Last non-text child node, read-only.

// lastElementChild (main)
var root = Parser.parse([[a]]b'),
	{firstChild} = root;
assert.equal(firstChild, '[[a]]');
assert.strictEqual(root.lastElementChild, firstChild);

childElementCount

Expand

type: number
Total number of non-text child nodes, read-only.

// childElementCount (main)
assert.strictEqual(Parser.parse([[a]]b').childElementCount, 1);

parentElement

Expand

type: Token
Parent node, alias of the parentNode property, read-only.

outerText

Expand

type: string
Equivalent to the text method, read-only.

hidden

Expand

type: boolean
Whether the node is invisible, read-only.

// hidden (main)
var {firstChild, lastChild} = Parser.parse('<!--a-->__nocc__');
assert.equal(firstChild, '<!--a-->');
assert.equal(lastChild, '__nocc__');
assert(firstChild.hidden);
assert(lastChild.hidden);

clientHeight

Expand

type: number
Inner height, only exists when the innerText property is defined, read-only.

// clientHeight (main)
var {firstChild} = Parser.parse('<pre>a\nb</pre>');
assert.equal(firstChild, '<pre>a\nb</pre>');
assert.strictEqual(firstChild.innerText, 'a\nb');
assert.strictEqual(firstChild.clientHeight, 2);

clientWidth

Expand

type: number
Inner width, only exists when the innerText property is defined, read-only.

// clientWidth (main)
var {firstChild} = Parser.parse('<pre>ab\nc</pre>');
assert.equal(firstChild, '<pre>ab\nc</pre>');
assert.strictEqual(firstChild.innerText, 'ab\nc');
assert.strictEqual(firstChild.clientWidth, 1);

Methods

text

✅ Expand

returns: string
Visible text. See the documentation for each type of nodes for details.

// text
assert.strictEqual(Parser.parse('<!--a-->b{{c|__nocc__}}').text(), 'b{{c|}}');

closest

✅ Expand

param: string Selector
Closest ancestor node.

// closest
var root = Parser.parse('[[a]]'),
	{firstChild: link} = root,
	{firstChild} = link;
assert.equal(link, '[[a]]');
assert.strictEqual(firstChild.closest('root'), root);
assert.strictEqual(firstChild.closest('root, link'), link);

// closest (main)
var root = Parser.parse('[[a]]'),
	{firstChild: link} = root,
	{firstChild} = link;
assert.equal(link, '[[a]]');
assert.strictEqual(firstChild.closest('link#A'), link);
assert.strictEqual(firstChild.closest('root, link#B'), root);

querySelector

✅ Expand

param: string Selector
returns: Token
First descendant node that matches the selector.

// querySelector
var root = Parser.parse('<p><i>'),
	{firstChild} = root;
assert.equal(firstChild, '<p>');
assert.strictEqual(root.querySelector('html'), firstChild);

querySelectorAll

✅ Expand

param: string Selector
returns: Token[]
All descendant nodes that match the selector.

// querySelectorAll
var root = Parser.parse('<p><i>'),
	{firstChild, lastChild} = root;
assert.equal(firstChild, '<p>');
assert.equal(lastChild, '<i>');
assert.deepStrictEqual(root.querySelectorAll('html'), [
	firstChild,
	lastChild,
]);

lint

✅ Expand

returns: LintError[]
Report potential grammar errors. See the documentation for each type of nodes for details.

print

🌐 Expand

returns: string
Output in HTML format. See the documentation for each type of nodes for details.

json

🌐 Expand

param: string file name
Save the syntax tree as JSON. The saved JSON files are in the printed/ path of WikiParser-Node.

// json
assert.deepStrictEqual(Parser.parse('<!-- a -->').json(), {
	range: [0, 10],
	childNodes: [
		{
			range: [0, 10],
			childNodes: [
				{
					range: [4, 7],
					data: ' a ',
				},
			],
			closed: true,
			type: 'comment',
		},
	],
	type: 'root',
});

removeAt

Expand

param: number Position of the child node to be removed
returns: AstNode
Remove a child node at the specified position.

// removeAt
var root = Parser.parse([[a]]b');
root.removeAt(1);
assert.equal(root, '[[a]]');

insertAt

Expand

param: AstNode | string Child node to be inserted
param: number Position of the child node to be inserted
returns: AstNode
Insert a child node at the specified position.

// insertAt
var root = Parser.parse('a');
root.insertAt('b', 0);
assert.equal(root, 'ba');

append

Expand

param: AstNode | string Child node to be inserted
Batch insert child nodes at the end.

// append
var root = Parser.parse('a');
root.append('b', 'c');
assert.equal(root, 'abc');

replaceChildren

Expand

param: AstNode | string New child nodes
Replace all child nodes.

// replaceChildren
var root = Parser.parse('a[[b]]');
root.replaceChildren('c', 'd');
assert.equal(root, 'cd');

setText

Expand

param: string New text
param: number Position of the text child node to be modified
returns: string
Modify the text child node.

// setText
var root = Parser.parse([[a]]b');
root.setText('c', -1);
assert.equal(root, [[a]]c');

normalize

Expand

Merge adjacent text child nodes.

// normalize
var root = Parser.parse('[[a]]');
root.append('');
assert.strictEqual(root.length, 2);
root.normalize();
assert.strictEqual(root.length, 1);

// normalize (main)
var root = Parser.parse('a');
root.prepend('b');
assert.strictEqual(root.length, 2);
root.normalize();
assert.strictEqual(root.length, 1);

matches

Expand

param: string Selector
returns: boolean
Check if it matches the selector.

// matches (main)
var {firstChild} = Parser.parse('<br/>');
assert(firstChild.matches('root > :is(#br[selfClosing])'));

getElementByTypes

Expand

param: string Token types delimited by ,
returns: Token
Select by token type.

// getElementByTypes (main)
var root = Parser.parse([[a]]<i>'),
	{firstChild} = root;
assert.equal(firstChild, '[[a]]');
assert.strictEqual(root.getElementByTypes('html, link'), firstChild);

getElementById

Expand

param: string id
returns: Token
Select by id.

// getElementById (main)
var root = Parser.parse('<p id=a>'),
	{firstChild} = root;
assert.equal(firstChild, '<p id=a>');
assert.strictEqual(root.getElementById('a'), firstChild);

getElementsByClassName

Expand

param: string Class name
returns: Token[]
Select by class name.

// getElementsByClassName (main)
var root = Parser.parse(`{|class="a b"
|}<p class="a c"><pre class="a d"></pre>`),
	{childNodes: [table, html, ext]} = root;
assert.equal(table, '{|class="a b"\n|}');
assert.equal(table.childNodes[1], 'class="a b"');
assert.equal(html, '<p class="a c">');
assert.equal(html.firstChild, ' class="a c"');
assert.equal(ext, '<pre class="a d"></pre>');
assert.equal(ext.firstChild, ' class="a d"');
assert.deepStrictEqual(root.getElementsByClassName('a'), [
	table,
	table.childNodes[1],
	html,
	html.firstChild,
	ext,
	ext.firstChild,
]);

getElementsByTagName

Expand

param: string Tag name
returns: Token[]
Select by tag name.

// getElementsByTagName (main)
var root = Parser.parse('<i></i>'),
	{firstChild, lastChild} = root;
assert.equal(firstChild, '<i>');
assert.equal(lastChild, '</i>');
assert.deepStrictEqual(root.getElementsByTagName('i'), [
	firstChild,
	lastChild,
]);

prepend

Expand

param: AstNode | string Child nodes to be inserted
Batch insert child nodes at the beginning.

// prepend (main)
var root = Parser.parse('a');
root.prepend('b', 'c');
assert.equal(root, 'bca');

removeChild

Expand

param: AstNode Child node to be removed
Remove a child node.

// removeChild (main)
var root = Parser.parse('a[[b]]');
root.removeChild(root.firstChild);
assert.equal(root, '[[b]]');

insertBefore

Expand

param: AstNode Child node to be inserted
param: AstNode Reference node
Insert a child node before the specified position.

// insertBefore (main)
var root = Parser.parse('a');
root.insertBefore('b', root.firstChild);
assert.equal(root, 'ba');