dojo:DOM 和HTML

最新推荐文章于 2021-07-05 03:29:22 发布

飞瀑

最新推荐文章于 2021-07-05 03:29:22 发布

阅读量1.6k

点赞数

分类专栏： dojo

dojo 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

dojo/dom

since:	V1.7

定义了核心的dojo dom api。这个模块的标准返回值的类型是dom。

byId()

与document.getElementById()的功能一样，只不过可以在所有浏览器中使用。返回对拥有指定 ID 的第一个对象的引用。

用法：

require(["dojo/dom"], function(dom){
    // fetch a node by id="someNode"
    var node = dom.byId("someNode");
});

上面的node变量是一个本地变量，可以操作它的属性，如innerHTML.

// set some node to say "Hello World"
require(["dojo/dom"], function(dom){
    dom.byId("someNode").innerHTML = "Hello World";
});

如果向byId传递一个domNode的引用，将返回相同的Node.

require(["dojo/dom"], function(dom){
    var node = dom.byId("someNode");
    var other = dom.byId(node);
    console.log(node == other);
});

// output
>>> true

如果向byId传递一个字符串，并且没有找到匹配的domNode，将返回Undefined或null对象。

require(["dojo/dom"], function(dom){
  var node = dom.byId("fooBar");
  if(node){
    node.innerHTML = "I was found!";
  }else{
    console.log("no node with id='fooBar' found!");
  }
});

isDescendant()

是否为后代节点。

require(["dojo/dom"], function(dom){
  dom.isDescendant("someNode", "someOtherNode");
});

参数：

node:domnode或String，要检测的节点；

ancestor:domnode或string，认为可能是这个节点的后代。

require(["dojo/dom", "dojo/domReady!"], function(dom){
  var output = "";
  if (dom.isDescendant("child", "ancestor")){
    output += "'child' is a descendant of 'ancestor'</br>";
  }else{
    output += "'child' is not a descendant of 'ancestor'</br>";
  }
  if (dom.isDescendant("loner", "ancestor")){
    output += "'loner' is a descendant of 'ancestor'</br>";
  }else{
    output += "'loner' is not a descendant of 'ancestor'</br>";
  }
  dom.byId("output").innerHTML = output;
});

setSelectable()

设置一个节点是否可选。

require(["dojo/dom"], function(dom){
  dom.setSelectable("someNode", true);
});

参数：

node：dom节点或字符串；

selectable：布尔值。

require(["dojo/dom", "dojo/on", "dojo/domReady!"], function(dom, on){
  on(dom.byId("button1"), "click", function(){
    dom.setSelectable("model", true);
  });
  on(dom.byId("button2"), "click", function(){
    dom.setSelectable("model", false);
  });
});

dojo/dom-attr

since:	V1.7

定义了核心dojo dom 属性api。标准返回值是domAttr。

has()

检测某个属性是否呈现在某个DOM节点上，若返回是true，则表示有。

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.has("myNode", "someAttr");
});

参数：

node:id或domNode的引用；

attr：属性名称；

result：若包含指定属性则为true。

require(["dojo/dom-attr", "dojo/dom", "dojo/domReady!"], function(domAttr, dom){
  var output = "";
  if (domAttr.has("model", "name")){
    output += "Node model has attribute name <br/>";
    }else{
    output += "Node model does not have attribute name <br/>";
  }
  if (domAttr.has("model", "baz")){
    output += "Node 'model' has attribute baz <br/>";
  }else{
    output += "Node 'model' does not have attribute baz <br/>";
  }
  if (domAttr.has("model", "foo")){
    output += "Node 'model' has attribute foo <br/>";
  }else{
    output += "Node 'model' does not have attribute foo <br/>";
  }
  dom.byId("output").innerHTML = output;
});

get()

获取某个节点的某个属性值。

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.get("myNode", "someAttr");
});

参数：

node:id或对属性所有者的元素的引用；

attr：属性名称。

require(["dojo/dom-attr", "dojo/dom", "dojo/domReady!"], function(domAttr, dom){
  var output = "";
  output += "Node 'model' attribute 'name': "+ domAttr.get("model", "name") + "<br/>";
  output += "Node 'model' attribute 'baz': "+ domAttr.get("model", "baz") + "<br/>";
  output += "Node 'model' attribute 'foo': "+ domAttr.get("model", "foo") + "<br/>";
  dom.byId("output").innerHTML = output;
});

set()

设置dom节点属性。当把函数作为值传递时，要注意：函数并不会直接赋给节点的某个动作响应函数，实际上是这样的：

默认的动作会被删除，新的动作通过dojo.connect()增加进来。这就意味着，事件处理函数属性会被规范化，onsubmit会对非标准动作发出警告。也就是说，应该在被传递的事件对象上，使用evt.preventDefault()取消form的提交动作，而非从事件处理函数本身返回布尔值。

它返回一个dom节点。

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.set("myNode", "someAttr", "value");
});

参数：

node：id或对（要设置属性的）元素的引用；

attr：属性名称，或hash值；

value：如果名称是字符串，则表示要为属性设置的值。

require(["dojo/dom-attr", "dojo/dom", "dojo/domReady!"], function(domAttr, dom){
  var output = "";
  output += "Node 'model' attribute 'baz' is: " + domAttr.get("model", "baz") + "<br/>";
  domAttr.set("model", "baz", "bar");
  output += "Node 'model' attribute 'baz' now is: " + domAttr.get("model", "baz") + "<br/>";
  dom.byId("output").innerHTML = output;
});

设置多个属性：

require(["dojo/dom-attr", "dojo/dom", "dojo/domReady!"], function(domAttr, dom){
  var output = "";
  output += "Node 'model' attribute 'baz' is: " + domAttr.get("model", "baz") + "<br/>";
  output += "Node 'model' attribute 'value' is: " + domAttr.get("model", "value") + "<br/>";
  domAttr.set("model", { baz: "bar", value: "Hello World!" });
  output += "Node 'model' attribute 'baz' now is: " + domAttr.get("model", "baz") + "<br/>";
  output += "Node 'model' attribute 'value' now is: " + domAttr.get("model", "value") + "<br/>";
  dom.byId("output").innerHTML = output;
});

remove()

删除dom节点的某个属性。

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.remove("myNode", "someAttr");
});

参数：

node:id或要删除的属性所在节点的引用；

attr：属性名称。

require(["dojo/dom-attr", "dojo/domReady!"], function(domAttr){
  removeDisabled = function(){
    domAttr.remove("model", "disabled");
  }
});

getNodeProp()

与domAttr.get对应。与get不同的是，如果某个property没有设置或呈现出来，那么它会使用attribute。

应用场景：只想读取某个节点的某个属性的默认值或当前值，而不管这个attribute是否已经设置。例如，用户并未指定Input元素的type属性，它的默认值为"text“。并不需要知道所有属性的默认值，也不需要知道浏览器如何解释缺省属性，只管使用domAttr.getNodeProp就行。

没有对应的setNodeProp方法。

// Dojo 1.7+ (AMD)
require(["dojo/dom-attr"], function(domAttr){
  result = domAttr.getNodeProp("myNode", "someProperty");
});

参数：

node	id or reference to the element to get the property on
attr	the attribute property name

例子：

require(["dojo/dom-attr", "dojo/dom"], function(domAttr, dom){

  function showAttribute(name){
    var result = domAttr.getNodeProp("model", name);
    var output = dom.byId("output").innerHTML;
    output += name + " is '" + result + "' <br/>";
    dom.byId("output").innerHTML = output;
  }

  checkAttributes = function(){
    showAttribute("id");
    showAttribute("type");
    showAttribute("name");
    showAttribute("value");
    showAttribute("innerHTML");
    showAttribute("foo");
    showAttribute("baz");
  }

});

dojo/dom-construct

since:	V1.7

toDom()

初始化一个HTML片段，并返回对应的DOM。

require(["dojo/dom-construct"], function(domConstruct){
    // Take a string and turn it into a DOM node
    var node = domConstruct.toDom("<div>I'm a Node</div>");
});

参数：

Argument	Type	Description
frag	String	The fragment of HTML to be converted into a node
doc	DocumentNode?	An optional document to use when creating DOM nodes, defaults to`dojo/_base/window::doc` if not specified

require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domConstruct, dom, on){
  on(dom.byId("button1"), "click", function(){
    var row = domConstruct.toDom("<tr><td>bar</td><td>Bar is also good</td></tr>");
    domConstruct.place(row, "example");
  });
});

<button id="button1" type="button">Add a row</button>
<table>
  <thead>
    <tr><th>Example</th><th>Description</th></tr>
  </thead>
  <tbody id="example">
    <tr><td>foo</td><td>Foo is good</td></tr>
  </tbody>
</table>

place()

可以把已有的节点放到HTML的某个位置；可以创建一个新的节点，并到它放到HTML的某个位置。它封装了所有放置节点所必需的代码。

require(["dojo/dom-construct"], function(domConstruct){
  domConstruct.place("someNode", "refNode", "after");
};

返回一个放置的节点。在一个HTML片段中，如果它只有一个根元素，就返回这个根元素节点，否则就返回整个HTML片段。返回的节点可以是以下几种：

常规的DOM元素节点：nodeType为1表示ELEMENT_NODE，如<div>41</div>；
表示一组节点的文档片段：nodeType为11表示ELEMENT_FRAGMENT，如：

<span style="white-space:pre">	</span><p>1st paragraph</p><p>2nd paragraph</p>

注意：DocumentFragment也是一个节点，但不是一个元素，它不支持InnerHTML,style或其它元素的属性。

属性：

node：字符串或domNode。如果是以"<"开头的字符串，就假定它是一个HTML代码片段；否则是一个DOM节点的ID；

注意：

一个HTML代码片段可能有多个top node(首节点）;
如果HTML片段无效，那么初始化结果是undefined；
初始化一个HTML片段时，对这个片段的所属节点的引用被使用。

refNode：字符串或domNode。节点放置的位置。字符串表示节点的ID。

pos：字符串。可选参数。“before”, “after”, “replace”, “only”, “first”, or “last”.缺省为”last“。”only"表示替换refNode所有子节点。如果位置参数是一个数字，表示这个节点应该放在refNode的第几个子节点上。

require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domConstruct, dom, on){
  var n = 0;
  on(dom.byId("placeBA"), "click", function(){
    domConstruct.place("<div class='node'>new node #" + (++n) + "</div>", "refBA",
      dom.byId("posBA").value); // before/after
  });
});

<p>
  <button id="placeBA">Place node</button>
  <select id="posBA">
    <option value="before">before</option>
    <option value="after">after</option>
  </select>
</p>
<p>
  <div>before: 1st</div>
  <div>before: 2nd</div>
  <div id="refBA" class="ref">
    <div class="child">the reference node's child #0</div>
    <div class="child">the reference node's child #1</div>
    <div class="child">the reference node's child #2</div>
  </div>
  <div>after: 1st</div>
  <div>after: 2nd</div>
</p>

替换

采用替换方式来放置节点的方法： dojo/dom-construct::create()。使用指定的标签创建一个节点，并应用可选的 dojo/dom-attr::set()和

place()。虽然创建的节点部分并不丰富，但是它可以在不使用杂乱的字符串的情况下，动态地设置复杂的属性和样式。另外，dojo/dom-attr::set()与浏览器无关。

require(["dojo/dom-construct", "dojo/_base/window"], function(domConstruct, win){
   domConstruct.create("div", null, win.body(), "first");
});

create()

创建一个节点；
设置属性；
在DOM中放置节点。

也可以为已有的节点添加新的属性、修改位置。

require(["dojo/dom-construct"], function(domConstruct){
    // create a div node
    var node = domConstruct.create("div");
});

属性：

tag:String|DomNode，表示元素的字符串（如“div”, “a”, “p”, “li”, “script”, “br”),或已有的Dom节点；
attrs：Object？可选，哈希对象，设置新建节点的属性值。可以为null；
refNode：String?|DomNode？可选的对节点的引用。place（）使用这个值在DOM中放置新建节点相对这个节点的位置。可以是DomNode的引用或节点的ID；
pos：String？可选的对位置的引用。默认为"last"。如果指定了pos，就要使用refNode。

例子：

创建一个div：

require(["dojo/dom-construct"], function(domConstruct){
  var n = domConstruct.create("div");
});

require(["dojo/dom-construct"], function(domConstruct){
  var n = domConstruct.create("div", { innerHTML: "<p>hi</p>" });
});

向<body>尾部添加没有属性的div：

require(["dojo/dom-construct", "dojo/_base/window"], function(domConstruct, win){
  var n = domConstruct.create("div", null, win.body());
});

向<body>添加一个div作为第一个子节点：

require(["dojo/dom-construct", "dojo/_base/window"], function(domConstruct, win){
  var n = domConstruct.create("div", null, win.body(), "first");
});

修饰并修改已有节点的位置：

require(["dojo/dom-construct", "dojo/_base/window"], function(domConstruct, win){
  domConstruct.create(node, { style: { color: "red" } }, win.body());
});

Creating and/or placing with place()

如果只是利用一个HTML代码片段创建一个没有属性的节点，使用 dojo/dom-construct::place()。

require(["dojo/dom-construct", "dojo/_base/window"], function(domConstruct, win){
  domConstruct.place("<a href='foo.html' title='Goto FOO!'>link</a>", win.body());
});

Setting attributes with dojo/dom-attr::set()

对已有的节点设置属性而不修改位置，使用 dojo/dom-attr::set() 。

// duplicating the following line with domAttr.set():
// var n = domConstruct.create(node, { innerHTML: "<p>hi</p>" });

require(["dojo/dom-attr"], function(domAttr){
  domAttr.set(node, "innerHTML", "<p>hi</p>");
});

empty()

将DOM元素的内容设为空，清除节点所有的子节点。只能用于DomNode，没有返回值。

require(["dojo/dom-construct"], function(domConstruct){
  // Empty node's children byId:
  domConstruct.empty("someId");
});

node

String|DomNode

A reference to a DOM node or an id

require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domConstruct, dom, on){
  on(dom.byId("progButtonNode"), "click", function(){
    domConstruct.empty("testnode1");
    dom.byId("result1").innerHTML = "TestNode1 has been emptied.";
  });
});

Empty all nodes in a list by reference使用引用清空一个列表的所有节点

使用empty()。

清除css类为red的列表中所有的节点：

require(["dojo/dom-construct", "dojo/query", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domConstruct, query, dom, on){
  on(dom.byId("progButtonNode2"), "click", function(){
    query(".red").forEach(domConstruct.empty);
    dom.byId("result2").innerHTML = "All red nodes were emptied.";
  });
});

destroy()

销毁一个DOM元素。删除节点的所有子节点和节点本身。

require(["dojo/dom-construct"], function(domConstruct){
  // Destroy a node byId
  domConstruct.destroy("someId");
});

Destroy a single node销毁单个节点

使用节点ID销毁单个节点：

require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domConstruct, dom, on){
  on(dom.byId("progButtonNode"), "click", function(){
    domConstruct.destroy("testnode1");
    dom.byId("result1").innerHTML = "TestNode1 has been destroyed.";
  });
});

Destroy all nodes in a list by reference通过节点引用销毁所有节点

require(["dojo/dom-construct", "dojo/query", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domConstruct, query, dom, on){
  on(dom.byId("progButtonNode2"), "click", function(){
    query(".red").forEach(domConstruct.destroy);
    dom.byId("result2").innerHTML = "All red nodes were destroyed.";
  });
});

dojo/dom-form

since:	V1.7

定义了表单处理函数。

fieldToObject()

是dojo XHR子系统处理AJAX类型的请求的方法之一。这个函数将HTML表单字段的值转换为一个字符串或字符串数组。表单中不可用的元素、unchecked radio和 checkboxes会被忽略。多选元素会返回一个字符串数组。
这个函数内部使用了toObject()将每个表单字段转换为值。

require(["dojo/dom-form"], function(domForm){
  var firstInputValue = domForm.fieldToObject("firstInput");
});

Attributes

inputNode

String||DomNode

The form field node to be converted表示要转换的表单字段

使用fieldToObject()获取一个字段的值：

require(["dojo/dom-form", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domForm, dom, on){
  on(dom.byId("convertFields"), "click", function(){
    var shape = domForm.fieldToObject("shape");
    var colors = domForm.fieldToObject(dom.byId("myform").color);

    // Attach it into the DOM as pretty-printed text.
    dom.byId("output").innerHTML = "Shape is: " + shape + ", Colors is an array: "+ colors;
  });
});

<button id="convertFields">Click to convert the form to an object</button><br><br>
<b>The FORM</b><br><br>
<form id="myform">
   <input id="shape" type="text" name="shape" value="round">
   <select name="color" multiple>
      <option selected value="red">Red</option>
      <option value="blue">Blue</option>
      <option selected value="green">Green</option>
   </select>
</form>
<br><br>
<b>The form as an object:</b>
<pre id="output"></pre>

toObject()

是dojo XHR子系统处理AJAX类型的请求的方法之一。这个函数使用HTML表单节点，并将表单元素转换为一个名称-值对的javascript对象。表单中不可用的元素、unchecked radio和 checkboxes会被忽略。可以对结果对象作下一步处理。

注意：表单可以包含dijit.form.*项。

require(["dojo/dom-form"], function(domForm){
  var formObj = domForm.toObject("myId");
});

<pre name="code" class="html"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="../../Scripts/dojo/dojo/dojo.js"></script>
</head>
<body>
    <p>
        <button id="convertForm">Click to convert the form to an object</button></p>
    <p>The FORM</p>
    <form id="myform">
        <p>
            text1:
            <input type="text" name="text1" value="value1"><br>
            text2:
            <input type="text" name="text2" value="value2"><br>
            cb_group.foo:
            <input id="f6_checkbox1" type="checkbox" name="cb_group" value="foo" checked><br>
            cb_group.boo:
            <input id="f6_checkbox2" type="checkbox" name="cb_group" value="boo"><br>
            radio_group.baz:
            <input id="f6_radio1" type="radio" name="radio_group" value="baz"><br>
            radio_group.bam:
            <input id="f6_radio2" type="radio" name="radio_group" value="bam" checked><br>
            radio_group.baf:
            <input id="f6_radio3" type="radio" name="radio_group" value="baf">
        </p>
    </form>
    <p>The form as an object:</p>
    <pre id="output"></pre>
    <script type="text/javascript">
        require(["dojo/dom-form", "dojo/dom", "dojo/on", "dojo/json", "dojo/domReady!"],
            function (domForm, dom, on, JSON) {
                on(dom.byId("convertForm"), "click", function () {
                    var formObject1 = domForm.toObject("myform");
                    dom.byId("output").innerHTML = JSON.stringify(formObject1);
                });
            });
    </script>
</body>
</html>

toQuery()

同上面一样，将HTML表单节点中的表单元素转换为适用于URI的查询字符串。

require(["dojo/io-query", "dojo/dom-form"], function(ioQuery, domForm){
  ioQuery.objectToQuery(domForm.toObject("formid"));
});

require(["dojo/dom-form"], function(domForm){
  var formQuery = domForm.toQuery("myId");
});

toJson()

将表单节点中的元素转换为JSON字符串。

require(["dojo/dom-form","dojo/json", function(domForm, JSON){
  JSON.stringify(domForm.toObject("formid"));
});

require(["dojo/dom-form"], function(domForm){
  var formJson = domForm.toJson("myId");
});

dojo/dom-geometry

dojo/dom-geometry::position()

获取所传递的元素的位置和大小。如果IncludeScroll==false，是相对视图点的；如果为true则是相对文档根节点的。

将一个DOM节点居中：

require(["dojo/dom-geometry", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"],
function(domGeom, dom, style, on){
  var lastX = 0,
      lastY = 0;
  on(dom.byId("doit"), "click", function(){
    var divInfo = domGeom.position("div1", true), // use true to get the x/y relative to the document root
        span = dom.byId("span1"),
        spanInfo = domGeom.position(span, true);
    lastX += divInfo.x - spanInfo.x + (divInfo.w - spanInfo.w) / 2;
    lastY += divInfo.y - spanInfo.y + (divInfo.h - spanInfo.h) / 2;
    style.set(span, {
      left: lastX + "px",
      top: lastY + "px"
    });
  });
});

<span id="span1" class="centered" style=""></span>
<div id="div1" class="container" style=""></div>
<button id="doit" type="button">Click to center the image over the frame</button>

.container {
    background: url("../../dojo/frame.png") no-repeat;
    width: 237px;
    height: 181px;
}

.centered {
    background: url("../../dojo/img.png") no-repeat;
    width: 171px;
    height: 121px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid white;
}

飞瀑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
dojo:DOM 和HTML

dojo/domsince:V1.7定义了核心的dojo dom api。这个模块的标准返回值的类型是dom。byId()与document.getElementById()的功能一样，只不过可以在所有浏览器中使用。返回对拥有指定 ID 的第一个对象的引用。用法：require(["dojo/dom"], function
复制链接

扫一扫

专栏目录