Logo
尚未登录
一秒登录
注册 登录
文档手册
添加文章 编辑

Element类

2024-07-07 00:45:51

class Element

类元素表示DOM元和延伸节点，并使其所有的方法上提供的元件。

Properties:

id

串、身份的要件。

name

串，值的属性"名"的要件。

tagName

string,只读，标签元素上的情况："DIV","跨越"

tag

string,只读，标签元素在下情况："div","跨越"

注意到

 不特定

 className

串，值的属性"类"的元素。

 elementIndex

整数、只读指数的信件，在其父母的孩子的元素。

注意到

不具体的。 可以从不同的nodeIndex.

 innerHTML

string、获取或设置HTML或XML标记内所包含的元素。

 outerHTML

string、获取或设置外HTML或XML标记的单元。 设置outerHTML的元件的有效替代它的新的因素。

 innerText

串，在获得近似于文本的用户将获得如果他们强调的内容元的标和随后复制了它的剪贴板。 作为一个器这将替换元件的儿童所给予的价值。

value

可以报告JS值的任何类型。 类型的价值被确定通过当地行为的附件。

返回的不确定如果元素具有不行为连接。

 firstElementChild

 lastElementChild

 nextElementSibling

 previousElementSibling

只读，这些特性的报告相对应的邻居或者儿童因素的要件。

 childElementCount

整数、只读，报告的数量立即孩子的元素包含在这一个。

offsetLeft,offsetTop、offsetWidth offsetHeight

象素，只读。 对于框级别的元素，offsetTop、offsetLeft、offsetWidth和offsetHeight描述的边框中的一个元素相对于offsetParent.

 offsetParent

元素，只读，一个参考件，其最近的(最近在遏制层次)定位祖先元。

 clientLeft,clientTop

象素，只读的距离元件的边界起源的滚动区域夹矩形。 基本上就是填充的框减区域采取的滚动条。

clientwidth并,clientHeight

象素，只读，尺寸的滚动区域剪辑矩形(填充的框减区域采取的滚动).

 scrollLeft,scrollTop

像素，滚动位置元件的内容。

 scrollPosition

点，滚动位置元件的内容作为一个点。

scrollWidth,scrollHeight

像素、宽度和高度的滚动内容的元素。

style

返回参考元。风类目前的样式的元素。

state

elementState

  • 返回参考元。国家级的(Sciter.JS 特定的).

classList

返回的一个目有以下性质和方法：

  • element.classList.item(n)

  • element.classList.add(name, ...)

  • element.classList.remove(name, ...)

  • element.classList.toggle(name [,force: bool])

  • element.classList.contains(name)

  • element.classList.length

  • element.classList.entries() -阵列，列表类

children

产代表收集的孩子的元素，它是一种对象：

  • element.children[n] -Nth儿童元；

  • element.children.item(n) -Nth儿童元；

  • element.children.length: integer -数量的儿童；

  • for(let child of element.children) -迭代的儿童。

disabled

布尔，在获得回报的真实如果元素或其父母为残疾人，在设定禁止元件及其所有的后裔。 在CSS这种状态是反映为 :disabled

readonly

布尔，在获得回报的真实如果元素或其父母是只读的，在设定宣布件和其所有后裔以只读。 在CSS这种状态是反映为 :readonly .

checked

布尔，获取设置 :checked 国家国旗在CSS。

src

串，适用于元素的支持 src 属性( <img> 例如)。

Methods:

appendChild()

appendChild(node)

增加的节点到结束的列表中的儿童的元素，返回的节点通过。

insertBefore()

element.insertBefore(node, refNode)

插入节点之前一个参考节点作为一个孩子的元素，返回的节点。

insertAfter()

element.insertAfter(node, refNode)

插入一个节点之后的一个参考节点作为一个孩子的元素，返回的节点。

insertAdjacentHTML()

element.insertAdjacentHTML(where, html)

 见insertAdjacentHTML.

removeChild()

element.removeChild(node) : node

删除一个儿童节点从DOM和返回，除节点。

replaceChild()

element.replaceChild(newNode,oldNode)

替换oldNode由newNode.

replaceChildren()

element.replaceChildren([node1[, node2, ...]])

清除元和增加的节点(如果有的话)。

swapWith()

element.swapWith(otherElement)

换DOM地点的这元件和一. 元素应该是兼容的-它是不是可以交换 <td> 和 <li> 例如。

childElement()

element.childElement(n) : element | null

返回n个孩子元件；正是在[0,元素。childElementCount)的范围。

querySelector()

$()

const el = container.$(selector);

 参数：

  • 选择-string,CSS选择的后裔元。

 返回：

  • 第一中所包含的元素相匹配的选择器；

尖

开始选择 > 或 :root> 匹配的直接子元件：

const opt2 = select.$(">option[value='2']");

尖

选择可包括多个群体分离 , :

const firstHeader = section.$("h1,h2");

querySelectorAll()

$$()

const children = container.$$(selector);

 参数：

  • 选择-string,CSS选择的后裔元。

 返回：

  • 列因素相匹配的选择器；

尖

使用的一一列举所有匹配的要素：

for(const option of select.$$("option"))
 console.log(option);

closest()

$p()

const parent = element.$p(selector)

返回的一个因素是最近的祖先流元(或目前件本身)相匹配的选择中给出的参数。

$o()

const owner = this.$o(selector)

所有者元的选择，有助于获得所有人的菜单和弹出窗口。

matches()

$is()

if(this.$is("option:expanded"))
 ...

返回布尔的价值表示是否元将由选定的选择串。

getElementsByClassName()

element.getElementsByClassName(names)

 参数：

  • 名称、字符串中的一个或空间分隔的列表类的名称；

 返回：

  • 列表(array)的元素，它们的后裔，这元，与给予类名称(s)。

getElementsByTagName()

element.getElementsByTagName(tagName)

 参数：

  • tagName,string,签名；

 返回：

  • 列表(array)的元素，它的后代该元素的定的标记。

getElementsByName()

element.getElementsByName(name)

 参数：

  • 名称、字符串值的名属性；

 返回：

  • 列表(array)的元素，它们的后裔，这件给定名称。

hasAttribute()

element.hasAttribute(name)

 参数：

  • 名称、字符串名的一个属性；返回

  • 真的，如果一个属性，给定名称的存在；

getAttribute()

element.getAttribute(name)

 参数：

  • 名称、字符串名的一个属性；返回

  • 串值的一个属性；

  • null如果给定的属性，不存在；

getAttributeNames()

element.getAttributeNames()

返回阵列的串名的属性声明上的元素；

removeAttribute()

element.removeAttribute(name)

 参数：

  • 名称、字符串名的一个属性；

setAttribute()

element.setAttribute(attribute, value)

 参数：

  • 名称、字符串名的一个属性；

  • 值，串价值的一个属性；

getBoundingClientRect()

element.getBoundingClientRect(): Rect

返回Rect境框中的一个元素。 位置的矩形是相对于视的文件。

scrollTo()

element.scrollTo(x,y)

集滚动位置的滚动的元素。

element.scrollTo(options)

集滚动位置的滚动。 选项一个目的是与该领域：

  • position -一点上，滚动的位置点，或

  • left -x滚动位置，如果位置是没有定义，

  • top -y滚动位置，如果位置是不是定义；

  • behavior : "instant" | "smooth" 如果顺利进行动画滚动；

scrollIntoView()

卷轴这个元素纳入滚动的景使得见的-没有遮挡的.

element.scrollIntoView([toTop:true]);

 或

element.scrollIntoView(options);

哪里的选择是对象领域：

  • behavior : "instant" | "smooth" -如果顺利进行动画滚动；

  • block : "start" | "nearest" -定义的垂直位置；

elementFromPoint()

elementFromPoint(x,y):Element

 返回：

  • 子元件的内部这个元素发现，在坐标x/y。 x/y坐标是相对于氟米/顶的元件的内箱；

  • null如果没有子元件被发现。

click()

element.click()

产生的点击事件的元素。

focus()

element.focus()

集输入重要的元素

addEventListener()

addEventListener(type, listener[, options])

 参数：

  • 类型字符串事件名称；

  •  听者，

    • function(event) 功能要求的事件，或者

    • 对象 handleEvent(event) 方法；

  • 选项，可选对象，有以下特性：

    • 捕获、布尔，如果真的那么该事件的处理程序是subcribed的事件在获得(a。k.a. 下沉)阶段；

    • 一旦、布尔，如果真的那么该事件的处理程序将称为只有一次-自动售货机

removeEventListener()

removeEventListener(type, listener)

消除事件类型监听器从本元素。

dispatchEvent()

element.dispatchEvent(event)

援引的事件处理程序同步的元素。 所有适用的事件处理程序被称为和返回之前dispatchEvent()返回。

postEvent()

援引的事件处理程序的异步的元素。 功能入队的事件进入信息队列并立即返回。

尖

不具体、异步版本。dispatchEvent()

Methods (Sciter specific):

on()

element.on(eventname: string, [selector: string,] handler: function): Element

jQuery式的事件订阅、参数：

  • 事串的事件，

    • 可以包含的名字空间的一部分： "click.myns" ;

    • 可以开始 ^ 处理事件在获得阶段；

  • 选择-string,可选择的，CSS选择目标的元素；

  • 处理程序功能(evt，目标)，事件处理职能是：

    • 被称为与 this 设元素这个附加处理程序；

    • 被称为有两个参数 handler(evt,matchedElement) -事件和元件匹配的选择，如果这是给出；

 返回：

  • 该元素自身允许链 on 话；

off()

 element.off(eventname): Element

取消订阅事件处理程序通过的名字 "click" 或者通过namespace ".myns" .

 element.off(handler: function): Element

取消订阅事件处理程序功能的参考。

once()

element.once(eventname: string, [selector: string,] handler: function): Element

同 element.on() 但电话 element.off(handler) 后处理活动一次。

onGlobalEvent()

element.onGlobalEvent(eventname: string, handler: function): Element

事件订阅应用程序范围内的事件(。k.a."全球活动"):

 参数：

  • 名称、字符串任意的事件名称，可能包含的名字空间的一部分： "click.myns" ;

  •  处理程序功能，

    • 处理程序被称作用 this 设置元件；返回

  • 元素本身允许链 onGlobalEvent 呼叫。

尖

元被取消自动时，它得到断开DOM。

全球活动可以发送或发布通过静窗口。发送(活动)和窗口。职位(活动)，并传递给所有用户在所有windows的应用程序。

offGlobalEvent()

element.offGlobalEvent(eventname: string): Element

取消订阅事件处理程序的事件名称(喜欢 "click" )或通过namespace(喜欢 ".myns" ).

element.offGlobalEvent(handler: function): Element

取消订阅事件处理程序通过其参考。

element.offGlobalEvent(): Element

取消所有全球性事件处理程序的元素。

timer()

element.timer(milliseconds, callback: function)

启动计时器元件。 如果元素已经有计时器，回第一次得到删除，新的定时开始，而不是。 这使执行有效的限制。 如果回呼功能返回 true 值然后定时将保持滴答作响(如时间间隔定时器)。 回调被称为与 this 设定为要件。

post()

element.post(function [, avoidDuplicates: true | false])

员额的职能为以后执行。 该职能将执行下一个事件回路迭代。

element.post(function) 从概念上说相当于 setTimeout(function,0) 但是，有两个不同点：

  1. 该功能将被称为与 this 设置元件；

  2. 如果avoidDuplicates是真正的(默认值) element.post 检查的输入队列前发送，如果输入的队列已经包含这件/函对该功能将被称为只有一次。

element.post(event [, avoidDuplicates: true | false] )

员额的实例的事件，该事件的队列。 element.post(event) 是一个相当于postEvent().

clear()

element.clear()

删除内容的元素使得空。

unwrapElement()

element.unwrapElement()

删除该元素自身并将其内容纳入其在DOM中。 以后叫 div.unwrapElement() 在这里：

<body>
 <div>Hello <b>world</b></div> 
</body>

 它将成为

<body>
  Hello <b>world</b>
</body>

wrapNodes()

element.wrapNodes(start:Node,end:Node,wrap:Element)

包裹范围的节点，从开始到结束成包件-相对acction到 unwrapElement() .

checkCommand()

executeCommand()

element.checkCommand(command [, params]): flags;
element.executeCommand(command [, params]): flags

支持的可编辑输入要素： <htmlarea> (所见即所得编辑)， <plaintext> (多行文本编辑)， <textarea> 和 <input|text> .

 参数：

  • 命令、串名的编辑操作；

  • params，可选择参数的操作；
     返回：

  • 整数，进行或标志的命令可用性：

    • 0 -命令是支持在目前的状态，并插入位置；

    • 0x01 -命令应用于目前的状态，并插入位置；

    • 0x02 -命令被禁止，不支持在目前的状态，并插入位置；

 实例：

if(htmlarea.checkCommand("edit:paste") == 0)
 // a) clipboard contains pasteable content and 
 // b) it can be pasted at current caret position 
htmlarea.execCommand("edit:insert-html", html);

插入html在当前插入的位置。 插入操作是可撤销的用户。

TBD...

xcall()

element.xcall(name:string [, arg0, ..., argN]): any

互动与当地行为的附件。

element.xcall("foo") 最终会 handle_scripting_call() 当地行为的附件。

paintBackground

paintContent

paintForeground

paintOutline

element.paintBackground = function(graphics) {...} 
element.paintContent = function(graphics) {...}
element.paintForeground = function(graphics) {...}
element.paintOutline = function(graphics) {...}

立即模式绘图的支持。

功能分配给这些"口"性质将被称为当的元素是呈现在屏幕，使他们可以画任何东西的顶上(或低于)的默认HTML/CSS渲染。 这些功能接受当前形对象的用于绘制的其余部分DOM。

element.requestPaint();

使元素画的区域计划重新绘制的元素。 这将触发 element.paintXXXX 后呼吁(如果有的话)。 在窗，这将最终在InvalidateRect的呼吁。

flushPaint()

element.flushPaint();

部队立即漆元的窗口。 同步，阻挡功能将返回后的窗户表面将进行更新。

谨慎

使用这种方法与照顾和只有当你真正需要它，例如，当你需要更新屏幕之前阻止操作：

 例如：

  progressEl.value = progress;
  progressEl.flushPaint();
  progress = someBlockingOperation();
element.popup(popup:Element | JSX, params : Object )

显示的弹出窗口件或主体信任状(代码)在画布上的弹出窗口在桌面上。 Params是对象可能有以下领域：

  • anchorAt-1..9、参考点锚边界箱(见键盘小键盘的意义);

  • popupAt-1..9、参考点上弹出的保证金盒；

  • x，y-任选的，明确的窗口坐标popupAt点。

  • animationType-可选择的，一个"混合"|"膨胀"|"滑动"|"滚"-窗口类型的外表动画；

  • animationAxis-可选择的，一个"横向"|"垂直的";

  • animationHeading-可选择的，一个"开始到结束"|"终端到启动";

  • animationDuration时的动画；

引擎就会尽量替代弹(元件的内部窗口)，使popupAt的位置是在anchorAt在屏幕上。

尖

弹定位可以被定义在CSS通过的弹出位置。 在这种情况下params可ommited. 尖

弹出动画可以被定义在CSS通过的弹出动画。

takeOff()

element.takeOff(params:object)
element.takeOff()

使元素"的机载"取而代之外的主窗口，params是：

  • params.x , params.y -数字，元件的坐标，视像素的新位置DOM元；

  • params.width , params.height -可选的数字，新的方面在视像素；

  • relativeTo -串，定义含义的x和y中，一个："屏幕"、"文件"、"窗口"，"父母"或"自我"

  • window -串的定义类型的窗口，将举办元件之一：

    • "附加"-附窗口，将移动同步与东道窗口；

    • "分离的"独立的窗口，位置将独立自主的窗口；

    • "弹"-一样的"分离的"窗口，投入也将被安置作为最顶层-在上面的其他窗口在桌面上。

起飞()呼吁没有参数的土地的元件后把它带到其正常的位置它之前，它采取了关闭。

replaceContent()

element.replaceContent(newContent:JSX[,params:object]) : Promise | undefined;

改变元素内容的各种动画影响。

params这是一个对象，可以包含下列领域：

  • params.duration -整数，毫秒的时的动画，可选的，200毫秒，如果不提供；

  • params.ease -string,名的轻松的功能，可选的，"线性"默认使用;

    动画易功能：

    • "linear",

    • "ease","ease-in","ease-in-out","ease-out",

    • "quad-in","quad-out","quad-in-out",

    • "cubic-in","cubic-out","cubic-in-out",

    • "quart-in","quart-out","quart-in-out",

    • "quint-in","quint-out","quint-in-out",

    • "sine-in","sine-out","sine-in-out",

    • "expo-in","expo-out","expo-in-out",

    • "circ-in","circ-out","circ-in-out",

    • "elastic-in","elastic-out","elastic-in-out",

    • "back-in","back-out","back-in-out",

    • "x-back-in","x-back-out","x-back-in-out",

    • "xx-back-in","xx-back-out","xx-back-in-out",

    • "bounce-in","bounce-out","bounce-in-out";

  • params.effect -string,名称的过渡影响的方法，可选的，"混合"默认情况下，一个：

    • "blend",

    • "blend-atop",

    • "slide-top",

    • "slide-bottom",

    • "slide-left",

    • "slide-right",

    • "slide-over-top",

    • "slide-over-bottom",

    • "slide-over-left",

    • "slide-over-right",

    • "remove-top",

    • "remove-bottom",

    • "remove-left",

    • "remove-right",

    • "scroll-top",

    • "scroll-bottom",

    • "scroll-left",

    • "scroll-right"

如果params对象是ommited则的功能并即时替换，相当于 element.patch(JSX,true/*only-children*/) .

尖

如果params目的是提供后能返回 await '能够保证得到解决结束时的动画。

morphContent()

element.morphContent(step:function,params:object)

该方法提供了"手册"画的支持。 该步骤的功能具有以下签名 function step(progress:0.0 ... 1.0): true | false

不会叫步骤的功能与动画框架速传递目前所取得的进展值。 如果功能返回false动画停止。

params可能包含下列领域：

  • params.duration -整，可选的，毫秒的时的动画；

  • params.ease -string,可选的缓解函，请参见参数。缓解上。 此参数确定曲的进展值。

append()

element.append( JSX )

附加元素通过定义的代码表(主体信任状)作为最后的儿童：

  list.append(<li>yet another item</li>);

prepend()

element.prepend( JSX )

插入件作为第一个孩子

content()

element.content(JSX)

替换元件的内容通过代码表(主体信任状):

  div.content(<>Per aspera ad <b>astra</b>!</>);

patch()

element.patch( JSX [, onlyChildren:true] )

修补内容的元素通过代码(主体信任状)使用规则作出反应[或]. 如果第二个参数，提供的是真正的功能的增补程序仅是儿童，但不元本身。

这是一个核心职能的当地实施的反应[或].

componentUpdate()

element.componentUpdate( [obj] )

patces性质和入队的呈现，如果obj性质不同，并大致如下：

if(Object.assignIf(element,obj)) // 1. merge properties and if they are different
  element.post( (element) => { // 2. enqueue update
 let vnode = element.render(); // 3. calls .render() that must return vnode (JSX expression)
    element.patch(vnode); // 4. reconciliation / patching
 });

If obj is ommited则的方法进行uncoditional更新：

 this.patch(this.render())

rangeFromPoint()

element.rangeFromPoint(x,y) : Range | null

返回倒塌的范围(插入的位置)在x/y。 x/a是地方的坐标-相对于原籍国的元件的内部框。

toString()

element.toString() : string

返回的短串表示元。 大多用于调试的目的。

box()

element.box(boxType[,relativeTo[,asPpx]]) : Rect

 参数：

  • boxType、string定特定指标的元素：

    • "内部的"内盒子元件而言CSS框模型；

    • "边境"境框元；

    • "填充"-填充的框元；

    • "保证金"利润的框元；

    • "客户"的客户框元素-滚动的夹区域件，通常就是填充的框减滚动;

    • "内容"的内容概要的元素。 用滚动的元素，这是大小的滚动内容；

    • "插入"符号位置(如果有)；

    • "图标"位置的前景图像(CSS)的元素；

    • "滚动"投客户rect在框中的内容的要素：scroll schema

  • 同时相关，string. 定义偏移的x/y值的返回盒子，一个：

    • 元件为参照其他元素，坐标是相对于元件；

    • "画面"--相对于屏幕上-绝对坐标的元素在屏幕(桌面);

    • "窗口"-相对于客户区的窗口；

    • "文献"--相对于根元文档；

    • "父母"-相对于DOM父母的元素；

    • "容器"--相对于布置集装箱的位置'ed元素，这个告诉的位置相对于最近的位于容器；

    • "自我"-默认情况下，相对于该元素自身，"内"x/y0在这种情况下；

  • asPpx，布尔，如果定义和是真的告诉功能返回坐标在屏幕的像素。 通过默认的功能返回的逻辑CSS素。k.a. 暂-逻辑的单位，1/96的英寸。

 返回：

  •   图形。Rect对象。

create()

静态的，类方法，构造的元素实例：

Element.create(JSX | tag:string) : Element

返回的一个元素构成的无论是从代码表(主体信任状)或通过标签名。 在后一种情况，它的行为，正是因为 document.createElement(tag) .