ExtJS DOM操作-Element类 节点增删改查

更新记录

更新记录

2022年12月3日 更新创建DOM元素。
2022年12月2日 更新节点Text操作内容。
2022年7月19日 发布。
2022年7月6日  从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

DOM操作-节点管理-增加

创建节点

创建DOM元素

Ext.core.DomHelper.createDom({})

支持的配置项：

tag: this is used to define the element's tag (for example, div)
children (or cn): this is used to define an array of sub elements defined in the same way
cls: this will be mapped to the element's class attribute
html: the content to be assigned to the inner HTML of the element

添加子节点

element.appendChild ( el, [returnDom] ) : Ext.dom.Element/HTMLElement 

说明：参数el可以是String/HTMLElement/Ext.dom.Element/Object类型

添加子节点（将节点附加）

element.appendTo ( el ) : Ext.dom.Element

说明：
参数el可以是String/HTMLElement/Ext.dom.Element类型

创建子节点

element.createChild ( config, [insertBefore], [returnDom] ) : Ext.dom.Element/HTMLElement 

字符串形式：

elem.createChild('<div>Panda666</div>');

对象形式：

//创建子节点
elem.createChild(
    {
        id: 'panda',
        tag: 'div',
        style: 'border:1px solid #ccc;height:200px;width:200px;',
        children: {
            id: 'cat',
            tag: 'div',
            style: 'border:1px solid #fff;height:100px;width:100px;'
        }
    }
);

指定插入的位置

elem.createChild("<div>cat</div>",elem.dom.childNodes[4]);

插入子节点

//创建元素插入到子元素的第一个
elem.insertFirst({
    id: 'cat',
    tag: 'div',
    html: 'cat'
});

插入指定位置

插入html dom元素

var newClassSystemEl = Ext.core.DomHelper.append(El, '<li>New Class System</li>');

或者

var newClassSystemEl = Ext.core.DomHelper.append(F,{
    tag: 'li',
    html: 'New Class System'
})

或者

var h1 = Ext.DomHelper.createDom({
  tag: "h1",
  html: "This is the title!"
});

Ext.getBody().appendChild(h1);

ajax加载元素内容

指定为只是简单的插入

elem.load({
    url:'/data.html',
    scripts: false
});

指示插入内容并包含JavaScript代码

elem.load({
    url:'/data.html',
    scripts: true
});

DOM操作-节点管理-删除

移除元素

注意：移除元素同时会移除其子元素

elem.remove();

DOM操作-节点管理-修改

插入到任意节点之前/之后

The insertBefore、insertAftermethod of Ext.core.DomHelper

插入到指定节点后

element.insertAfter ( el ) : Ext.dom.Element

插入到指定节点前

element.insertBefore ( el ) : Ext.dom.Element

插入到前或后节点

element.insertSibling ( el, [where], [returnDom] ) : Ext.dom.Element/HTMLElement 

插入或创建子节点到第一个位置

element.insertFirst ( el, [returnDom] ) : Ext.dom.Element/HTMLElement 

设置节点的内容

Ext.get('domId').update('文本');

插入HTML内容

element.insertHtml ( where, html, [returnEl] ) : HTMLElement/Ext.dom.Element

替换节点

element.replace ( el, [destroy] ) : Ext.dom.Element

替换节点

element.replaceWith ( el ) : Ext.dom.Element

DOM操作-节点管理-查询

查询多个子节点

.query ( selector, [asDom] ) : HTMLElement[]/Ext.dom.Element[]

说明：
第一个参数selector参数使用CSS选择器语法
第二个参数asDom表示是否结果集转为Ext.dom.Element[]
默认为true，不进行转换，返回HTMLElement[]
false 则返回Ext.dom.Element[]
查找到则返回DOM元素，没有查找到则返回空数组
实例：

element.query('.foo');
element.query('.foo', false);
Ext.fly(document).query('.foo');

查询单个子节点

.selectNode ( selector, [asDom] ) : HTMLElement/Ext.dom.Element

说明：
第一个参数selector参数使用CSS选择器语法
第二个参数asDom表示是否结果集转为Ext.dom.Element[]
默认为true，不进行转换，返回HTMLElement[]
false 则返回Ext.dom.Element[]

实例：

element.selectNode('.foo');
element.selectNode('.foo', false);

查询单个子节点

.select ( selector, composite ) : Ext.dom.CompositeElementLite/Ext.dom.CompositeElement

说明：
与.selectNode基本相似，但返回值不同
第二个参数是一个boolean类型值
用于确定返回CompositeElement还是CompositeElementLite

实例：

element.select('.foo');
element.select('.foo', true);

查询单个子节点（直接子节点）

element.child ( selector, [returnDom] ) : HTMLElement/Ext.dom.Element 

查询单个子节点（向下查找）

element.down ( selector, [returnDom] ) : HTMLElement/Ext.dom.Element 

注意：
使用CSS语法
只会返回查找到的第一个子元素
实例：

var childElement = elem.down('div');

查询单个子节点（第一个满足的）

element.first ( [selector], [returnDom] ) : Ext.dom.Element/HTMLElement

注意：会跳过文本节点

查询单个子节点（最后一个满足的）

element.last ( [selector], [returnDom] ) : Ext.dom.Element/HTMLElement

注意：会跳过文本节点

查询单个子节点（通过子节点的Id）

element.getById ( id, [asDom] ) : Ext.dom.Element/HTMLElement

查询子节点的位置

element.indexOf ( childEl ) : Number

查询父节点

element.parent ( [selector], [returnDom] ) : Ext.dom.Element/HTMLElement

查询父节点

element.findParent ( simpleSelector, [limit], [returnEl] ) : HTMLElement/Ext.dom.Element

注意：包含自身

查询父节点

element.findParentNode ( simpleSelector, [limit], [returnEl] ) : HTMLElement/Ext.dom.Element

注意：不包含自身

获得上一个兄弟节点

element.prev ( [selector], [returnDom] ) : Ext.dom.Element/HTMLElement 

获得下一个兄弟节点

element.next ( [selector], [returnDom] ) : Ext.dom.Element/HTMLElement 

检测子节点是否存在

element.contains ( element ) : Boolean 

检测节点是否匹配

element.is ( selector ) : Boolean 

检测是否祖先

element.isAncestor ( el ) : Boolean 

检测节点是否可以聚焦

element.isFocusable ( skipVisibility ) : Boolean 

检测节点是否是可输入字段

element.isInputField Boolean 

检测节点是否可以滚动

element.isScrollable Boolean 

检查节点样式是否等于给定值

element.isStyle ( style, val ) : Boolean 

检测节点是否可见

element.isVisible ( [deep], [mode] ) : Boolean

获得节点所属于的组件

element.component : Ext.Component

获得节点的HTML字符串

element.getHtml() String

获得节点的Id

element.getId() String

获得选中的文本信息

element.getTextSelection() Array