ExtJs之Ext.core.DomQuery

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/45173

文章标签：

#javascript #ViewUI

本文介绍了一个使用 ExtJS 进行 DOM 操作的例子，包括如何创建面板、选择元素和过滤特定 ID 的子元素。此外，还展示了如何获取选中元素的 ID 并将它们以字符串形式返回。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html>

<head>

    <title>ExtJs</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">

        <script type="text/javascript" src="ExtJs/ext-all.js"></script>

        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>

        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
 
    <script type="text/javascript">

            Ext.onReady(function(){

        var panel = new Ext.Panel({

          title: 'SAMPLE',

          renderTo: 'sub1',

          width: '500px',

          html: '<div id="div0" style="height:260px;padding:5px"><div id="div1">我是第一个DIV的文本</div><div id="div2">' +

                '<div id="div3">我是第一个DIV的内容</div></div></div>'

          });

          var tarArry = Ext.query('#div0 div');

          var except = Ext.core.DomQuery.filter(tarArry, "#div1", true);

          var include = Ext.core.DomQuery.filter(tarArry, "#div1", false);

          var isInclude = Ext.core.DomQuery.is(except, '#div0');

          var selectNode = Ext.core.DomQuery.selectNode("div0 div");
 
          function retStr(array){

            var str = "";

            for(var i=0;i<array.length;i++){

              if(i<array.length-1)

                str +=(array[i].id + ";");

              else {

                str += array[i].id;

              }

            }

            return str;

          }

        Ext.Msg.alert('返回结果', "不包含ID为DIV1的所有DIV的ID为： " + retStr(except) +

        "<br>包含ID为DIV1的所有DIV的ID为： " + retStr(include) +

        "<br>通过EXT.CORE.DOMHELPER.IS(EXCEPT, #DIV0的返回结果:)" + isInclude +

        ",<br>表示" + retStr(except) + "是否包含ID为DIV的节点:" +

        "<br>在ID为DIV0的第一个节点的ID是： " + selectNode);

      });

    </script>

</head>

<body>

<div id=sub1></div>

</body>

</html>