\u5728 Web \u5f00\u53d1\u4e2d，\u52a8\u6001\u64cd\u4f5c DOM \u662f\u524d\u7aef\u5de5\u7a0b\u5e08\u7684\u5fc5\u5907\u6280\u80fd\u3002\u65e0\u8bba\u662f\u6e32\u67d3\u5217\u8868\u3001\u52a0\u8f7d\u66f4\u591a\u5185\u5bb9，\u8fd8\u662f\u5b9e\u73b0\u4ea4\u4e92\u53cd\u9988，\u90fd\u79bb\u4e0d\u5f00\u5411\u9875\u9762\u4e2d\u6dfb\u52a0\u8282\u70b9\u3002\u672c\u6587\u5c06\u7cfb\u7edf\u8bb2\u89e3 DOM \u6dfb\u52a0\u8282\u70b9\u7684\u6838\u5fc3\u65b9\u6cd5\u3001\u4f7f\u7528\u573a\u666f\u548c\u6ce8\u610f\u4e8b\u9879，\u5e76\u901a\u8fc7\u4e30\u5bcc\u7684\u4ee3\u7801\u5b9e\u4f8b\u5e2e\u52a9\u4f60\u5feb\u901f\u638c\u63e1\u3002<\/p>\n
\u5728\u5f00\u59cb\u6dfb\u52a0\u8282\u70b9\u4e4b\u524d，\u5148\u4e86\u89e3 DOM \u8282\u70b9\u7684\u57fa\u672c\u6982\u5ff5\u3002DOM（Document Object Model）\u5c06 HTML \u6587\u6863\u62bd\u8c61\u4e3a\u4e00\u68f5\u8282\u70b9\u6811，\u5e38\u89c1\u7684\u8282\u70b9\u7c7b\u578b\u5305\u62ec\u5143\u7d20\u8282\u70b9\u3001\u6587\u672c\u8282\u70b9\u548c\u5c5e\u6027\u8282\u70b9\u3002<\/p>\n
\u4ee5\u4e0b\u4ee3\u7801\u5c55\u793a\u4e86\u5982\u4f55\u83b7\u53d6\u548c\u68c0\u67e5\u8282\u70b9\u7c7b\u578b：<\/p>\n
\/\/ \u83b7\u53d6\u9875\u9762\u4e2d\u7684\u5143\u7d20\u8282\u70b9
\nconst container = document.getElementById('container');<\/p>\n
\/\/ \u68c0\u67e5\u8282\u70b9\u7c7b\u578b：1 \u8868\u793a\u5143\u7d20\u8282\u70b9，3 \u8868\u793a\u6587\u672c\u8282\u70b9
\nconsole.log(container.nodeType); \/\/ 1
\nconsole.log(container.firstChild.nodeType); \/\/ 3<\/p>\n
\/\/ \u83b7\u53d6\u8282\u70b9\u540d\u79f0
\nconsole.log(container.nodeName); \/\/ DIV<\/p>\n
\u7406\u89e3\u8282\u70b9\u7c7b\u578b\u6709\u52a9\u4e8e\u5728\u6dfb\u52a0\u8282\u70b9\u65f6\u9009\u62e9\u5408\u9002\u7684 API，\u907f\u514d\u56e0\u7c7b\u578b\u4e0d\u5339\u914d\u800c\u51fa\u73b0\u610f\u5916\u9519\u8bef\u3002<\/p>\n
appendChild \u662f\u6700\u57fa\u7840\u7684\u6dfb\u52a0\u8282\u70b9\u65b9\u6cd5，\u5b83\u5c06\u4e00\u4e2a\u65b0\u8282\u70b9\u8ffd\u52a0\u5230\u6307\u5b9a\u7236\u8282\u70b9\u7684\u5b50\u8282\u70b9\u5217\u8868\u672b\u5c3e\u3002<\/p>\n
\/\/ HTML: <ul id="list"><\/ul><\/p>\n
const list = document.getElementById('list');<\/p>\n
\/\/ \u521b\u5efa\u65b0\u7684 li \u5143\u7d20
\nconst newItem = document.createElement('li');
\nnewItem.textContent = '\u82f9\u679c';<\/p>\n
\/\/ \u5c06 li \u8ffd\u52a0\u5230 ul \u4e2d
\nlist.appendChild(newItem);<\/p>\n
\/\/ \u53ef\u4ee5\u8fde\u7eed\u6dfb\u52a0\u591a\u4e2a\u8282\u70b9
\nconst secondItem = document.createElement('li');
\nsecondItem.textContent = '\u9999\u8549';
\nlist.appendChild(secondItem);<\/p>\n
\u6267\u884c\u540e，\u9875\u9762\u4e2d\u7684\u5217\u8868\u4f1a\u4f9d\u6b21\u663e\u793a\u300c\u82f9\u679c\u300d\u548c\u300c\u9999\u8549\u300d\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f，appendChild \u4e00\u6b21\u53ea\u80fd\u6dfb\u52a0\u4e00\u4e2a\u8282\u70b9，\u5982\u679c\u9700\u8981\u6279\u91cf\u6dfb\u52a0，\u53ef\u4ee5\u7ed3\u5408\u5faa\u73af\u4f7f\u7528\u3002<\/p>\n
const fruits = ['\u82f9\u679c', '\u9999\u8549', '\u6a59\u5b50', '\u8461\u8404'];
\nconst list = document.getElementById('list');<\/p>\n
fruits.forEach(fruit => {
\n const li = document.createElement('li');
\n li.textContent = fruit;
\n list.appendChild(li);
\n});<\/p>\n
\u5f53\u9700\u8981\u5728\u67d0\u4e2a\u5b50\u8282\u70b9\u4e4b\u524d\u63d2\u5165\u65b0\u8282\u70b9\u65f6，\u53ef\u4ee5\u4f7f\u7528 insertBefore \u65b9\u6cd5\u3002\u5b83\u63a5\u6536\u4e24\u4e2a\u53c2\u6570：\u8981\u63d2\u5165\u7684\u65b0\u8282\u70b9\u548c\u53c2\u8003\u8282\u70b9\u3002<\/p>\n
\/\/ HTML: <ul id="list"><li>\u82f9\u679c<\/li><li>\u9999\u8549<\/li><\/ul><\/p>\n
const list = document.getElementById('list');
\nconst banana = list.children[1]; \/\/ \u83b7\u53d6\u7b2c\u4e8c\u4e2a li<\/p>\n
\/\/ \u521b\u5efa\u65b0\u8282\u70b9
\nconst newItem = document.createElement('li');
\nnewItem.textContent = '\u8349\u8393';<\/p>\n
\/\/ \u5728\u9999\u8549\u4e4b\u524d\u63d2\u5165\u8349\u8393
\nlist.insertBefore(newItem, banana);<\/p>\n
\u6267\u884c\u540e，\u5217\u8868\u987a\u5e8f\u53d8\u4e3a：\u82f9\u679c\u3001\u8349\u8393\u3001\u9999\u8549\u3002\u5982\u679c\u53c2\u8003\u8282\u70b9\u4e3a null，insertBefore \u7684\u884c\u4e3a\u7b49\u540c\u4e8e appendChild，\u5c06\u8282\u70b9\u8ffd\u52a0\u5230\u672b\u5c3e\u3002<\/p>\n
insertAdjacentHTML \u5141\u8bb8\u76f4\u63a5\u63d2\u5165 HTML \u5b57\u7b26\u4e32，\u65e0\u9700\u5148\u521b\u5efa\u5143\u7d20\u8282\u70b9，\u975e\u5e38\u9002\u5408\u5feb\u901f\u6e32\u67d3\u6a21\u677f\u5185\u5bb9\u3002\u5b83\u652f\u6301\u56db\u4e2a\u4f4d\u7f6e\u53c2\u6570：beforebegin\u3001afterbegin\u3001beforeend\u3001afterend\u3002<\/p>\n
\/\/ HTML: <div id="box">\u539f\u6709\u5185\u5bb9<\/div><\/p>\n
const box = document.getElementById('box');<\/p>\n
\/\/ \u5728\u5143\u7d20\u5185\u90e8\u5f00\u5934\u63d2\u5165
\nbox.insertAdjacentHTML('afterbegin', '<p>\u5f00\u5934\u5185\u5bb9<\/p>');<\/p>\n
\/\/ \u5728\u5143\u7d20\u5185\u90e8\u672b\u5c3e\u63d2\u5165
\nbox.insertAdjacentHTML('beforeend', '<p>\u672b\u5c3e\u5185\u5bb9<\/p>');<\/p>\n
\/\/ \u5728\u5143\u7d20\u5916\u90e8\u524d\u9762\u63d2\u5165
\nbox.insertAdjacentHTML('beforebegin', '<hr>');<\/p>\n
\/\/ \u5728\u5143\u7d20\u5916\u90e8\u540e\u9762\u63d2\u5165
\nbox.insertAdjacentHTML('afterend', '<hr>');<\/p>\n
\u4f7f\u7528 insertAdjacentHTML \u65f6\u8981\u6ce8\u610f，\u63d2\u5165\u7684 HTML \u5b57\u7b26\u4e32\u4e0d\u4f1a\u88ab\u8f6c\u4e49，\u5982\u679c\u5185\u5bb9\u5305\u542b\u7528\u6237\u8f93\u5165，\u9700\u8981\u5148\u8fdb\u884c\u5b89\u5168\u5904\u7406，\u9632\u6b62 XSS \u653b\u51fb\u3002<\/p>\n
\u4e0e insertAdjacentHTML \u7c7b\u4f3c，insertAdjacentElement \u7528\u4e8e\u63d2\u5165\u5143\u7d20\u8282\u70b9，\u800c\u4e0d\u662f HTML \u5b57\u7b26\u4e32\u3002\u5b83\u540c\u6837\u652f\u6301\u56db\u4e2a\u4f4d\u7f6e\u53c2\u6570\u3002<\/p>\n
const box = document.getElementById('box');
\nconst newDiv = document.createElement('div');
\nnewDiv.textContent = '\u52a8\u6001\u521b\u5efa\u7684\u5143\u7d20';<\/p>\n
\/\/ \u5728\u5143\u7d20\u5185\u90e8\u672b\u5c3e\u63d2\u5165
\nbox.insertAdjacentElement('beforeend', newDiv);<\/p>\n
\u8fd9\u79cd\u65b9\u6cd5\u9002\u5408\u5df2\u7ecf\u521b\u5efa\u597d\u5143\u7d20\u8282\u70b9\u3001\u9700\u8981\u7cbe\u786e\u63a7\u5236\u63d2\u5165\u4f4d\u7f6e\u7684\u573a\u666f\u3002<\/p>\n
\u5f53\u9700\u8981\u590d\u5236\u5df2\u6709\u8282\u70b9\u65f6，\u53ef\u4ee5\u4f7f\u7528 cloneNode \u65b9\u6cd5\u3002\u5b83\u63a5\u6536\u4e00\u4e2a\u5e03\u5c14\u53c2\u6570，true \u8868\u793a\u6df1\u62f7\u8d1d（\u8fde\u540c\u5b50\u8282\u70b9\u4e00\u8d77\u590d\u5236），false \u8868\u793a\u6d45\u62f7\u8d1d（\u53ea\u590d\u5236\u5f53\u524d\u8282\u70b9）\u3002<\/p>\n
\/\/ HTML: <div id="card"><p>\u5361\u7247\u5185\u5bb9<\/p><\/div><\/p>\n
const card = document.getElementById('card');<\/p>\n
\/\/ \u6df1\u62f7\u8d1d：\u8fde\u540c\u5b50\u8282\u70b9\u4e00\u8d77\u590d\u5236
\nconst deepClone = card.cloneNode(true);<\/p>\n
\/\/ \u6d45\u62f7\u8d1d：\u53ea\u590d\u5236 div \u672c\u8eab，\u4e0d\u5305\u542b\u5b50\u8282\u70b9
\nconst shallowClone = card.cloneNode(false);<\/p>\n
\/\/ \u5c06\u6df1\u62f7\u8d1d\u7684\u8282\u70b9\u6dfb\u52a0\u5230\u9875\u9762
\ndocument.body.appendChild(deepClone);<\/p>\n
\u590d\u5236\u8282\u70b9\u65f6\u9700\u8981\u6ce8\u610f，cloneNode \u4e0d\u4f1a\u590d\u5236\u4e8b\u4ef6\u76d1\u542c\u5668，\u5982\u679c\u9700\u8981\u4fdd\u7559\u4e8b\u4ef6，\u9700\u8981\u624b\u52a8\u91cd\u65b0\u7ed1\u5b9a\u3002<\/p>\n
\u5f53\u9700\u8981\u4e00\u6b21\u6027\u6dfb\u52a0\u5927\u91cf\u8282\u70b9\u65f6，\u76f4\u63a5\u9010\u4e2a appendChild \u4f1a\u5bfc\u81f4\u591a\u6b21\u91cd\u6392，\u5f71\u54cd\u6027\u80fd\u3002DocumentFragment \u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684\u6587\u6863\u7247\u6bb5\u5bb9\u5668，\u53ef\u4ee5\u5148\u5c06\u8282\u70b9\u6dfb\u52a0\u5230\u7247\u6bb5\u4e2d，\u518d\u4e00\u6b21\u6027\u63d2\u5165\u5230\u9875\u9762\u3002<\/p>\n
\/\/ \u521b\u5efa DocumentFragment
\nconst fragment = document.createDocumentFragment();<\/p>\n
for (let i = 0; i < 1000; i++) {
\n const li = document.createElement('li');
\n li.textContent = '\u9879\u76ee ' + i;
\n fragment.appendChild(li);
\n}<\/p>\n
\/\/ \u4e00\u6b21\u6027\u5c06\u7247\u6bb5\u4e2d\u7684\u6240\u6709\u8282\u70b9\u63d2\u5165\u5230\u5217\u8868
\nconst list = document.getElementById('list');
\nlist.appendChild(fragment);<\/p>\n
\u4f7f\u7528 DocumentFragment \u53ef\u4ee5\u663e\u8457\u51cf\u5c11\u9875\u9762\u91cd\u6392\u6b21\u6570，\u63d0\u5347\u5927\u6279\u91cf\u6e32\u67d3\u7684\u6027\u80fd\u3002<\/p>\n
innerHTML \u662f\u6700\u76f4\u89c2\u7684\u6dfb\u52a0\u5185\u5bb9\u65b9\u5f0f，\u5b83\u53ef\u4ee5\u76f4\u63a5\u8bbe\u7f6e\u5143\u7d20\u7684 HTML \u5185\u5bb9\u3002\u9002\u5408\u4e00\u6b21\u6027\u6e32\u67d3\u6574\u5757\u6a21\u677f\u7684\u573a\u666f\u3002<\/p>\n
const container = document.getElementById('container');<\/p>\n
\/\/ \u76f4\u63a5\u8bbe\u7f6e HTML \u5185\u5bb9
\ncontainer.innerHTML = `
\n <h3>\u5546\u54c1\u5217\u8868<\/h3>
\n <ul>
\n <li>\u5546\u54c1 A<\/li>
\n <li>\u5546\u54c1 B<\/li>
\n <li>\u5546\u54c1 C<\/li>
\n <\/ul>
\n`;<\/p>\n
\u4f7f\u7528 innerHTML \u65f6\u9700\u8981\u6ce8\u610f：\u5b83\u4f1a\u66ff\u6362\u5143\u7d20\u539f\u6709\u7684\u5168\u90e8\u5185\u5bb9；\u5982\u679c\u5185\u5bb9\u5305\u542b\u7528\u6237\u8f93\u5165，\u5fc5\u987b\u8fdb\u884c\u8f6c\u4e49\u5904\u7406，\u907f\u514d XSS \u5b89\u5168\u98ce\u9669\u3002<\/p>\n
\u4e0b\u9762\u901a\u8fc7\u4e00\u4e2a\u5b8c\u6574\u7684\u5b9e\u6218\u6848\u4f8b，\u7efc\u5408\u8fd0\u7528\u524d\u9762\u4ecb\u7ecd\u7684\u65b9\u6cd5，\u5b9e\u73b0\u4e00\u4e2a\u52a8\u6001\u5546\u54c1\u5217\u8868\u3002<\/p>\n
\/\/ \u6a21\u62df\u5546\u54c1\u6570\u636e
\nconst products = [
\n { name: '\u624b\u673a', price: 2999 },
\n { name: '\u7535\u8111', price: 5999 },
\n { name: '\u8033\u673a', price: 399 }
\n];<\/p>\n
\/\/ \u6e32\u67d3\u5546\u54c1\u5217\u8868
\nfunction renderProducts(products) {
\n const list = document.getElementById('product-list');
\n const fragment = document.createDocumentFragment();<\/p>\n
products.forEach(product => {
\n const li = document.createElement('li');
\n li.className = 'product-item';<\/p>\n
const nameSpan = document.createElement('span');
\n nameSpan.textContent = product.name;<\/p>\n
const priceSpan = document.createElement('span');
\n priceSpan.textContent = '￥' + product.price;<\/p>\n
li.appendChild(nameSpan);
\n li.appendChild(priceSpan);
\n fragment.appendChild(li);
\n });<\/p>\n
list.appendChild(fragment);
\n}<\/p>\n
\/\/ \u8c03\u7528\u6e32\u67d3\u51fd\u6570
\nrenderProducts(products);<\/p>\n
\u8fd9\u4e2a\u6848\u4f8b\u5c55\u793a\u4e86\u5982\u4f55\u7ed3\u5408 createElement\u3001appendChild \u548c DocumentFragment \u9ad8\u6548\u5730\u6e32\u67d3\u52a8\u6001\u6570\u636e\u3002<\/p>\n
\u5728\u4f7f\u7528 DOM \u6dfb\u52a0\u8282\u70b9\u65f6，\u6709\u51e0\u4e2a\u5e38\u89c1\u95ee\u9898\u9700\u8981\u7279\u522b\u7559\u610f：<\/p>\n
\u672c\u6587\u7cfb\u7edf\u4ecb\u7ecd\u4e86 DOM \u6dfb\u52a0\u8282\u70b9\u7684\u591a\u79cd\u65b9\u6cd5，\u5305\u62ec appendChild\u3001insertBefore\u3001insertAdjacentHTML\u3001cloneNode\u3001DocumentFragment \u548c innerHTML \u7b49\u3002\u6bcf\u79cd\u65b9\u6cd5\u90fd\u6709\u5176\u9002\u7528\u573a\u666f：\u57fa\u7840\u6dfb\u52a0\u4f7f\u7528 appendChild，\u6307\u5b9a\u4f4d\u7f6e\u63d2\u5165\u4f7f\u7528 insertBefore，\u5feb\u901f\u6e32\u67d3\u6a21\u677f\u4f7f\u7528 insertAdjacentHTML，\u6279\u91cf\u9ad8\u6027\u80fd\u6e32\u67d3\u4f7f\u7528 DocumentFragment\u3002\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d，\u5e94\u6839\u636e\u5177\u4f53\u9700\u6c42\u9009\u62e9\u5408\u9002\u7684\u65b9\u6cd5，\u5e76\u6ce8\u610f\u5b89\u5168\u6027\u548c\u6027\u80fd\u4f18\u5316\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
1. \u5f15\u8a00\u5728 Web \u5f00\u53d1\u4e2d，\u52a8\u6001\u64cd\u4f5c DOM \u662f\u524d\u7aef\u5de5\u7a0b\u5e08\u7684\u5fc5\u5907\u6280\u80fd\u3002\u65e0\u8bba\u662f\u6e32\u67d3\u5217\u8868\u3001\u52a0\u8f7d\u66f4\u591a\u5185\u5bb9，\u8fd8\u662f\u5b9e\u73b0\u4ea4\u4e92\u53cd\u9988，\u90fd\u79bb\u4e0d\u5f00\u5411\u9875\u9762\u4e2d\u6dfb\u52a0\u8282\u70b9\u3002\u672c\u6587\u5c06\u7cfb\u7edf\u8bb2\u89e3 DOM \u6dfb\u52a0\u8282\u70b9\u7684\u6838\u5fc3\u65b9\u6cd5\u3001\u4f7f\u7528\u573a\u666f\u548c\u6ce8\u610f\u4e8b\u9879，\u5e76\u901a\u8fc7\u4e30\u5bcc\u7684\u4ee3\u7801\u5b9e\u4f8b\u5e2e\u52a9\u4f60\u5feb\u901f\u638c\u63e1\u30022. \u8ba4\u8bc6 DOM \u8282\u70b9\u5728\u5f00\u59cb\u6dfb\u52a0\u8282\u70b9\u4e4b\u524d，\u5148\u4e86\u89e3 DOM \u8282\u70b9\u7684\u57fa\u672c\u6982\u5ff5\u3002DOM（Document Object Model）\u5c06 HT<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[50],"topic":[],"class_list":["post-105332","post","type-post","status-publish","format-standard","hentry","category-server","tag-50"],"yoast_head":"\n