{"id":2259,"date":"2017-05-08T11:56:08","date_gmt":"2017-05-08T03:56:08","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2259"},"modified":"2017-05-08T11:56:08","modified_gmt":"2017-05-08T03:56:08","slug":"js-%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96-%e4%b9%8bdom%e4%bc%98%e5%8c%96","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2259","title":{"rendered":"js \u6027\u80fd\u4f18\u5316 \u4e4bDOM\u4f18\u5316"},"content":{"rendered":"

DOM\u4f18\u5316<\/p>\n

1. \u6700\u5c0f\u5316\u73b0\u573a\u8ddf\u65b0<\/p>\n

\u6bcf\u4e2a\u5355\u72ec\u7684DOOM\u64cd\u4f5c\u53ef\u4ee5\u770b\u4f5c\u4e00\u4e2a\u73b0\u573a\u66f4\u65b0\uff0c\u73b0\u573a\u8ddf\u65b0\u975e\u5e38\u7684\u6d88\u8017\u6027\u80fd\uff0c\u9700\u8981\u7528\u6700\u5c11\u7684\u73b0\u573a\u8ddf\u65b0\u6765\u4f18\u5316\u7a0b\u5e8f\u6027\u80fd\u3002<\/p>\n

var list = document.getElementById(\"myList\"),\r\nitem,\r\ni;\r\nfor (i=0; i < 10; i++) {\r\n    item = document.createElement(\"li\");\r\n    list.appendChild(item);\r\n    item.appendChild(document.createTextNode(\"Item \" + i));\r\n}\r\n<\/pre>\n
\u4e0a\u9762\u4ee3\u7801\uff0c\u5341\u4e2a\u5faa\u73af\u4e2d\u6bcf\u4e2a\u5faa\u73af\u67092\u4e2aDOM\u64cd\u4f5c\uff08\u73b0\u573a\u8ddf\u65b0\uff09\uff0c10*2 \u4e2a\u73b0\u573a\u8ddf\u65b0\uff0c\u7b97\u6cd5\u7684\u65f6\u95f4\u590d\u6742\u5ea6\u4e3aO\uff08n\uff09\u3002
\n\u4f18\u5316\u7684\u65b9\u6cd5 a. \u4f7f\u7528\u6587\u6863\u788e\u7247\u3002 b.\u4f7f\u7528\u62fc\u63a5html\u5b57\u7b26\u4e32\u7684\u5f62\u5f0f\uff0c\u4e00\u6b21\u66f4\u65b0\u3002<\/p>\n
var list = document.getElementById(\"myList\"),\r\nitem,\r\ni,\r\nfragment = document.createDocumentFragment();\r\nfor (i=0; i < 10; i++) {\r\n    item = document.createElement(\"li\");\r\n    fragment.appendChild(item);\r\n    item.appendChild(document.createTextNode(\"Item \" + i));\r\n}\r\nlist.appendChild(list);\r\n<\/pre>\n
\u4e0a\u9762\u4ee3\u7801\u53ea\u8fdb\u884c\u4e86\u4e00\u6b21\u7684\u73b0\u573a\u8ddf\u65b0\u3002<\/p>\n
var list = document.getElementById(\"myList\"),\r\nitem,\r\ni,\r\nstr = '';\r\nfor (i=0; i < 10; i++) {\r\n    str += '<li>'+ 'item' + i +'<\/li>'\r\n}\r\nlist.InnerHTML(str);\r\n<\/pre>\n
2.\u4f7f\u7528innerHTML
\n\u5bf9\u4e8e\u5927\u91cf\u7684DOM\u64cd\u4f5c\uff0cInnerHTML\u6027\u80fd\u8981\u6bd4createElement() \u548cappendChild()\u8fd9\u6837\u7684DOM\u65b9\u6cd5\u6548\u7387\u9ad8\u5f88\u591a\u3002
\n\u5f53\u628ainnerHTML\u8bbe\u7f6e\u6210\u67d0\u4e2a\u503c\u4e4b\u540e\uff0c\u4f1a\u5728\u540e\u53f0\u751f\u6210\u4e00\u4e2aDOM\u89e3\u6790\u5668\uff0c\u7136\u540e\u4f7f\u7528\u5185\u90e8\u7684DOM\u8c03\u7528\u6765\u521b\u5efaDOM\u7ed3\u6784\uff0c\u800c\u975e\u4f7f\u7528js\u7684DOM\u8c03\u7528\u3002\u5185\u90e8\u7684\u65b9\u6cd5\u662f\u4fbf\u5b9c\u597d\u7684\u800c\u975e\u89e3\u91ca\u6267\u884c\u6240\u4ee5\u66f4\u5feb\u3002
\n\u4e0a\u9762\u7684\u4f8b\u5b50\u5df2\u7ecf\u6709\u4e86\uff0c\u9700\u8981\u6ce8\u610f\u7684\u662f\u4e00\u6b21innerHTML\u4e5f\u662f\u4e00\u6b21\u73b0\u573a\u8ddf\u65b0\uff0c\u4e5f\u9700\u8981\u6700\u5c0f\u6b21\u6570\u5316\u3002<\/p>\n
3.\u4f7f\u7528\u4e8b\u4ef6\u4ee3\u7406
\n\u5927\u591a\u6570Web \u5e94\u7528\u5728\u7528\u6237\u4ea4\u4e92\u4e0a\u5927\u91cf\u7528\u5230\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u3002\u9875\u9762\u4e0a\u7684\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u7684\u6570\u91cf\u548c\u9875\u9762\u54cd\u5e94
\n\u7528\u6237\u4ea4\u4e92\u7684\u901f\u5ea6\u4e4b\u95f4\u6709\u4e2a\u8d1f\u76f8\u5173\u3002\u4e3a\u4e86\u51cf\u8f7b\u8fd9\u79cd\u60e9\u7f5a\uff0c\u6700\u597d\u4f7f\u7528\u4e8b\u4ef6\u4ee3\u7406\u3002<\/p>\n
4.\u6ce8\u610fHTMLCollection<\/p>\n
HTMLCollection\u7684\u4f7f\u7528\u5bf9\u4e8eweb\u6027\u80fd\u7684\u635f\u5bb3\u5f88\u5927\uff0c\u4e0d\u7ba1\u8bbf\u95eeHTMLCollection\u7684\u5c5e\u6027\u8fd8\u662f\u65b9\u6cd5\uff0c\u90fd\u662f\u5728\u6587\u6863\u4e0a\u8fdb\u884c\u67e5\u8be2\u3002\u6700\u5c0f\u5316\u8bbf\u95eeHTMLCollection\u6b21\u6570\u53ef\u4ee5\u6781\u5927\u7684\u6539\u8fdb\u811a\u672c\u7684\u6027\u80fd\u3002<\/p>\n
  var images = document.getElementsByTagName(\"img\"),\r\n  i, len\uff0cimage;\r\n  \/\/len\u907f\u514d\u4e86\u6bcf\u6b21\u53bb\u8bbf\u95ee\u96c6\u5408\u7684length\r\n  \/\/image \u907f\u514d\u4e86\u5faa\u73af\u4f53\u8bbf\u95eecollection\r\n  for (i=0, len=images.length; i < len; i++){\r\n    image = images[i];\r\n  }<\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » js \u6027\u80fd\u4f18\u5316 \u4e4bDOM\u4f18\u5316<\/a><\/p>","protected":false},"excerpt":{"rendered":"
DOM\u4f18\u5316 1. \u6700\u5c0f\u5316\u73b0\u573a\u8ddf\u65b0 \u6bcf\u4e2a\u5355\u72ec\u7684DOOM\u64cd\u4f5c\u53ef\u4ee5\u770b\u4f5c\u4e00\u4e2a\u73b0\u573a\u66f4\u65b0\uff0c\u73b0\u573a\u8ddf\u65b0\u975e\u5e38\u7684\u6d88\u8017\u6027\u80fd\uff0c\u9700\u8981\u7528\u6700\u5c11\u7684\u73b0\u573a\u8ddf\u65b0\u6765\u4f18\u5316\u7a0b\u5e8f\u6027\u80fd\u3002 var list = document.getElement […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[305,9,49],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2259"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2259"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2259\/revisions"}],"predecessor-version":[{"id":2260,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2259\/revisions\/2260"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2259"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}