Nashi

Element

parent()

// Getter
parent(): QueryResult;

Return element's parentNode .

Example

<body>
  <div>
    <h2>
      <p>nashi is perfect!</p>
      <em>nashi is perfect!</em>
    </h2>
  </div>
</body>

const dv = nashi("div")
console.log(dv.parent().node); // [body]

child()

alias: children()

// Getter
child(): QueryResult;

Return element's childNode[] .

Example

const h2 = nashi("h2")
console.log(h2.child().node); // [p, em]

firstChild()

// Getter
firstChild(): QueryResult;
// Setter
firstChild(queryResult: QueryResult): QueryResult;

Get the first child of the element, or insert an element before the element's first child .

Example

const h2 = nashi("h2")
// Getter
console.log(h2.firstChild().node); // [p]

// Setter
h2.firstChild(nashi.create("span").text("nashi"))
console.log(h2.firstChild().node); // [span]

lastChild()

// Getter
lastChild(): QueryResult;
// Setter
lastChild(queryResult: QueryResult): QueryResult;

Get the last child of the element, or append an element to the element's last child .

Example

const h2 = nashi("h2")
// Getter
console.log(h2.lastChild().node); // [em]

// Setter
h2.lastChild(nashi.create("span").text("nashi"))
console.log(h2.lastChild().node); // [span]

hasChild()

// Getter
hasChild(): boolean;

Return true if the element has child nodes or text nodes .

Example

<h2>
  <span></span>
  <p>nashi is perfect!</p>
</h2>

const h2 = nashi("h2")
console.log(h2.hasChild()); // true

const para = nashi("p")
console.log(para.hasChild()); // true

const span = nashi("span")
console.log(span.hasChild()); // false

before()

// Setter
before(queryResult: QueryResult): QueryResult;

Insert a element before the element .

Example

<h2>
  <em>nashi is perfect!</em>
</h2>

const span = nashi.create("span").text("nashi is perfect!")
const em = nashi("em")
em.before(span)

<!-- the result -->
<h2>
  <span>nashi is perfect!</span>
  <em>nashi is perfect!</em>
</h2>

after()

// Setter
after(queryResult: QueryResult): QueryResult;

Insert a element after the element .

Example

<h2>
  <em>nashi is perfect!</em>
</h2>

const span = nashi.create("span").text("nashi is perfect!")
const em = nashi("em")
em.after(span)

<!-- the result -->
<h2>
  <em>nashi is perfect!</em>
  <span>nashi is perfect!</span>
</h2>

remove()

// Setter
remove(): QueryResult;

Remove element.

Example

<h2>
  <em>nashi is perfect!</em>
</h2>

const em = nashi("em")
em.remove()

<!-- the result -->
<h2></h2>

index()

// Getter
index(): number;

Get the sorting of the current element in its parentNode .

example

<div>
  <em>nashi is perfect!</em>
  <p>nashi is perfect!</p>
</div>

console.log(nashi("em").index()); // 0
console.log(nashi("p").index()); // 1

next()

// Getter
next(): QueryResult;

Get element's nextSibling .

example

<div>
  <em>nashi is perfect!</em>
  <p>nashi is perfect!</p>
</div>

const em = nashi("em")
console.log(em.next().node); // [p]

prev()

// Getter
prev(): QueryResult;

Get element's previous sibling .

example

const p = nashi("p")
console.log(p.prev().node); // [em]

siblings()

// Getter
siblings(): QueryResult;

Get element's all siblings .

example

<div>
  <span>nashi</span>
  <p>nashi is perfect!</p>
  <em>nashi</em>
</div>

const para = nashi("p")
console.log(para.siblings().node) // [span, em]

append()

// Setter
append(queryResult: QueryResult): QueryResult;

Append QueryResult to the element . Its usege is similar to lastChild() .

example

<div>
  <span>nashi is perfect!</span>
</div>

const para = nashi.create("p").text("nashi")
const dv = nashi("div")
dv.append(para)

<!-- the result -->
<div>
  <span>nashi is perfect!</span>
  <p>nashi</p>
</div>

empty()

// Setter
empty(): QueryResult;

Remove all childNodes .

example

<div>
  <span>nashi is perfect!</span>
  <p>nashi</p>
  <em>nashi</em>
</div>

const dv = nashi("div")
dv.empty()

<!-- the result -->
<div></div>

show()

show(): QueryResult;

Set element.style.display to '' .

example

<div>
  <span>nashi is perfect!</span>
</div>

const p = nashi("p")
p.hide()
p.show()

<!-- the result -->
<div></div>

hide()

hide(): QueryResult;

Set element.style.display to 'none' .

example

<div>
  <span>nashi is perfect!</span>
</div>

const span = nashi("span")
span.hide()

<!-- the result -->
<div></div>

toggle()

toggle(): QueryResult;

Set element.style.display is 'none' , set element.style.display to '' , otherwise set it to 'none' .

example

<div>
  <p style="display: none;">nashi is perfect!</p>
  <h1>nashi is perfect!</h1>
</div>

const p = nashi("p")
const h1 = nashi("h1")
p.toggle()
h1.toggle()

<div>
  <p>nashi is perfect!</p>
  <h1 style="display: none;">nashi is perfect!</h1>
</div>

draggable()

// Getter
draggable(): null | true | false;
// Setter
draggable(value: boolean): QueryResult;

Get or set element's attrbute draggable .

example

<div>
  <p>nashi is perfect!</p>
  <span draggable="true">nashi</span>
</div>

const p = nashi("p")
const span = nashi("span")
console.log(p.draggable()); // null
console.log(span.draggable()); // true

p.draggable(true)

<div>
  <p draggable="true">nashi is perfect!</p>
  <span draggable="true">nashi is perfect!</span>
</div>

replace()

// Setter
replace(html: string): QueryResult;

Replace element's with html.

wrap()

// Setter
wrap(html: string): QueryResult;

Wrap element with a container.

example

nashi.createElement('p')
  .text('nashi is great!')
  .wrap('div')

<div>
  <p>nashi is great!</p>
</div>

unwrap()

// Setter
unwrap(): QueryResult;

Unwrap an element.

example

nashi('.container').unwrap()

<!-- Before -->
<div class="container">
  <p>Test</p>
</div>

<!-- After -->
<p>Test</p>

Tag

// Getter
tag(): string

Return element's tagName in lowerCase.

example

<div class="container"></div>

console.log(nashi(".container").tag()) // div
Last Updated:
Contributors: AkaraChen