dojo:dom函数

最新推荐文章于 2021-08-10 10:47:08 发布

飞瀑

最新推荐文章于 2021-08-10 10:47:08 发布

阅读量518

点赞数

分类专栏： dojo 文章标签： dojo

dojo 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如何使用dojo操作DOM

创建一个简单的HTML页面，放置5个元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo: DOM Functions</title>
        <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
            data-dojo-config="async: true">
        </script>
        <script>
            require(["dojo/domReady!"], function() {

            });
        </script>
    </head>
    <body>
        <ul id="list">
            <li id="one">One</li>
            <li id="two">Two</li>
            <li id="three">Three</li>
            <li id="four">Four</li>
            <li id="five">Five</li>
        </ul>
    </body>
</html>

所有操作DOM的代码在DOM准备完成后才能被执行。

检索

首先，需要知道如何从DOM中获取元素。

最简单的方法：使用dojo/dom的byId方法。向dom.byId传递一个ID参数，使用这个ID检索DOM节点对象。如果没有匹配的节点，返回一个null值。与使用document.getElementById相比，具有两个优势：

敲的代码少；
解决部分浏览器不支持getElementById的问题。

另外，dom.byId传递了一个DOM节点，这对于创建API（需要字符串和DOM节点）有很大帮助。看下面的例子：

// Require the DOM resource
require(["dojo/dom", "dojo/domReady!"], function(dom) {

    function setText(node, text){
        node = dom.byId(node);
        node.innerHTML = text;
    }

    var one = dom.byId("one");
    setText(one, "One has been set");
    setText("two", "Two has been set as well");

});

setText函数设置了节点的文本信息，但是由于它向dom.byId传递了node参数，它将使用字符串类型的ID或DOM节点。

创建DOM节点

使用document.createElement非常繁琐，并且存在跨浏览器问题。最好使用dojo/dom-construct的create方法。它的参数包括：字符串类型的节点名称、对象类型的节点属性、可选的父节点或兄弟节点和可选的相对（父节点或兄弟节点的）位置。它返回一个新的节点元素。看下面的例子：

require(["dojo/dom", "dojo/dom-construct", "dojo/domReady!"],
    function(dom, domConstruct) {

        var list = dom.byId("list"),
            three = dom.byId("three");

        domConstruct.create("li", {
            innerHTML: "Six"
        }, list);

        domConstruct.create("li", {
            innerHTML: "Seven",
            className: "seven",
            style: {
                fontWeight: "bold"
            }
        }, list);

        domConstruct.create("li", {
            innerHTML: "Three and a half"
        }, three, "after");
});

布局

如果已有一个节点，想要放置这个节点需要使用domConstruct.place函数。它的参数包括：

DOM 节点或字符串类型的ID；
作为参照的DOM节点或字符串类型的节点ID；
字符串类型的位置参数（可选），默认是“last"；

在页面上添加几个按钮：

<button id="moveFirst">The first item</button>
<button id="moveBeforeTwo">Before Two</button>
<button id="moveAfterFour">After Four</button>
<button id="moveLast">The last item</button>

下面的例子定义了一个函数，这个函数使用 domConstruct.place把第三个节点在list周围移动。

require(["dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/domReady!"],
    function(dom, domConstruct, on){

        function moveFirst(){
            var list = dom.byId("list"),
                three = dom.byId("three");

            domConstruct.place(three, list, "first");
        }

        function moveBeforeTwo(){
            var two = dom.byId("two"),
                three = dom.byId("three");

            domConstruct.place(three, two, "before");
        }

        function moveAfterFour(){
            var four = dom.byId("four"),
                three = dom.byId("three");

            domConstruct.place(three, four, "after");
        }

        function moveLast(){
            var list = dom.byId("list"),
                three = dom.byId("three");

            domConstruct.place(three, list);
        }

        // Connect the buttons
        on(dom.byId("moveFirst"), "click", moveFirst);
        on(dom.byId("moveBeforeTwo"), "click", moveBeforeTwo);
        on(dom.byId("moveAfterFour"), "click", moveAfterFour);
        on(dom.byId("moveLast"), "click", moveLast);
});

销毁

在dojo中有两种方式来删除节点

dom-construct的destroy方法：销毁节点及其子节点；
dom-construct的empty方法：只销毁给定节点的子节点。

这两个方法都包含一个DOM节点对象参数或字符串类型的ID参数作为它们唯一的参数。

添加两个按钮：

<button id="destroyFirst">Destroy the first list item</button>
<button id="destroyAll">Destroy all list items</button>

编写代码：

function destroyFirst(){
    var list = dom.byId("list"),
        items = list.getElementsByTagName("li");

    if(items.length){
        domConstruct.destroy(items[0]);
    }
}
function destroyAll(){
    domConstruct.empty("list");
}

// Connect buttons to destroy elements
on(dom.byId("destroyFirst"), "click", destroyFirst);
on(dom.byId("destroyAll"), "click", destroyAll);