Dojo.js---(5)[dom和domConstruct]

239 阅读1分钟
  • dom

    • byID
    require(["dojo/dom"], function(dom){
        var n = dom.byId("foo");
    });
    
    • 检查节点是否存在,并使用它
    require(["dojo/dom"], function(dom){
        var n = dom.byId("foo");
        if(n){
        	//...
        }
    });
    
    • isDescendant barfoo的后代
    let result = dom.isDescendant("bar", "foo");
    console.log(result);
    
  • dom-attr(获取HTML元素上的属性) 第一个参数为节点,或者直接写id,第二个参数为属性名

    • get
      domAttr.get("foo", "name");//
      //属性名找不到返回null
      //id找不到报错
    
    • has(检查是否有该属性)
    • remove(删除属性)
    • set(设置属性) 新增第三个参数属性值
  • dom-class(对节点上的class进行操作) 第一个参数为节点,或者直接写id,第二个参数为class名

    • add(添加class) 添加多个类用空格隔开或者使用数组
    require(["dojo/query"], function(query){
     query("ul > li").addClass("firstLevel");
     });
    
    
    • container(查找class)

    • remove(删除class)

      要删除的可选String类名,或者几个以空格分隔的类名,或者一个类名数组。如果省略,将删除所有类名。

    • replace(node,addClassStr,removeClassStr)

      • 节点
      • 新增的class
      • 移除的class (不写默认移除所有)
    • toggle(node,classStr,condition)

      • 节点
      • 类名称
      • true为添加,false为移除
  • construct

    • create(tag,attrs,refNode,pos)
      • 标签
      • 属性
      • 需要放置在某个节点下id或者dojo.body()
      • 位置 first after before last replace
      domConstruct.create(
        "a",
        {
          href: "index.html",
          title: "baidu",
          target: "_blank",
          innerHTML: "跳转",
        },
        "greeting",
        "first"
      );
      
    • place
    <script>
      require(["dojo/dom", "dojo/dom-construct"], function (dom, domConstruct) {
        var greetingNode = dom.byId("greeting");
        domConstruct.place("<em> Dojo!</em>", greetingNode);
      });
    </script>