Skip to content

AstElement

Jump to bottom
bhsd edited this page Jan 22, 2024 · 27 revisions
目录

Other Languages

简介

AstElement 是非纯文本节点的基类，仿照 HTMLElement 类设计，属性和方法也和 HTMLElement 类非常相似。AstElement 继承了 AstNode 类的全部属性和方法，这里不再列出。

✅ 在 Mini 和 Browser 版本中可用。
🌐 在 Browser 版本中可用。

Properties

length

✅ 展开

type: number
子节点总数，只读。

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

children

展开

type: Token[]
全部非文本子节点，只读。

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

firstElementChild

展开

type: Token
首位非文本子节点，只读。

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

lastElementChild

展开

type: Token
末位非文本子节点，只读。

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

childElementCount

展开

type: number
非文本子节点总数，只读。

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

parentElement

展开

type: Token
父节点，即 parentNode 属性的别名，只读。

outerText

展开

type: string
等效 text 方法的返回值，只读。

hidden

展开

type: boolean
是否不可见，只读。

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

nextVisibleSibling

展开

type: AstNode
后一个可见的兄弟节点，只读。

// nextVisibleSibling
var {firstChild, lastChild} = Parser.parse([[a]]<!--b-->c');
assert.equal(firstChild, '[[a]]');
assert.equal(lastChild, 'c');
assert.strictEqual(firstChild.nextVisibleSibling, lastChild);

previousVisibleSibling

展开

type: AstNode
前一个可见的兄弟节点，只读。

// previousVisibleSibling
var {firstChild, lastChild} = Parser.parse('a<!--b-->{{c}}');
assert.equal(firstChild, 'a');
assert.equal(lastChild, '{{c}}');
assert.strictEqual(lastChild.previousVisibleSibling, firstChild);

clientHeight

展开

type: number
内部高度，仅当内部文本 innerText 属性有定义时存在，只读。

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

clientWidth

展开

type: number
内部宽度，仅当内部文本 innerText 属性有定义时存在，只读。

// clientWidth
var {firstChild} = Parser.parse('<pre>ab</pre>');
assert.equal(firstChild, '<pre>ab</pre>');
assert.strictEqual(firstChild.clientWidth, 2);

Methods

text

✅ 展开

returns: string
可见部分。

// text
assert.strictEqual(Parser.parse('<!--a-->b').text(), 'b');

normalize

✅ 展开

合并相邻的文本子节点。

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

removeAt

✅ 展开

param: number 移除位置
returns: AstNode
移除子节点。

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

insertAt

✅ 展开

param: AstNode | string 待插入的子节点
param: number 插入位置
returns: AstNode
插入子节点。

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

closest

✅ 展开

param: string 选择器
最近的祖先节点。

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

append

✅ 展开

param: AstNode | string 插入节点
在末尾批量插入子节点。

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

replaceChildren

✅ 展开

param: AstNode | string 新的子节点
批量替换子节点。

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

setText

✅ 展开

param: string 新文本
param: number 文本子节点位置
returns: string
修改文本子节点。

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

lint

✅ 展开

returns: LintError[]
报告潜在语法错误，详见各类型节点的文档。

print

🌐 展开

returns: string
以HTML格式输出。

// print
assert.strictEqual(
	Parser.parse('[[a]]').print(),
	'<span class="wpb-root">'
		+ '<span class="wpb-link">'
			+ '[[<span class="wpb-link-target">a</span>]]'
		+ '</span>'
	+ '</span>',
);

json

🌐 展开

param: string 文件名
将语法树保存为 JSON。保存的 JSON 文件都在 wikiparser-node 的 printed/ 路径下。

// json
assert.deepStrictEqual(Parser.parse('==a==').json(), {
	childNodes: [
		{
			childNodes: [
				{
					childNodes: [
						{
							data: 'a',
						},
					],
					type: 'heading-title',
				},
				{
					childNodes: [
						{
							data: '',
						},
					],
					type: 'heading-trail',
				},
			],
			type: 'heading',
			level: 2,
		},
	],
	type: 'root',
});
assert.deepStrictEqual(Parser.parse('{{{b|B}}}').json(), {
	childNodes: [
		{
			childNodes: [
				{
					childNodes: [
						{
							data: 'b',
						},
					],
					type: 'arg-name',
				},
				{
					childNodes: [
						{
							data: 'B',
						},
					],
					type: 'arg-default',
				},
			],
			name: 'b',
			type: 'arg',
			default: 'B',
		},
	],
	type: 'root',
});
assert.deepStrictEqual(Parser.parse('<br/>').json(), {
	childNodes: [
		{
			childNodes: [
				{
					childNodes: [],
					name: 'br',
					type: 'html-attrs',
				},
			],
			name: 'br',
			type: 'html',
			closing: false,
			selfClosing: true,
		},
	],
	type: 'root',
});
assert.deepStrictEqual(Parser.parse('<!--c').json(), {
	childNodes: [
		{
			childNodes: [
				{
					data: 'c',
				},
			],
			type: 'comment',
			closed: false,
		},
	],
	type: 'root',
});
assert.deepStrictEqual(Parser.parse('{{lc:d}}').json(), {
	childNodes: [
		{
			childNodes: [
				{
					childNodes: [
						{
							data: 'lc',
						},
					],
					type: 'magic-word-name',
				},
				{
					childNodes: [
						{
							childNodes: [],
							type: 'parameter-key',
						},
						{
							childNodes: [
								{
									data: 'd',
								},
							],
							type: 'parameter-value',
						},
					],
					name: '1',
					type: 'parameter',
					anon: true,
				},
			],
			name: 'lc',
			type: 'magic-word',
		},
	],
	type: 'root',
});
assert.deepStrictEqual(Parser.parse('{|\n!e').json(), {
	childNodes: [
		{
			childNodes: [
				{
					childNodes: [
						{
							data: '{|',
						},
					],
					type: 'table-syntax',
				},
				{
					childNodes: [],
					name: 'table',
					type: 'table-attrs',
				},
				{
					childNodes: [
						{
							childNodes: [
								{
									data: '\n!',
								},
							],
							type: 'table-syntax',
						},
						{
							childNodes: [],
							name: 'td',
							type: 'table-attrs',
						},
						{
							childNodes: [
								{
									data: 'e',
								},
							],
							type: 'td-inner',
						},
					],
					type: 'td',
					subtype: 'th',
				},
			],
			type: 'table',
			closed: false,
		},
	],
	type: 'root',
});

destroy

展开

销毁节点。会连锁销毁所有祖先节点，所以使用前请先使用 remove 方法从父节点上剥离。

matches

展开

param: string 选择器
returns: boolean
检查是否符合选择器。

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

querySelector

展开

param: string 选择器
returns: Token
符合选择器的第一个后代节点。

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

getElementByTypes

展开

param: string 以,分隔的节点类型
returns: Token
类型选择器。

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

getElementById

展开

param: string id 名
returns: Token
id 选择器。

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

querySelectorAll

展开

param: string 选择器
returns: Token[]
符合选择器的所有后代节点。

// 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,
]);

getElementsByClassName

展开

param: string 类名之一
returns: Token[]
类选择器。

// getElementsByClassName
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

展开

param: string 标签名
returns: Token[]
标签名选择器。

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

getLine

展开

param: number 行号
returns: string
获取某一行的源文本。

// getLine
assert.strictEqual(Parser.parse('a\nb').getLine(1), 'b');

prepend

展开

param: AstNode | string 插入节点
在开头批量插入子节点。

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

removeChild

展开

param: AstNode 子节点
移除子节点。

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

insertBefore

展开

param: AstNode 插入节点
param: AstNode 指定位置处的子节点
在指定位置前插入子节点。

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

echo

展开

在命令行界面上以 XML 格式彩色打印语法树。

// echo
var root = Parser.parse('[[a]]');
root.echo(); // 请自行运行 Node.js 测试效果

相关 NPM 包

WikiLint

对维基文本批量执行语法检查的命令行工具

eslint-plugin-wikitext

用于维基文本的 ESLint 插件

Related NPM Packages

WikiLint

A command-line tool that performs linting on Wikitext in bulk

eslint-plugin-wikitext

ESLint plugin for Wikitext

Clone this wiki locally