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

创建时间：2011-07-27 投稿人：浏览次数：6061

1：parent方法

parent( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement

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] ) : Ext.Element

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>

程序效果：

3：appendChild方法

appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element

Appends the passed element(s) to this element

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

Parameters

el : String/HTMLElement/Array/Element/CompositeElement

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"
});

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。

热门文章: Ext Js中常见的操作DOM的方法...

最新文章: MySql插件式的存储引擎