Ext Js中常见的操作DOM的方法-CFANZ编程社区

1：parent方法

parent( [String selector], [Boolean returnDom]

Gets the parent node for this element, optionally chaining up trying to match a selector

Parameters

selector : String
(optional) Find a parent node that matches the passed simple selector
returnDom : Boolean
(optional) True to return a raw dom node instead of an Ext.Element，true返回的是Dom Node，false返回的是Ext.Element

Returns

Ext.Element/HTMLElement
The parent node or null

该方法返回当前节点的父节点，返回一个Ext.Element对象或者HTML Element对象

//返回父节点，类型是Ext.Element
Ext.fly('test').parent();

//返回父节点，类型是HTML Element
Ext.fly('test').parent("", true);

//返回父节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly('test').parent('div');

2: createChild()方法

createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom]

Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.

Parameters

config : Object
DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be automatically generated with the specified attributes.DomHelper中规定的DOM元素配置项对象
insertBefore : HTMLElement
(optional) a child element of this element 该元素的子元素
returnDom : Boolean
(optional) true to return the dom node instead of creating an Element。true表示返回DOM节点代替创建一个元素

Returns

Ext.Element
The new child element

简单例子：createChild.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'helloworld.jsp' starting page</title>
    
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">    
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page"/>

    <link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css" />
    <script type="text/javascript" src="ExtJS4/bootstrap.js"></script>
    
    <script type="text/javascript" src="ExtJS4/ext-all.js" ></script>
    <script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>  
    
     <script type="text/javascript" >
        Ext.onReady(function(){
           var test = Ext.get('test');
       var dhConfig = {
        tag: 'p',
        html: 'Hi I have replaced test'
      };

       test.createChild(dhConfig);   //创建新的节点，放到'test'里面
       test.createChild(dhConfig, test.first());   //创建新的节点，居test第一个元素之前
        });
        
     </script>
     
  </head>
  <body>
  
   <div id="test">我在学习Ext Js，要好好学习，搞定Ext Js <br></div>
   
  </body>
</html>

程序效果：

Ext Js中常见的操作DOM的方法_stylesheet

3：appendChild方法

appendChild( String/HTMLElement/Array/Element/CompositeElement el

Appends the passed element(s) to this element

该方法传入一个或者多个元素，加入到该元素，注意与createChild的区别，appendChild添加的元素是与当前元素(this)同级的

Parameters

4：insertBefore()与insertAfter()方法

insertBefore(String element)表示传入一个元素的参数，将其放置在当前元素之前的位置

insertAfter(String element)表示传入一个元素的参数，将其放置在当前元素之后的位置

insertBefore的用法例子

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">    
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">

  <link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css" />
    <script type="text/javascript" src="ExtJS4/bootstrap.js"></script>
    
    <script type="text/javascript" src="ExtJS4/ext-all.js" ></script>
    <script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>  
    
     <script type="text/javascript" >
        Ext.onReady(function(){
            Ext.get('test2').insertBefore('test1');
        });
        
     </script>
  </head>
  
  <body>
    <div id="test1">test1</div>
    <div id="test2">test2</div>
    <div id="test3">test3</div>
  </body>
  
</html>

程序效果图：

可以发现test2查到了test1的前面

insertAfter的方法

<script type="text/javascript" >
        Ext.onReady(function(){
            Ext.get('test2').insertAfter('test3');
        });
        
     </script>
  </head>
  
  <body>
    <div id="test1">test1</div>
    <div id="test2">test2</div>
    <div id="test3">test3</div>
  </body>

程序效果图：

可以发现test2插在了test3的后面

5：remove方法

该方法表示从DOM里面移除当前元素，并从缓存中删除

6：replaceWith方法

该方法用传入的参数来替换这个元素，参数可以是新元素或是要创建的DomHelper配置项对象，使用方法如下所示：

var test1 = Ext.get('test1');
Ext.get('test2').replaceWith('test3');  //'test3'替换掉'test2'
Ext.get('test2').replaceWith(test1);   //test1替换掉test2

Ext.get('test3').replaceWith({  //使用DomHelper配置项创建新节点，并用该节点替换test3
  tag: 'p',
  cls: 'myCls',
  html: '我好搞定Ext Js'
});

7：wrap方法

该方法表示创建一个新的元素，包括在当前元素的外面

Ext.fly('test3').wrap(); //div包含着test3
Ext.get('test3').wrap({  //使用DomHelper配置项创建新节点，并用该节点包含test3
  tag: 'p',
  cls: 'myCls',
  html: '我好搞定Ext Js'
});