\u00a0 \u00a0 \u00a0 \u00a0 Document\u5bf9\u8c61\u7684\u65b9\u6cd5\u662fJavaScript\u64cd\u4f5cDOM\u7684\u6838\u5fc3\u624b\u6bb5，\u5b83\u80fd\u8ba9\u5f00\u53d1\u8005\u7cbe\u51c6\u83b7\u53d6\u3001\u521b\u5efa\u3001\u4fee\u6539\u9875\u9762\u5143\u7d20，\u8fd8\u80fd\u7ed1\u5b9a\u4e8b\u4ef6\u3001\u7ba1\u7406\u6837\u5f0f\u4e0e\u6587\u6863\u7ed3\u6784，\u662f\u5b9e\u73b0\u7f51\u9875\u52a8\u6001\u4ea4\u4e92\u3001\u5185\u5bb9\u66f4\u65b0\u4e0e\u5e03\u5c40\u8c03\u6574\u7684\u5173\u952e，\u652f\u6491\u7740\u524d\u7aef\u9875\u9762\u4ece\u9759\u6001\u5c55\u793a\u5230\u52a8\u6001\u4ea4\u4e92\u7684\u8f6c\u53d8，\u662f\u524d\u7aef\u5f00\u53d1\u4e2d\u5b9e\u73b0\u4e30\u5bcc\u7528\u6237\u4f53\u9a8c\u7684\u57fa\u7840\u5de5\u5177\u3002<\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u5728\u73b0\u4ee3\u524d\u7aef\u5f00\u53d1\u4e2d，Document\u5bf9\u8c61\u7684\u65b9\u6cd5\u4f9d\u7136\u662f\u5404\u7c7b\u6846\u67b6\u5e95\u5c42\u4ea4\u4e92\u7684\u6838\u5fc3\u4f9d\u6258，\u5373\u4fbf\u6846\u67b6\u5c01\u88c5\u4e86\u66f4\u4e0a\u5c42\u7684API，\u5176\u672c\u8d28\u4ecd\u4f9d\u8d56Document\u65b9\u6cd5\u4e0e\u6d4f\u89c8\u5668DOM\u8fdb\u884c\u901a\u4fe1\u3002\u672a\u6765\u968f\u7740Web\u6807\u51c6\u7684\u6301\u7eed\u6f14\u8fdb，\u5b83\u7684\u65b9\u6cd5\u4f1a\u66f4\u4fa7\u91cd\u5b89\u5168\u4e0e\u8bed\u4e49\u5316，\u6bd4\u5982\u5728\u8de8\u57df\u4ea4\u4e92\u3001\u9690\u79c1\u4fdd\u62a4\u5c42\u9762\u7684\u9650\u5236\u4f1a\u66f4\u4e25\u683c，\u540c\u65f6\u4e5f\u4f1a\u8fdb\u4e00\u6b65\u5f3a\u5316\u4e0eWeb\u7ec4\u4ef6\u3001\u6e10\u8fdb\u5f0fWeb\u5e94\u7528（PWA）\u7684\u534f\u540c\u80fd\u529b，\u66f4\u597d\u5730\u9002\u914d\u591a\u7aef\u3001\u79bb\u7ebf\u7b49\u590d\u6742\u573a\u666f，\u6210\u4e3a\u6784\u5efa\u4e0b\u4e00\u4ee3Web\u5e94\u7528\u7684\u91cd\u8981\u57fa\u7840\u3002<\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 \u4e0b\u9762，\u5bf9JavaScript\u4e2dDocument\u5bf9\u8c61\u5e38\u89c1\u7684\u65b9\u6cd5\u8fdb\u884c\u9010\u4e00\u5206\u6790\u8bb2\u89e3：<\/p>\n
\u542b\u4e49：\u4e3a\u6587\u6863\u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\u5668，\u5f53\u6307\u5b9a\u4e8b\u4ef6\u53d1\u751f\u65f6\u6267\u884c\u56de\u8c03\u51fd\u6570\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Add（\u6dfb\u52a0）+ Event（\u4e8b\u4ef6）+ Listener（\u76d1\u542c\u5668）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.addEventListener(type, listener, options);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
type：\u4e8b\u4ef6\u7c7b\u578b\u5b57\u7b26\u4e32，\u5982\u00a0'click'\u3001'keydown'\u3001'scroll'\u3002<\/p>\n<\/li>\n
listener：\u4e8b\u4ef6\u89e6\u53d1\u65f6\u8981\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570，\u63a5\u6536\u4e00\u4e2a\u4e8b\u4ef6\u5bf9\u8c61\u53c2\u6570\u3002<\/p>\n<\/li>\n
options（\u53ef\u9009）：\u53ef\u4ee5\u662f\u5e03\u5c14\u503c\u6216\u5bf9\u8c61\u3002<\/p>\n
\u5982\u679c\u662f\u5e03\u5c14\u503c：true\u00a0\u8868\u793a\u5728\u6355\u83b7\u9636\u6bb5\u89e6\u53d1，false\u00a0\u8868\u793a\u5728\u5192\u6ce1\u9636\u6bb5\u89e6\u53d1\u3002<\/p>\n<\/li>\n
\u5982\u679c\u662f\u5bf9\u8c61，\u53ef\u4ee5\u5305\u542b：<\/p>\n
capture：\u5e03\u5c14\u503c，\u662f\u5426\u5728\u6355\u83b7\u9636\u6bb5\u89e6\u53d1\u3002<\/p>\n<\/li>\n
once：\u5e03\u5c14\u503c，\u662f\u5426\u53ea\u89e6\u53d1\u4e00\u6b21\u540e\u81ea\u52a8\u79fb\u9664\u3002<\/p>\n<\/li>\n
passive：\u5e03\u5c14\u503c，\u662f\u5426\u6c38\u4e0d\u8c03\u7528\u00a0preventDefault()\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u57fa\u672c\u7528\u6cd5
\ndocument.addEventListener('click', function(event) {
\n console.log('\u6587\u6863\u88ab\u70b9\u51fb\u4e86', event.clientX, event.clientY);
\n});<\/p>\n
\/\/ \u53ea\u89e6\u53d1\u4e00\u6b21\u7684\u76d1\u542c\u5668
\ndocument.addEventListener('DOMContentLoaded', function() {
\n console.log('\u9875\u9762\u52a0\u8f7d\u5b8c\u6210，\u53ea\u89e6\u53d1\u4e00\u6b21');
\n}, { once: true });<\/p>\n
\/\/ \u4f7f\u7528\u7bad\u5934\u51fd\u6570\u548c\u6355\u83b7\u9636\u6bb5
\ndocument.addEventListener('scroll', () => {
\n console.log('\u9875\u9762\u6eda\u52a8\u4e2d', window.scrollY);
\n}, { capture: true });\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u79fb\u9664\u4e4b\u524d\u901a\u8fc7\u00a0addEventListener\u00a0\u6dfb\u52a0\u7684\u4e8b\u4ef6\u76d1\u542c\u5668\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Remove（\u79fb\u9664）+ Event（\u4e8b\u4ef6）+ Listener（\u76d1\u542c\u5668）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.removeEventListener(type, listener, options);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
type：\u8981\u79fb\u9664\u7684\u4e8b\u4ef6\u7c7b\u578b\u3002<\/p>\n<\/li>\n
listener：\u8981\u79fb\u9664\u7684\u56de\u8c03\u51fd\u6570（\u5fc5\u987b\u662f\u540c\u4e00\u4e2a\u51fd\u6570\u5f15\u7528）\u3002<\/p>\n<\/li>\n
options（\u53ef\u9009）：\u5fc5\u987b\u4e0e\u6dfb\u52a0\u65f6\u7684\u914d\u7f6e\u4e00\u81f4\u624d\u80fd\u6b63\u786e\u79fb\u9664\u3002<\/p>\n<\/li>\n
\u91cd\u8981：\u5982\u679c\u6dfb\u52a0\u65f6\u4f7f\u7528\u7684\u662f\u533f\u540d\u51fd\u6570，\u5219\u65e0\u6cd5\u79fb\u9664\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5b9a\u4e49\u547d\u540d\u51fd\u6570\u624d\u80fd\u79fb\u9664
\nfunction handleClick(event) {
\n console.log('\u70b9\u51fb\u4e86\u6587\u6863');
\n}<\/p>\n
\/\/ \u6dfb\u52a0\u76d1\u542c\u5668
\ndocument.addEventListener('click', handleClick);<\/p>\n
\/\/ \u540e\u7eed\u79fb\u9664\u76d1\u542c\u5668
\ndocument.removeEventListener('click', handleClick);<\/p>\n
\/\/ \u9519\u8bef\u793a\u8303：\u65e0\u6cd5\u79fb\u9664\u533f\u540d\u51fd\u6570
\ndocument.addEventListener('click', function() {
\n console.log('\u8fd9\u4e2a\u76d1\u542c\u5668\u65e0\u6cd5\u88ab\u79fb\u9664');
\n});
\n\/\/ document.removeEventListener('click', …) \/\/ \u65e0\u6cd5\u79fb\u9664\u4e0a\u9762\u7684\u533f\u540d\u51fd\u6570\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u5411\u6587\u6863\u6d3e\u53d1\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6，\u89e6\u53d1\u76f8\u5e94\u7684\u4e8b\u4ef6\u76d1\u542c\u5668\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Dispatch（\u6d3e\u9063\u3001\u53d1\u9001）+ Event（\u4e8b\u4ef6）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let result = document.dispatchEvent(event);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
event：\u8981\u6d3e\u53d1\u7684\u4e8b\u4ef6\u5bf9\u8c61（\u53ef\u4ee5\u662f\u00a0new Event()\u00a0\u521b\u5efa\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6，\u4e5f\u53ef\u4ee5\u662f\u7cfb\u7edf\u4e8b\u4ef6）\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5e03\u5c14\u503c\u3002\u5982\u679c\u4e8b\u4ef6\u6ca1\u6709\u88ab\u4efb\u4f55\u76d1\u542c\u5668\u8c03\u7528\u00a0preventDefault()\u00a0\u5219\u8fd4\u56de\u00a0true，\u5426\u5219\u8fd4\u56de\u00a0false\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u521b\u5efa\u5e76\u6d3e\u53d1\u81ea\u5b9a\u4e49\u4e8b\u4ef6
\nlet customEvent = new Event('userLogin');<\/p>\n
\/\/ \u76d1\u542c\u81ea\u5b9a\u4e49\u4e8b\u4ef6
\ndocument.addEventListener('userLogin', function(e) {
\n console.log('\u7528\u6237\u767b\u5f55\u4e8b\u4ef6\u89e6\u53d1', e.type);
\n document.body.style.backgroundColor = 'lightgreen';
\n});<\/p>\n
\/\/ \u6d3e\u53d1\u4e8b\u4ef6
\nlet result = document.dispatchEvent(customEvent);
\nconsole.log('\u4e8b\u4ef6\u6d3e\u53d1\u6210\u529f？', result); \/\/ true<\/p>\n
\/\/ \u5e26\u6570\u636e\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6
\nlet dataEvent = new CustomEvent('dataUpdate', {
\n detail: { name: '\u5f20\u4e09', age: 25 }
\n});<\/p>\n
document.addEventListener('dataUpdate', function(e) {
\n console.log('\u63a5\u6536\u5230\u7684\u6570\u636e：', e.detail); \/\/ { name: '\u5f20\u4e09', age: 25 }
\n});<\/p>\n
document.dispatchEvent(dataEvent);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u6267\u884c\u547d\u4ee4\u64cd\u4f5c\u53ef\u7f16\u8f91\u533a\u57df\u7684\u5185\u5bb9（\u5df2\u5e9f\u5f03，\u4f46\u4ecd\u5728\u90e8\u5206\u6d4f\u89c8\u5668\u4e2d\u652f\u6301）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Exec（\u6267\u884c）+ Command（\u547d\u4ee4）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let result = document.execCommand(command, showUI, value);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
command：\u547d\u4ee4\u540d\u79f0\u5b57\u7b26\u4e32\u3002\u5e38\u7528\u547d\u4ee4：<\/p>\n
'bold'：\u52a0\u7c97\u9009\u4e2d\u6587\u672c<\/p>\n<\/li>\n
'italic'：\u659c\u4f53<\/p>\n<\/li>\n
'underline'：\u4e0b\u5212\u7ebf<\/p>\n<\/li>\n
'copy'：\u590d\u5236\u9009\u4e2d\u5185\u5bb9<\/p>\n<\/li>\n
'cut'：\u526a\u5207\u9009\u4e2d\u5185\u5bb9<\/p>\n<\/li>\n
'paste'：\u7c98\u8d34<\/p>\n<\/li>\n
'createLink'：\u521b\u5efa\u94fe\u63a5<\/p>\n<\/li>\n
'insertImage'：\u63d2\u5165\u56fe\u7247<\/p>\n<\/li>\n
'undo'：\u64a4\u9500<\/p>\n<\/li>\n
'redo'：\u91cd\u505a<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
showUI：\u5e03\u5c14\u503c，\u662f\u5426\u663e\u793a\u547d\u4ee4\u7684\u7528\u6237\u754c\u9762（\u901a\u5e38\u8bbe\u4e3a\u00a0false）\u3002<\/p>\n<\/li>\n
value：\u547d\u4ee4\u9700\u8981\u7684\u53c2\u6570\u503c（\u5982\u94fe\u63a5 URL\u3001\u56fe\u7247\u5730\u5740\u7b49）\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5e03\u5c14\u503c，\u8868\u793a\u547d\u4ee4\u662f\u5426\u6267\u884c\u6210\u529f\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u9700\u8981\u6709\u4e00\u4e2a\u53ef\u7f16\u8f91\u533a\u57df
\n\/\/ <div contenteditable="true" id="editor">\u8fd9\u662f\u53ef\u7f16\u8f91\u6587\u672c<\/div><\/p>\n
let editor = document.getElementById('editor');
\neditor.focus(); \/\/ \u5148\u8ba9\u7f16\u8f91\u5668\u83b7\u5f97\u7126\u70b9<\/p>\n
\/\/ \u5c06\u9009\u4e2d\u6587\u672c\u52a0\u7c97
\nlet success = document.execCommand('bold', false, null);
\nconsole.log('\u52a0\u7c97\u6210\u529f？', success);<\/p>\n
\/\/ \u521b\u5efa\u94fe\u63a5
\ndocument.execCommand('createLink', false, 'https:\/\/example.com');<\/p>\n
\/\/ \u590d\u5236\u9009\u4e2d\u7684\u5185\u5bb9
\ndocument.execCommand('copy');<\/p>\n
\/\/ \u6ce8\u610f：\u73b0\u4ee3\u5f00\u53d1\u63a8\u8350\u4f7f\u7528 Clipboard API \u66ff\u4ee3
\n\/\/ navigator.clipboard.writeText('\u8981\u590d\u5236\u7684\u6587\u672c');\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u4ece\u5176\u4ed6\u6587\u6863\u4e2d\u91c7\u7528\u4e00\u4e2a\u8282\u70b9，\u4f7f\u5176\u5f52\u5c5e\u4e8e\u5f53\u524d\u6587\u6863（\u539f\u6587\u6863\u4e2d\u7684\u8282\u70b9\u4f1a\u88ab\u79fb\u9664）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Adopt（\u91c7\u7528\u3001\u6536\u517b）+ Node（\u8282\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let node = document.adoptNode(externalNode);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
externalNode：\u6765\u81ea\u5176\u4ed6\u6587\u6863\u7684\u8282\u70b9（\u5982 iframe \u4e2d\u7684\u5143\u7d20）\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u88ab\u91c7\u7528\u540e\u7684\u8282\u70b9，\u5176\u00a0ownerDocument\u00a0\u53d8\u4e3a\u5f53\u524d\u6587\u6863\u3002<\/p>\n<\/li>\n
\u6ce8\u610f：\u91c7\u7528\u540e，\u539f\u6587\u6863\u4e2d\u7684\u8282\u70b9\u4f1a\u88ab\u79fb\u9664\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5047\u8bbe\u9875\u9762\u4e2d\u6709\u4e00\u4e2a iframe
\n\/\/ <iframe id="myIframe" src="other.html"><\/iframe><\/p>\n
let iframe = document.getElementById('myIframe');
\nlet iframeDoc = iframe.contentDocument;<\/p>\n
\/\/ \u83b7\u53d6 iframe \u4e2d\u7684\u4e00\u4e2a\u6309\u94ae
\nlet iframeButton = iframeDoc.getElementById('btnFromIframe');<\/p>\n
\/\/ \u5c06\u6309\u94ae\u4ece iframe \u6587\u6863\u91c7\u7528\u5230\u4e3b\u6587\u6863
\nlet adoptedBtn = document.adoptNode(iframeButton);<\/p>\n
\/\/ \u73b0\u5728\u6309\u94ae\u5df2\u4ece iframe \u4e2d\u79fb\u9664，\u9700\u8981\u624b\u52a8\u6dfb\u52a0\u5230\u4e3b\u6587\u6863
\ndocument.body.appendChild(adoptedBtn);<\/p>\n
console.log('\u6309\u94ae\u5df2\u79fb\u52a8\u5230\u4e3b\u6587\u6863');\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u4ece\u5176\u4ed6\u6587\u6863\u5bfc\u5165\u4e00\u4e2a\u8282\u70b9\u5230\u5f53\u524d\u6587\u6863（\u521b\u5efa\u526f\u672c，\u539f\u8282\u70b9\u4fdd\u7559）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Import（\u5bfc\u5165）+ Node（\u8282\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let node = document.importNode(externalNode, deep);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
externalNode：\u6765\u81ea\u5176\u4ed6\u6587\u6863\u7684\u8282\u70b9\u3002<\/p>\n<\/li>\n
deep：\u5e03\u5c14\u503c\u3002true\u00a0\u8868\u793a\u6df1\u5ea6\u5bfc\u5165（\u5305\u62ec\u6240\u6709\u5b50\u8282\u70b9），false\u00a0\u53ea\u5bfc\u5165\u8282\u70b9\u672c\u8eab\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5bfc\u5165\u540e\u7684\u8282\u70b9\u526f\u672c，\u539f\u8282\u70b9\u4e0d\u53d7\u5f71\u54cd\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5047\u8bbe\u6709 iframe
\nlet iframe = document.getElementById('myIframe');
\nlet iframeDoc = iframe.contentDocument;<\/p>\n
\/\/ \u83b7\u53d6 iframe \u4e2d\u7684\u4e00\u4e2a\u590d\u6742\u5143\u7d20
\nlet iframeDiv = iframeDoc.getElementById('complexDiv');<\/p>\n
\/\/ \u6df1\u5ea6\u5bfc\u5165\u8be5\u5143\u7d20\u53ca\u5176\u6240\u6709\u5b50\u8282\u70b9
\nlet importedDiv = document.importNode(iframeDiv, true);<\/p>\n
\/\/ \u5c06\u5bfc\u5165\u7684\u526f\u672c\u6dfb\u52a0\u5230\u4e3b\u6587\u6863
\ndocument.body.appendChild(importedDiv);<\/p>\n
\/\/ iframe \u4e2d\u7684\u539f\u5143\u7d20\u4ecd\u7136\u5b58\u5728
\nconsole.log('\u539f\u8282\u70b9\u4ecd\u5728 iframe \u4e2d，\u526f\u672c\u5df2\u6dfb\u52a0\u5230\u4e3b\u6587\u6863');\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u5411\u6587\u6863\u8282\u70b9\u7684\u5b50\u8282\u70b9\u5217\u8868\u672b\u5c3e\u6dfb\u52a0\u4e00\u4e2a\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Append（\u8ffd\u52a0）+ Child（\u5b69\u5b50）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.appendChild(aChild);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
aChild：\u8981\u8ffd\u52a0\u7684\u8282\u70b9\u5bf9\u8c61\u3002<\/p>\n<\/li>\n
\u91cd\u8981\u8b66\u544a：\u901a\u5e38\u4e0d\u76f4\u63a5\u5bf9\u00a0document\u00a0\u4f7f\u7528\u00a0appendChild，\u56e0\u4e3a\u6587\u6863\u53ea\u80fd\u6709\u4e00\u4e2a\u6839\u5143\u7d20\u00a0<html>\u3002\u5982\u679c\u5c1d\u8bd5\u6dfb\u52a0\u53e6\u4e00\u4e2a\u6839\u5143\u7d20\u4f1a\u51fa\u9519\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u9519\u8bef\u793a\u8303：\u4e0d\u80fd\u7ed9 document \u76f4\u63a5\u6dfb\u52a0\u5b50\u8282\u70b9
\n\/\/ let newDiv = document.createElement('div');
\n\/\/ document.appendChild(newDiv); \/\/ \u4f1a\u62a5\u9519<\/p>\n
\/\/ \u6b63\u786e\u7528\u6cd5：\u901a\u5e38\u5bf9 document.body \u6216\u5176\u4ed6\u5143\u7d20\u4f7f\u7528
\nlet newDiv = document.createElement('div');
\ndocument.body.appendChild(newDiv); \/\/ \u2705 \u6b63\u786e\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u514b\u9686\u6587\u6863\u8282\u70b9\u672c\u8eab（\u4e0d\u662f\u514b\u9686\u6574\u4e2a\u9875\u9762\u5185\u5bb9）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Clone（\u514b\u9686）+ Node（\u8282\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let clonedDoc = document.cloneNode(deep);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
deep：\u5e03\u5c14\u503c\u3002true\u00a0\u8868\u793a\u6df1\u5ea6\u514b\u9686（\u5305\u62ec\u6240\u6709\u5b50\u8282\u70b9），false\u00a0\u53ea\u514b\u9686\u6587\u6863\u8282\u70b9\u672c\u8eab\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u514b\u9686\u540e\u7684\u6587\u6863\u8282\u70b9\u526f\u672c\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u6d45\u514b\u9686 – \u53ea\u514b\u9686 document \u5bf9\u8c61\u672c\u8eab，\u4e0d\u5305\u542b\u5b50\u8282\u70b9
\nlet docShallow = document.cloneNode(false);
\nconsole.log(docShallow.nodeName); \/\/ '#document'
\nconsole.log(docShallow.hasChildNodes()); \/\/ false（\u6ca1\u6709\u5b50\u8282\u70b9）<\/p>\n
\/\/ \u6df1\u514b\u9686 – \u514b\u9686\u6574\u4e2a\u6587\u6863\u7ed3\u6784
\nlet docDeep = document.cloneNode(true);
\nconsole.log(docDeep.childNodes.length); \/\/ \u5305\u542b doctype \u548c html \u7b49
\n\/\/ \u6ce8\u610f：\u514b\u9686\u7684\u6587\u6863\u4e0d\u5728\u9875\u9762\u4e2d\u663e\u793a，\u53ea\u662f\u4e00\u4e2a\u5185\u5b58\u4e2d\u7684\u526f\u672c\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u5728\u53c2\u8003\u8282\u70b9\u4e4b\u524d\u63d2\u5165\u4e00\u4e2a\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Insert（\u63d2\u5165）+ Before（\u5728…\u4e4b\u524d）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let insertedNode = parentNode.insertBefore(newNode, referenceNode);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
newNode：\u8981\u63d2\u5165\u7684\u65b0\u8282\u70b9\u3002<\/p>\n<\/li>\n
referenceNode：\u53c2\u8003\u8282\u70b9（\u65b0\u8282\u70b9\u5c06\u63d2\u5165\u5230\u8fd9\u4e2a\u8282\u70b9\u4e4b\u524d）\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u88ab\u63d2\u5165\u7684\u8282\u70b9\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u901a\u5e38\u5bf9\u5177\u4f53\u5143\u7d20\u4f7f\u7528，\u800c\u4e0d\u662f document
\nlet parent = document.getElementById('parentDiv');
\nlet firstChild = parent.firstElementChild;<\/p>\n
let newSpan = document.createElement('span');
\nnewSpan.textContent = '\u63d2\u5165\u7684span';<\/p>\n
\/\/ \u5728\u7b2c\u4e00\u4e2a\u5b50\u5143\u7d20\u4e4b\u524d\u63d2\u5165\u65b0span
\nparent.insertBefore(newSpan, firstChild);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u7528\u65b0\u8282\u70b9\u66ff\u6362\u7236\u8282\u70b9\u4e2d\u7684\u4e00\u4e2a\u5b50\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Replace（\u66ff\u6362）+ Child（\u5b69\u5b50）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let oldChild = parentNode.replaceChild(newChild, oldChild);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
newChild：\u65b0\u8282\u70b9\u3002<\/p>\n<\/li>\n
oldChild：\u8981\u88ab\u66ff\u6362\u7684\u65e7\u5b50\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u88ab\u66ff\u6362\u7684\u65e7\u8282\u70b9\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let parent = document.getElementById('container');
\nlet oldP = document.getElementById('oldParagraph');<\/p>\n
let newDiv = document.createElement('div');
\nnewDiv.textContent = '\u66ff\u6362\u540e\u7684\u65b0\u5185\u5bb9';
\nnewDiv.className = 'new-content';<\/p>\n
\/\/ \u7528 newDiv \u66ff\u6362 oldP
\nlet removed = parent.replaceChild(newDiv, oldP);
\nconsole.log('\u5df2\u79fb\u9664\u7684\u8282\u70b9：', removed);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u4ece\u7236\u8282\u70b9\u4e2d\u79fb\u9664\u4e00\u4e2a\u5b50\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Remove（\u79fb\u9664）+ Child（\u5b69\u5b50）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let oldChild = parentNode.removeChild(child);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
child：\u8981\u79fb\u9664\u7684\u5b50\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u88ab\u79fb\u9664\u7684\u8282\u70b9（\u4ecd\u5b58\u5728\u4e8e\u5185\u5b58\u4e2d，\u53ef\u4ee5\u540e\u7eed\u6dfb\u52a0）\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let parent = document.getElementById('list');
\nlet lastItem = document.getElementById('lastItem');<\/p>\n
\/\/ \u79fb\u9664\u6700\u540e\u4e00\u4e2a\u9879\u76ee
\nlet removedItem = parent.removeChild(lastItem);
\nconsole.log('\u5df2\u79fb\u9664：', removedItem);<\/p>\n
\/\/ \u7a0d\u540e\u53ef\u4ee5\u91cd\u65b0\u6dfb\u52a0
\nparent.appendChild(removedItem);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u68c0\u67e5\u6587\u6863\u8282\u70b9\u662f\u5426\u6709\u5b50\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Has（\u6709）+ Child（\u5b69\u5b50）+ Nodes（\u8282\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let hasChildren = document.hasChildNodes();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：\u65e0\u53c2\u6570\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5e03\u5c14\u503c，\u6709\u5b50\u8282\u70b9\u8fd4\u56de\u00a0true，\u5426\u5219\u8fd4\u56de\u00a0false\u3002<\/p>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
console.log(document.hasChildNodes()); \/\/ \u901a\u5e38\u8fd4\u56de true（\u6709 doctype \u548c html）<\/p>\n
\/\/ \u68c0\u67e5 body \u662f\u5426\u6709\u5b50\u8282\u70b9
\nconsole.log(document.body.hasChildNodes()); \/\/ \u53d6\u51b3\u4e8e\u9875\u9762\u5185\u5bb9\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u89c4\u8303\u5316\u6587\u6863，\u5408\u5e76\u76f8\u90bb\u7684\u6587\u672c\u8282\u70b9\u5e76\u5220\u9664\u7a7a\u7684\u6587\u672c\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Normalize（\u6807\u51c6\u5316\u3001\u89c4\u8303\u5316）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.normalize();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：\u65e0\u53c2\u6570\u3002\u6e05\u7406\u6587\u6863\u6811\u7ed3\u6784\u3002<\/p>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let div = document.createElement('div');
\ndiv.appendChild(document.createTextNode('Hello'));
\ndiv.appendChild(document.createTextNode(' '));
\ndiv.appendChild(document.createTextNode('World'));<\/p>\n
console.log(div.childNodes.length); \/\/ 3（\u4e09\u4e2a\u6587\u672c\u8282\u70b9）<\/p>\n
div.normalize();
\nconsole.log(div.childNodes.length); \/\/ 1（\u5408\u5e76\u6210 "Hello World"）\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u5728\u6587\u6863\u7684\u7b2c\u4e00\u4e2a\u5b50\u8282\u70b9\u524d\u63d2\u5165\u4e00\u7ec4\u8282\u70b9\u6216\u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Prepend（\u5728\u524d\u9762\u9644\u52a0）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.prepend(…nodesOrStrings);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
\u53ef\u4ee5\u63a5\u53d7\u591a\u4e2a\u53c2\u6570，\u53ef\u4ee5\u662f\u8282\u70b9\u5bf9\u8c61\u6216\u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u5b57\u7b26\u4e32\u4f1a\u81ea\u52a8\u8f6c\u6362\u4e3a\u6587\u672c\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u6ce8\u610f：\u76f4\u63a5\u5bf9\u00a0document\u00a0\u4f7f\u7528\u00a0prepend\u00a0\u901a\u5e38\u4e0d\u5efa\u8bae，\u56e0\u4e3a\u6587\u6863\u53ea\u80fd\u6709\u4e00\u4e2a\u6839\u5143\u7d20\u3002\u8fd9\u4e2a\u65b9\u6cd5\u662f\u7ee7\u627f\u81ea\u00a0ParentNode\u00a0\u63a5\u53e3\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5728\u6587\u6863\u6700\u524d\u9762\u6dfb\u52a0\u6ce8\u91ca（\u4e0d\u63a8\u8350\u76f4\u63a5\u5bf9 document \u4f7f\u7528）
\n\/\/ \u66f4\u597d\u7684\u7528\u6cd5\u662f\u5bf9\u5177\u4f53\u5143\u7d20\u4f7f\u7528
\nlet list = document.getElementById('myList');
\nlet firstItem = document.createElement('li');
\nfirstItem.textContent = '\u65b0\u7684\u7b2c\u4e00\u9879';
\nlist.prepend(firstItem); \/\/ \u5728\u5217\u8868\u5f00\u5934\u6dfb\u52a0<\/p>\n
\/\/ \u53ef\u4ee5\u540c\u65f6\u6dfb\u52a0\u591a\u4e2a
\nlet p1 = document.createElement('p');
\np1.textContent = '\u6bb5\u843d1';
\nlet p2 = document.createElement('p');
\np2.textContent = '\u6bb5\u843d2';
\ndocument.body.prepend(p1, p2, '\u6587\u672c\u5185\u5bb9'); \/\/ \u5728 body \u5f00\u5934\u6dfb\u52a0\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u5728\u6587\u6863\u7684\u6700\u540e\u4e00\u4e2a\u5b50\u8282\u70b9\u540e\u63d2\u5165\u4e00\u7ec4\u8282\u70b9\u6216\u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Append（\u5728\u540e\u9762\u9644\u52a0）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.append(…nodesOrStrings);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
\u53ef\u4ee5\u63a5\u53d7\u591a\u4e2a\u53c2\u6570，\u53ef\u4ee5\u662f\u8282\u70b9\u5bf9\u8c61\u6216\u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u5b57\u7b26\u4e32\u4f1a\u81ea\u52a8\u8f6c\u6362\u4e3a\u6587\u672c\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u4e0e\u00a0appendChild\u00a0\u4e0d\u540c，append\u00a0\u53ef\u4ee5\u63a5\u53d7\u591a\u4e2a\u53c2\u6570\u548c\u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5bf9 body \u4f7f\u7528
\nlet footer = document.createElement('footer');
\nfooter.textContent = '\u7248\u6743\u4fe1\u606f';
\ndocument.body.append(footer, '\u6587\u6863\u7ed3\u675f'); \/\/ \u53ef\u4ee5\u540c\u65f6\u6dfb\u52a0\u5143\u7d20\u548c\u6587\u672c<\/p>\n
\/\/ \u5bf9\u6bd4 appendChild \u548c append
\nlet div = document.getElementById('container');<\/p>\n
\/\/ appendChild：\u53ea\u80fd\u63a5\u53d7\u4e00\u4e2a\u8282\u70b9，\u4e0d\u80fd\u76f4\u63a5\u52a0\u5b57\u7b26\u4e32
\ndiv.appendChild(document.createTextNode('\u6587\u672c')); \/\/ \u9700\u8981\u5148\u521b\u5efa\u6587\u672c\u8282\u70b9<\/p>\n
\/\/ append：\u53ef\u4ee5\u76f4\u63a5\u52a0\u5b57\u7b26\u4e32，\u4e14\u53ef\u4ee5\u52a0\u591a\u4e2a
\ndiv.append('\u6587\u672c1', '\u6587\u672c2', document.createElement('br'));<\/p>\n
\/\/ \u8fd4\u56de\u503c\u4e0d\u540c
\nlet result1 = div.appendChild(document.createElement('span')); \/\/ \u8fd4\u56de\u6dfb\u52a0\u7684\u8282\u70b9
\nlet result2 = div.append('\u6587\u672c'); \/\/ \u8fd4\u56de undefined\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u66ff\u6362\u6587\u6863\u7684\u6240\u6709\u5b50\u8282\u70b9（\u6e05\u7a7a\u5e76\u6dfb\u52a0\u65b0\u8282\u70b9）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Replace（\u66ff\u6362）+ Children（\u5b69\u5b50\u4eec）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.replaceChildren(…nodesOrStrings);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
\u53ef\u4ee5\u63a5\u53d7\u591a\u4e2a\u53c2\u6570，\u4f5c\u4e3a\u65b0\u7684\u5b50\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u5982\u679c\u4e0d\u4f20\u53c2\u6570，\u5219\u6e05\u7a7a\u6240\u6709\u5b50\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u5371\u9669\u64cd\u4f5c：\u76f4\u63a5\u5bf9\u00a0document\u00a0\u4f7f\u7528\u4f1a\u6e05\u7a7a\u6574\u4e2a\u6587\u6863\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5b89\u5168\u7528\u6cd5：\u5bf9\u5177\u4f53\u5143\u7d20\u4f7f\u7528
\nlet container = document.getElementById('container');<\/p>\n
\/\/ \u6e05\u7a7a\u5bb9\u5668
\ncontainer.replaceChildren(); \/\/ \u79fb\u9664\u6240\u6709\u5b50\u8282\u70b9<\/p>\n
\/\/ \u66ff\u6362\u4e3a\u65b0\u5185\u5bb9
\nlet h2 = document.createElement('h2');
\nh2.textContent = '\u65b0\u6807\u9898';
\nlet p = document.createElement('p');
\np.textContent = '\u65b0\u6bb5\u843d';
\ncontainer.replaceChildren(h2, p, '\u4e00\u4e9b\u6587\u672c');<\/p>\n
\/\/ \u5bf9\u6bd4 innerHTML = '' \u548c replaceChildren()
\n\/\/ \u6027\u80fd\u66f4\u597d，\u4e14\u4e0d\u4f1a\u5bfc\u81f4\u5185\u5b58\u6cc4\u6f0f（\u4e8b\u4ef6\u76d1\u542c\u5668\u4f1a\u88ab\u6b63\u786e\u6e05\u7406）<\/p>\n
\/\/ \u5371\u9669\u793a\u8303（\u4ec5\u7528\u4e8e\u7406\u89e3，\u4e0d\u8981\u6267\u884c）
\n\/\/ document.replaceChildren(); \/\/ \u8fd9\u4f1a\u6e05\u7a7a\u6574\u4e2a\u9875\u9762！\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u4e00\u4e2a\u5e03\u5c14\u503c，\u8868\u793a\u6587\u6863\u662f\u5426\u83b7\u5f97\u7126\u70b9（\u5373\u9875\u9762\u662f\u5426\u5904\u4e8e\u6d3b\u52a8\u72b6\u6001）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Has（\u6709）+ Focus（\u7126\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let focused = document.hasFocus();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：\u65e0\u53c2\u6570\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5982\u679c\u6587\u6863\u83b7\u5f97\u7126\u70b9\u8fd4\u56de\u00a0true，\u5426\u5219\u8fd4\u56de\u00a0false\u3002<\/p>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5b9e\u65f6\u76d1\u63a7\u9875\u9762\u7126\u70b9\u72b6\u6001
\nsetInterval(() => {
\n if (document.hasFocus()) {
\n console.log('\u7528\u6237\u5728\u6d4f\u89c8\u5f53\u524d\u6807\u7b7e\u9875');
\n \/\/ \u53ef\u4ee5\u6062\u590d\u52a8\u753b\u3001\u8f6e\u8be2\u7b49
\n } else {
\n console.log('\u7528\u6237\u5207\u6362\u5230\u5176\u4ed6\u6807\u7b7e\u9875');
\n \/\/ \u53ef\u4ee5\u6682\u505c\u52a8\u753b\u3001\u964d\u4f4e\u8d44\u6e90\u6d88\u8017
\n }
\n}, 1000);<\/p>\n
\/\/ \u79bb\u5f00\u9875\u9762\u65f6\u6682\u505c\u89c6\u9891
\ndocument.addEventListener('visibilitychange', function() {
\n if (!document.hasFocus()) {
\n let video = document.getElementById('myVideo');
\n if (video && !video.paused) {
\n video.pause();
\n }
\n }
\n});\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u901a\u8fc7\u5143\u7d20\u7684\u00a0id\u00a0\u5c5e\u6027\u83b7\u53d6\u5bf9\u5e94\u7684\u5143\u7d20\u5bf9\u8c61\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Get（\u83b7\u53d6）+ Element（\u5143\u7d20）+ By（\u901a\u8fc7）+ Id（\u6807\u8bc6\u7b26）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let element = document.getElementById(id);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
id：\u8981\u67e5\u627e\u7684\u5143\u7d20\u7684 ID \u5b57\u7b26\u4e32（\u533a\u5206\u5927\u5c0f\u5199）\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u627e\u5230\u7684\u00a0Element\u00a0\u5bf9\u8c61，\u5982\u679c\u6ca1\u6709\u627e\u5230\u5219\u8fd4\u56de\u00a0null\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let header = document.getElementById('main-header');
\nif (header) {
\n header.style.backgroundColor = 'yellow';
\n header.textContent = '\u627e\u5230\u4e86\u6807\u9898';
\n} else {
\n console.log('\u672a\u627e\u5230\u8be5\u5143\u7d20');
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u901a\u8fc7\u5143\u7d20\u7684\u7c7b\u540d\u83b7\u53d6\u4e00\u7ec4\u5143\u7d20\u5bf9\u8c61\u7684\u96c6\u5408（\u5b9e\u65f6\u66f4\u65b0）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Get（\u83b7\u53d6）+ Elements（\u5143\u7d20）+ By（\u901a\u8fc7）+ Class（\u7c7b）+ Name（\u540d\u79f0）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let elements = document.getElementsByClassName(names);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
names：\u5305\u542b\u4e00\u4e2a\u6216\u591a\u4e2a\u7c7b\u540d\u7684\u5b57\u7b26\u4e32（\u7528\u7a7a\u683c\u5206\u9694）\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5b9e\u65f6\u7684\u00a0HTMLCollection\u00a0\u96c6\u5408\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u83b7\u53d6\u6240\u6709 class="item" \u7684\u5143\u7d20
\nlet items = document.getElementsByClassName('item');
\nconsole.log('\u627e\u5230', items.length, '\u4e2a\u9879\u76ee');<\/p>\n
\/\/ \u904d\u5386\u5e76\u4fee\u6539\u6837\u5f0f
\nfor (let item of items) {
\n item.style.border = '1px solid black';
\n}<\/p>\n
\/\/ \u540c\u65f6\u5339\u914d\u591a\u4e2a\u7c7b\u540d
\nlet activeItems = document.getElementsByClassName('item active');\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u901a\u8fc7\u5143\u7d20\u7684\u00a0name\u00a0\u5c5e\u6027\u83b7\u53d6\u4e00\u7ec4\u5143\u7d20\u5bf9\u8c61\u7684\u96c6\u5408\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Get（\u83b7\u53d6）+ Elements（\u5143\u7d20）+ By（\u901a\u8fc7）+ Name（\u540d\u79f0）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let elements = document.getElementsByName(name);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
name：\u8981\u67e5\u627e\u7684\u00a0name\u00a0\u5c5e\u6027\u503c\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：NodeList\u00a0\u96c6\u5408（\u975e\u5b9e\u65f6，\u9759\u6001\u5feb\u7167）\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5e38\u7528\u4e8e\u8868\u5355\u5143\u7d20
\nlet genderRadios = document.getElementsByName('gender');<\/p>\n
\/\/ \u627e\u51fa\u9009\u4e2d\u7684\u5355\u9009\u6309\u94ae
\nlet selectedGender = null;
\nfor (let radio of genderRadios) {
\n if (radio.checked) {
\n selectedGender = radio.value;
\n break;
\n }
\n}
\nconsole.log('\u9009\u4e2d\u7684\u6027\u522b：', selectedGender);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u901a\u8fc7\u6807\u7b7e\u540d\u83b7\u53d6\u4e00\u7ec4\u5143\u7d20\u5bf9\u8c61\u7684\u96c6\u5408（\u5b9e\u65f6\u66f4\u65b0）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Get（\u83b7\u53d6）+ Elements（\u5143\u7d20）+ By（\u901a\u8fc7）+ Tag（\u6807\u7b7e）+ Name（\u540d\u79f0）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let elements = document.getElementsByTagName(tagName);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
tagName：\u6807\u7b7e\u540d（\u5982\u00a0'div'\u3001'p'）\u3002\u7279\u6b8a\u503c\u00a0'*'\u00a0\u5339\u914d\u6240\u6709\u5143\u7d20\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5b9e\u65f6\u7684\u00a0HTMLCollection\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let paragraphs = document.getElementsByTagName('p');
\nconsole.log('\u9875\u9762\u4e2d\u6709', paragraphs.length, '\u4e2a\u6bb5\u843d');<\/p>\n
\/\/ \u5c06\u6240\u6709\u6bb5\u843d\u6587\u5b57\u53d8\u84dd
\nfor (let p of paragraphs) {
\n p.style.color = 'blue';
\n}<\/p>\n
\/\/ \u83b7\u53d6\u6240\u6709\u5143\u7d20
\nlet allElements = document.getElementsByTagName('*');
\nconsole.log('\u603b\u5143\u7d20\u6570：', allElements.length);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u901a\u8fc7\u6807\u7b7e\u540d\u548c\u547d\u540d\u7a7a\u95f4 URI \u83b7\u53d6\u5143\u7d20\u96c6\u5408\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Get（\u83b7\u53d6）+ Elements（\u5143\u7d20）+ By（\u901a\u8fc7）+ TagName（\u6807\u7b7e\u540d）+ NS（\u547d\u540d\u7a7a\u95f4）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let elements = document.getElementsByTagNameNS(namespaceURI, localName);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
namespaceURI：\u547d\u540d\u7a7a\u95f4 URI（\u5982 SVG \u7684\u00a0'http:\/\/www.w3.org\/2000\/svg'）\u3002<\/p>\n<\/li>\n
localName：\u672c\u5730\u6807\u7b7e\u540d（\u5982\u00a0'svg'\u3001'circle'）\u3002'*'\u00a0\u5339\u914d\u6240\u6709\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5b9e\u65f6\u7684\u00a0NodeList\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u83b7\u53d6\u6240\u6709 SVG \u5143\u7d20
\nlet svgElements = document.getElementsByTagNameNS(
\n 'http:\/\/www.w3.org\/2000\/svg',
\n '*'
\n);
\nconsole.log('SVG \u5143\u7d20\u6570\u91cf：', svgElements.length);<\/p>\n
\/\/ \u83b7\u53d6\u6240\u6709 circle \u5143\u7d20
\nlet circles = document.getElementsByTagNameNS(
\n 'http:\/\/www.w3.org\/2000\/svg',
\n 'circle'
\n);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u6587\u6863\u4e2d\u5339\u914d\u6307\u5b9a CSS \u9009\u62e9\u5668\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Query（\u67e5\u8be2）+ Selector（\u9009\u62e9\u5668）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let element = document.querySelector(selectors);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
selectors：\u4e00\u4e2a\u6709\u6548\u7684 CSS \u9009\u62e9\u5668\u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5339\u914d\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20，\u6ca1\u6709\u5219\u8fd4\u56de\u00a0null\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let firstButton = document.querySelector('button.primary');
\nlet header = document.querySelector('#header > nav .menu-item');
\nlet complex = document.querySelector('div[data-type="user"]:nth-child(2)');<\/p>\n
if (firstButton) {
\n firstButton.click(); \/\/ \u81ea\u52a8\u70b9\u51fb\u7b2c\u4e00\u4e2a\u6309\u94ae
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u6587\u6863\u4e2d\u5339\u914d\u6307\u5b9a CSS \u9009\u62e9\u5668\u7684\u6240\u6709\u5143\u7d20\u7684\u9759\u6001\u96c6\u5408\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Query（\u67e5\u8be2）+ Selector All（\u6240\u6709\u9009\u62e9\u5668）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let elementList = document.querySelectorAll(selectors);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
selectors：CSS \u9009\u62e9\u5668\u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u9759\u6001\u7684\u00a0NodeList（\u652f\u6301\u00a0forEach\u00a0\u65b9\u6cd5）\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let items = document.querySelectorAll('.list-item');
\nconsole.log('\u627e\u5230', items.length, '\u4e2a\u9879\u76ee');<\/p>\n
\/\/ \u4f7f\u7528 forEach \u904d\u5386
\nitems.forEach((item, index) => {
\n item.textContent = `\u9879\u76ee ${index + 1}`;
\n});<\/p>\n
\/\/ \u590d\u6742\u9009\u62e9\u5668
\nlet checkedItems = document.querySelectorAll(
\n 'input[type="checkbox"]:checked, input[type="radio"]:checked'
\n);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u7528\u6237\u5f53\u524d\u5728\u9875\u9762\u4e0a\u9009\u4e2d\u7684\u6587\u672c\u8303\u56f4\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Get（\u83b7\u53d6）+ Selection（\u9009\u62e9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let selection = document.getSelection();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：\u65e0\u53c2\u6570\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：Selection\u00a0\u5bf9\u8c61，\u5305\u542b\u9009\u4e2d\u533a\u57df\u7684\u4fe1\u606f\u548c\u65b9\u6cd5\u3002<\/p>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u76d1\u542c\u9f20\u6807\u677e\u5f00\u4e8b\u4ef6，\u83b7\u53d6\u9009\u4e2d\u7684\u6587\u672c
\ndocument.addEventListener('mouseup', function() {
\n let selection = document.getSelection();
\n let selectedText = selection.toString();<\/p>\n
if (selectedText) {
\n console.log('\u9009\u4e2d\u4e86：', selectedText);
\n console.log('\u957f\u5ea6：', selectedText.length);
\n console.log('\u8d77\u59cb\u4f4d\u7f6e：', selection.anchorOffset);
\n console.log('\u7ed3\u675f\u4f4d\u7f6e：', selection.focusOffset);
\n }
\n});<\/p>\n
\/\/ \u624b\u52a8\u83b7\u53d6\u5e76\u64cd\u4f5c\u9009\u4e2d\u6587\u672c
\nfunction getSelectedHtml() {
\n let selection = document.getSelection();
\n if (selection.rangeCount > 0) {
\n let range = selection.getRangeAt(0);
\n let fragment = range.cloneContents();
\n let div = document.createElement('div');
\n div.appendChild(fragment);
\n return div.innerHTML;
\n }
\n return '';
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u9000\u51fa\u5168\u5c4f\u6a21\u5f0f，\u5c06\u6587\u6863\u6062\u590d\u5230\u6b63\u5e38\u663e\u793a\u72b6\u6001\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Exit（\u9000\u51fa）+ Fullscreen（\u5168\u5c4f）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let promise = document.exitFullscreen();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
\u65e0\u53c2\u6570\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u4e00\u4e2a Promise，\u5728\u5168\u5c4f\u9000\u51fa\u6210\u529f\u540e resolved，\u5931\u8d25\u65f6 rejected\u3002<\/p>\n<\/li>\n
\u901a\u5e38\u4e0e\u00a0document.fullscreenElement\u00a0\u914d\u5408\u4f7f\u7528\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u9000\u51fa\u5168\u5c4f\u6309\u94ae
\nlet exitBtn = document.getElementById('exit-fullscreen');
\nexitBtn.addEventListener('click', function() {
\n if (document.fullscreenElement) {
\n document.exitFullscreen()
\n .then(() => console.log('\u6210\u529f\u9000\u51fa\u5168\u5c4f'))
\n .catch((err) => {
\n console.error('\u9000\u51fa\u5168\u5c4f\u5931\u8d25:', err);
\n alert('\u9000\u51fa\u5168\u5c4f\u5931\u8d25：' + err.message);
\n });
\n }
\n});<\/p>\n
\/\/ \u6309 ESC \u952e\u65f6\u81ea\u52a8\u9000\u51fa\u5168\u5c4f（\u6d4f\u89c8\u5668\u9ed8\u8ba4\u884c\u4e3a，\u8fd9\u91cc\u53ea\u662f\u6f14\u793a）
\ndocument.addEventListener('fullscreenchange', function() {
\n if (!document.fullscreenElement) {
\n console.log('\u5df2\u9000\u51fa\u5168\u5c4f\u6a21\u5f0f');
\n \/\/ \u6062\u590d\u4e00\u4e9b UI \u72b6\u6001
\n document.body.classList.remove('fullscreen-mode');
\n } else {
\n document.body.classList.add('fullscreen-mode');
\n }
\n});<\/p>\n
\/\/ \u5168\u5c4f\u5207\u6362\u51fd\u6570
\nasync function toggleFullscreen(element) {
\n if (!document.fullscreenElement) {
\n \/\/ \u8fdb\u5165\u5168\u5c4f
\n await element.requestFullscreen();
\n } else {
\n \/\/ \u9000\u51fa\u5168\u5c4f
\n await document.exitFullscreen();
\n }
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u5728\u9875\u9762\u6307\u5b9a\u5750\u6807\u5904\u6700\u9876\u5c42\u7684\u5143\u7d20\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Element（\u5143\u7d20）+ From（\u4ece）+ Point（\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let element = document.elementFromPoint(x, y);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
x：\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u6c34\u5e73\u5750\u6807（\u50cf\u7d20）\u3002<\/p>\n<\/li>\n
y：\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u5782\u76f4\u5750\u6807（\u50cf\u7d20）\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u6307\u5b9a\u5750\u6807\u5904\u7684\u00a0Element，\u5982\u679c\u5750\u6807\u5728\u89c6\u53e3\u5916\u5219\u8fd4\u56de\u00a0null\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u83b7\u53d6\u5c4f\u5e55\u4e2d\u5fc3\u70b9\u7684\u5143\u7d20
\nlet centerX = window.innerWidth \/ 2;
\nlet centerY = window.innerHeight \/ 2;
\nlet centerElement = document.elementFromPoint(centerX, centerY);
\nconsole.log('\u5c4f\u5e55\u4e2d\u5fc3\u70b9\u7684\u5143\u7d20：', centerElement.tagName);<\/p>\n
\/\/ \u76d1\u542c\u70b9\u51fb，\u5e76\u83b7\u53d6\u70b9\u51fb\u5904\u7684\u5143\u7d20（\u5373\u4f7f\u6709\u4e8b\u4ef6\u5192\u6ce1\u4e5f\u80fd\u83b7\u53d6\u6700\u4e0a\u5c42\u5143\u7d20）
\ndocument.addEventListener('click', function(event) {
\n let elemAtPoint = document.elementFromPoint(event.clientX, event.clientY);
\n console.log('\u70b9\u51fb\u5904\u6700\u4e0a\u5c42\u7684\u5143\u7d20：', elemAtPoint.tagName, elemAtPoint.className);
\n});\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u5728\u9875\u9762\u6307\u5b9a\u5750\u6807\u5904\u6240\u6709\u5143\u7d20\u7684\u6570\u7ec4（\u4ece\u6700\u9876\u5c42\u5230\u6700\u5e95\u5c42）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Elements（\u5143\u7d20）+ From（\u4ece）+ Point（\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let elements = document.elementsFromPoint(x, y);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
x：\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u6c34\u5e73\u5750\u6807\u3002<\/p>\n<\/li>\n
y：\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u5782\u76f4\u5750\u6807\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5305\u542b\u6240\u6709\u91cd\u53e0\u5143\u7d20\u7684\u6570\u7ec4，\u6309 z-index \u4ece\u9ad8\u5230\u4f4e\u6392\u5217\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
document.addEventListener('mousemove', function(event) {
\n let elements = document.elementsFromPoint(event.clientX, event.clientY);<\/p>\n
\/\/ \u663e\u793a\u9f20\u6807\u4e0b\u65b9\u7684\u6240\u6709\u5143\u7d20
\n let tagNames = elements.map(el => el.tagName).join(' \u2192 ');
\n console.log('\u9f20\u6807\u4e0b\u65b9\u5143\u7d20\u5c42\u7ea7：', tagNames);<\/p>\n
\/\/ \u8c03\u8bd5：\u9ad8\u4eae\u6240\u6709\u5143\u7d20
\n elements.forEach((el, index) => {
\n el.style.outline = index === 0 ? '2px solid red' : '1px dashed blue';
\n });
\n});<\/p>\n
\/\/ \u68c0\u67e5\u67d0\u4e2a\u4f4d\u7f6e\u662f\u5426\u6709\u7279\u5b9a\u5143\u7d20
\nfunction hasElementAtPoint(x, y, selector) {
\n let elements = document.elementsFromPoint(x, y);
\n return elements.some(el => el.matches(selector));
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u5143\u7d20\u5728\u9875\u9762\u4e0a\u5360\u636e\u7684\u6240\u6709\u77e9\u5f62\u533a\u57df（\u901a\u5e38\u7528\u4e8e\u83b7\u53d6\u5185\u8054\u5143\u7d20\u7684\u6362\u884c\u4fe1\u606f）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Get（\u83b7\u53d6）+ Client（\u5ba2\u6237\u7aef）+ Rects（\u77e9\u5f62）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let rectCollection = element.getClientRects();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
\u8fd9\u4e2a\u65b9\u6cd5\u901a\u5e38\u5728\u5177\u4f53\u7684\u5143\u7d20\u4e0a\u8c03\u7528，\u800c\u4e0d\u662f\u00a0document\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：DOMRectList\u00a0\u5bf9\u8c61，\u5305\u542b\u4e00\u4e2a\u6216\u591a\u4e2a\u00a0DOMRect\u00a0\u5bf9\u8c61\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u6ce8\u610f：\u8fd9\u4e2a\u65b9\u6cd5\u5c5e\u4e8e Element，\u4f46\u8fd9\u91cc\u5217\u51fa\u662f\u56e0\u4e3a\u4f60\u63d0\u5230\u4e86
\nlet textSpan = document.getElementById('multi-line-text');<\/p>\n
\/\/ \u83b7\u53d6\u5185\u8054\u5143\u7d20\u7684\u6240\u6709\u77e9\u5f62（\u4f8b\u5982\u6362\u884c\u540e\u4f1a\u6709\u591a\u4e2a\u77e9\u5f62）
\nlet rects = textSpan.getClientRects();<\/p>\n
console.log('\u8fd9\u4e2a\u5143\u7d20\u5360\u636e', rects.length, '\u4e2a\u77e9\u5f62\u533a\u57df');<\/p>\n
for (let i = 0; i < rects.length; i++) {
\n let rect = rects[i];
\n console.log(`\u77e9\u5f62 ${i + 1}:`, {
\n left: rect.left,
\n top: rect.top,
\n right: rect.right,
\n bottom: rect.bottom,
\n width: rect.width,
\n height: rect.height
\n });
\n}<\/p>\n
\/\/ \u5224\u65ad\u6587\u672c\u662f\u5426\u6362\u884c
\nif (rects.length > 1) {
\n console.log('\u6587\u672c\u6362\u884c\u4e86');
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 Range \u5bf9\u8c61，\u8868\u793a\u6587\u6863\u4e2d\u7684\u4e00\u4e2a\u8fde\u7eed\u533a\u57df\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Create（\u521b\u5efa）+ Range（\u8303\u56f4）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let range = document.createRange();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：\u65e0\u53c2\u6570\u3002\u8fd4\u56de\u4e00\u4e2a\u521d\u59cb\u5316\u7684\u7a7a\u00a0Range\u00a0\u5bf9\u8c61\u3002<\/p>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u521b\u5efa\u8303\u56f4
\nlet range = document.createRange();<\/p>\n
\/\/ \u8bbe\u7f6e\u8303\u56f4\u7684\u8d77\u70b9\u548c\u7ec8\u70b9
\nlet startNode = document.getElementById('start');
\nlet endNode = document.getElementById('end');<\/p>\n
\/\/ \u4ece startNode \u7684\u7b2c 2 \u4e2a\u5b50\u8282\u70b9\u5f00\u59cb，\u504f\u79fb\u91cf\u4e3a 0
\nrange.setStart(startNode, 2);
\n\/\/ \u5230 endNode \u7684\u7b2c 1 \u4e2a\u5b50\u8282\u70b9\u7ed3\u675f，\u504f\u79fb\u91cf\u4e3a 3
\nrange.setEnd(endNode, 1);<\/p>\n
\/\/ \u83b7\u53d6\u8303\u56f4\u5185\u7684\u5185\u5bb9
\nlet fragment = range.cloneContents(); \/\/ \u514b\u9686\u5185\u5bb9
\nlet selectedText = range.toString(); \/\/ \u83b7\u53d6\u7eaf\u6587\u672c<\/p>\n
console.log('\u9009\u4e2d\u6587\u672c：', selectedText);<\/p>\n
\/\/ \u9ad8\u4eae\u9009\u4e2d\u7684\u8303\u56f4
\nlet highlightSpan = document.createElement('span');
\nhighlightSpan.style.backgroundColor = 'yellow';
\nrange.surroundContents(highlightSpan); \/\/ \u7528 span \u5305\u88f9\u8303\u56f4\u5185\u5bb9<\/p>\n
\/\/ \u66f4\u7b80\u5355\u7684\u7528\u6cd5：\u9009\u4e2d\u6574\u4e2a\u5143\u7d20\u5185\u5bb9
\nlet element = document.getElementById('article');
\nrange.selectNodeContents(element);
\nlet content = range.toString();\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u6307\u5b9a\u5750\u6807\u5904\u7684\u5149\u6807\u4f4d\u7f6e\u4fe1\u606f（\u7528\u4e8e\u6587\u672c\u7f16\u8f91）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Caret（\u5149\u6807）+ Position（\u4f4d\u7f6e）+ From（\u4ece）+ Point（\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let caretPosition = document.caretPositionFromPoint(x, y);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
x：\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u6c34\u5e73\u5750\u6807（\u50cf\u7d20）\u3002<\/p>\n<\/li>\n
y：\u76f8\u5bf9\u4e8e\u89c6\u53e3\u7684\u5782\u76f4\u5750\u6807（\u50cf\u7d20）\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u4e00\u4e2a\u00a0CaretPosition\u00a0\u5bf9\u8c61，\u5305\u542b\u00a0offsetNode（\u8282\u70b9）\u548c\u00a0offset（\u504f\u79fb\u91cf），\u5982\u679c\u5750\u6807\u5904\u6ca1\u6709\u6587\u672c\u5219\u8fd4\u56de\u00a0null\u3002<\/p>\n<\/li>\n
\u6ce8\u610f：\u8fd9\u662f\u4e00\u4e2a\u8f83\u65b0\u7684 API，\u73b0\u4ee3\u6d4f\u89c8\u5668\u652f\u6301\u826f\u597d\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5728\u53ef\u7f16\u8f91\u533a\u57df\u4e2d\u70b9\u51fb\u65f6\u83b7\u53d6\u5149\u6807\u4f4d\u7f6e
\nlet editor = document.getElementById('editor');<\/p>\n
editor.addEventListener('click', function(event) {
\n let caretPos = document.caretPositionFromPoint(event.clientX, event.clientY);<\/p>\n
if (caretPos) {
\n let node = caretPos.offsetNode;
\n let offset = caretPos.offset;<\/p>\n
console.log('\u70b9\u51fb\u7684\u6587\u672c\u8282\u70b9:', node);
\n console.log('\u5b57\u7b26\u504f\u79fb\u91cf:', offset);<\/p>\n
\/\/ \u5982\u679c\u662f\u6587\u672c\u8282\u70b9，\u53ef\u4ee5\u83b7\u53d6\u9644\u8fd1\u7684\u6587\u672c
\n if (node.nodeType === Node.TEXT_NODE) {
\n let text = node.textContent;
\n let before = text.substring(0, offset);
\n let after = text.substring(offset);
\n console.log('\u5149\u6807\u524d:', before);
\n console.log('\u5149\u6807\u540e:', after);
\n }
\n }
\n});<\/p>\n
\/\/ \u5b9e\u73b0\u81ea\u5b9a\u4e49\u7684\u6587\u672c\u63d2\u5165
\nfunction insertTextAtCursor(text) {
\n let selection = document.getSelection();
\n if (selection.rangeCount > 0) {
\n let range = selection.getRangeAt(0);
\n range.deleteContents(); \/\/ \u5220\u9664\u9009\u4e2d\u7684\u5185\u5bb9
\n range.insertNode(document.createTextNode(text)); \/\/ \u63d2\u5165\u65b0\u6587\u672c
\n }
\n}<\/p>\n
\/\/ \u83b7\u53d6\u9f20\u6807\u4f4d\u7f6e\u6700\u8fd1\u7684\u5355\u8bcd
\ndocument.addEventListener('mouseup', function(event) {
\n let caretPos = document.caretPositionFromPoint(event.clientX, event.clientY);
\n if (caretPos && caretPos.offsetNode.nodeType === Node.TEXT_NODE) {
\n let text = caretPos.offsetNode.textContent;
\n let pos = caretPos.offset;<\/p>\n
\/\/ \u7b80\u5355\u5b9e\u73b0：\u627e\u5230\u5149\u6807\u6240\u5728\u7684\u5355\u8bcd
\n let words = text.split(\/\\\\s+\/);
\n let charCount = 0;
\n for (let word of words) {
\n if (pos >= charCount && pos <= charCount + word.length) {
\n console.log('\u70b9\u51fb\u7684\u5355\u8bcd:', word);
\n break;
\n }
\n charCount += word.length + 1; \/\/ +1 \u7a7a\u683c
\n }
\n }
\n});\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8bc4\u4f30 XPath \u8868\u8fbe\u5f0f，\u8fd4\u56de\u5339\u914d\u7684\u7ed3\u679c\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Evaluate（\u8bc4\u4f30）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let xpathResult = document.evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
xpathExpression：XPath \u8868\u8fbe\u5f0f\u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
contextNode：\u4e0a\u4e0b\u6587\u8282\u70b9（\u901a\u5e38\u662f\u00a0document）\u3002<\/p>\n<\/li>\n
namespaceResolver：\u547d\u540d\u7a7a\u95f4\u89e3\u6790\u51fd\u6570（\u901a\u5e38\u4e3a\u00a0null）\u3002<\/p>\n<\/li>\n
resultType：\u8fd4\u56de\u7ed3\u679c\u7684\u7c7b\u578b\u3002<\/p>\n<\/li>\n
result：\u53ef\u91cd\u7528\u7684\u7ed3\u679c\u5bf9\u8c61（\u901a\u5e38\u4e3a\u00a0null）\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u67e5\u627e\u6240\u6709 class \u4e3a "item" \u7684 div
\nlet result = document.evaluate(
\n '\/\/div[@class="item"]',
\n document,
\n null,
\n XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
\n null
\n);<\/p>\n
for (let i = 0; i < result.snapshotLength; i++) {
\n console.log(result.snapshotItem(i)); \/\/ \u8f93\u51fa\u5339\u914d\u7684\u5143\u7d20
\n}<\/p>\n
\/\/ \u67e5\u627e\u7b2c\u4e00\u4e2a h1 \u6807\u9898
\nlet h1 = document.evaluate(
\n '\/\/h1',
\n document,
\n null,
\n XPathResult.FIRST_ORDERED_NODE_TYPE,
\n null
\n).singleNodeValue;<\/p>\n
console.log('\u7b2c\u4e00\u4e2ah1:', h1);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u5c5e\u6027\u8282\u70b9（\u901a\u5e38\u4e0d\u63a8\u8350\u4f7f\u7528，\u5efa\u8bae\u7528\u00a0setAttribute）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Create（\u521b\u5efa）+ Attribute（\u5c5e\u6027）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let attrNode = document.createAttribute(name);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
name：\u5c5e\u6027\u7684\u540d\u79f0\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u65b0\u521b\u5efa\u7684\u00a0Attr\u00a0\u8282\u70b9，\u5305\u542b\u00a0name\u00a0\u548c\u00a0value\u00a0\u5c5e\u6027\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u521b\u5efa\u5c5e\u6027\u8282\u70b9
\nlet classAttr = document.createAttribute('class');
\nclassAttr.value = 'highlight bold';<\/p>\n
let dataAttr = document.createAttribute('data-id');
\ndataAttr.value = '12345';<\/p>\n
\/\/ \u5c06\u5c5e\u6027\u5e94\u7528\u5230\u5143\u7d20
\nlet div = document.getElementById('myDiv');
\ndiv.setAttributeNode(classAttr);
\ndiv.setAttributeNode(dataAttr);<\/p>\n
console.log(div.outerHTML); \/\/ <div class="highlight bold" data-id="12345"><\/div><\/p>\n
\/\/ \u66f4\u7b80\u5355\u7684\u65b9\u5f0f（\u63a8\u8350）
\n\/\/ div.setAttribute('class', 'highlight bold');
\n\/\/ div.setAttribute('data-id', '12345');\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u6ce8\u91ca\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Create（\u521b\u5efa）+ Comment（\u6ce8\u91ca）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let commentNode = document.createComment(data);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
data：\u6ce8\u91ca\u7684\u5185\u5bb9\u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u65b0\u521b\u5efa\u7684\u00a0Comment\u00a0\u8282\u70b9\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u521b\u5efa\u6ce8\u91ca
\nlet comment1 = document.createComment('\u8fd9\u662f\u52a8\u6001\u751f\u6210\u7684\u6ce8\u91ca');
\nlet comment2 = document.createComment('\u521b\u5efa\u65f6\u95f4：' + new Date().toLocaleString());<\/p>\n
\/\/ \u6dfb\u52a0\u5230\u9875\u9762
\ndocument.body.appendChild(comment1);
\ndocument.getElementById('footer').appendChild(comment2);<\/p>\n
\/\/ \u5728 HTML \u6e90\u7801\u4e2d\u4f1a\u770b\u5230：
\n\/\/ <!–\u8fd9\u662f\u52a8\u6001\u751f\u6210\u7684\u6ce8\u91ca–>
\n\/\/ <!–\u521b\u5efa\u65f6\u95f4：2024\/1\/15 14:30:00–><\/p>\n
\/\/ \u4e5f\u53ef\u4ee5\u7528\u4e8e\u8c03\u8bd5\u6807\u8bb0
\nfunction addDebugComment(element, message) {
\n let comment = document.createComment(`DEBUG: ${message}`);
\n element.parentNode.insertBefore(comment, element);
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u521b\u5efa\u4e00\u4e2a\u7a7a\u7684\u6587\u6863\u7247\u6bb5（\u8f7b\u91cf\u7ea7\u7684\u6587\u6863\u5bb9\u5668，\u7528\u4e8e\u6279\u91cf\u64cd\u4f5c）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Create（\u521b\u5efa）+ Document（\u6587\u6863）+ Fragment（\u7247\u6bb5）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let fragment = document.createDocumentFragment();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：\u65e0\u53c2\u6570\u3002\u8fd4\u56de\u4e00\u4e2a\u7a7a\u7684\u00a0DocumentFragment\u00a0\u5bf9\u8c61\u3002<\/p>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u521b\u5efa\u7247\u6bb5
\nlet fragment = document.createDocumentFragment();<\/p>\n
\/\/ \u6279\u91cf\u521b\u5efa\u5143\u7d20（\u53ea\u89e6\u53d1\u4e00\u6b21\u91cd\u7ed8）
\nfor (let i = 0; i < 1000; i++) {
\n let li = document.createElement('li');
\n li.textContent = `\u5217\u8868\u9879 ${i + 1}`;
\n li.className = i % 2 === 0 ? 'even' : 'odd';
\n fragment.appendChild(li); \/\/ \u5148\u6dfb\u52a0\u5230\u7247\u6bb5，\u4e0d\u4f1a\u89e6\u53d1\u91cd\u7ed8
\n}<\/p>\n
\/\/ \u4e00\u6b21\u6027\u6dfb\u52a0\u5230 DOM（\u53ea\u89e6\u53d1\u4e00\u6b21\u91cd\u7ed8）
\nlet list = document.getElementById('big-list');
\nlist.appendChild(fragment);<\/p>\n
console.log('1000 \u4e2a\u9879\u76ee\u5df2\u9ad8\u6548\u6dfb\u52a0');<\/p>\n
\/\/ \u53e6\u4e00\u4e2a\u4f8b\u5b50：\u6784\u5efa\u590d\u6742\u7ed3\u6784
\nfunction buildCard(title, content) {
\n let fragment = document.createDocumentFragment();<\/p>\n
let header = document.createElement('h3');
\n header.textContent = title;<\/p>\n
let body = document.createElement('p');
\n body.textContent = content;<\/p>\n
let footer = document.createElement('div');
\n footer.className = 'card-footer';<\/p>\n
fragment.appendChild(header);
\n fragment.appendChild(body);
\n fragment.appendChild(footer);<\/p>\n
return fragment;
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u4e8b\u4ef6\u5bf9\u8c61（\u65e7\u5f0f\u65b9\u6cd5，\u63a8\u8350\u4f7f\u7528\u00a0new Event()\u00a0\u6784\u9020\u51fd\u6570）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Create（\u521b\u5efa）+ Event（\u4e8b\u4ef6）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let event = document.createEvent(type);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
type：\u4e8b\u4ef6\u7c7b\u578b\u5b57\u7b26\u4e32，\u5982：<\/p>\n
'MouseEvents'：\u9f20\u6807\u4e8b\u4ef6<\/p>\n<\/li>\n
'HTMLEvents'：HTML \u4e8b\u4ef6<\/p>\n<\/li>\n
'UIEvents'：UI \u4e8b\u4ef6<\/p>\n<\/li>\n
'KeyboardEvents'：\u952e\u76d8\u4e8b\u4ef6<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u8fd4\u56de\u503c：\u521b\u5efa\u7684\u4e8b\u4ef6\u5bf9\u8c61，\u9700\u8981\u8fdb\u4e00\u6b65\u521d\u59cb\u5316\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u65e7\u5f0f\u65b9\u6cd5（\u4e0d\u63a8\u8350，\u4ec5\u4e3a\u4e86\u89e3）<\/p>\n
\/\/ \u521b\u5efa\u9f20\u6807\u4e8b\u4ef6
\nlet clickEvent = document.createEvent('MouseEvents');
\nclickEvent.initMouseEvent(
\n 'click', \/\/ \u4e8b\u4ef6\u7c7b\u578b
\n true, \/\/ \u662f\u5426\u5192\u6ce1
\n true, \/\/ \u662f\u5426\u53ef\u53d6\u6d88
\n window, \/\/ \u89c6\u56fe
\n 0, \/\/ \u70b9\u51fb\u6b21\u6570
\n 100, 100, \/\/ \u5c4f\u5e55\u5750\u6807
\n 50, 50, \/\/ \u5ba2\u6237\u533a\u5750\u6807
\n false, false, false, false, \/\/ Ctrl, Alt, Shift, Meta
\n 0, \/\/ \u9f20\u6807\u6309\u94ae（0=\u5de6\u952e）
\n null \/\/ \u76f8\u5173\u76ee\u6807
\n);<\/p>\n
\/\/ \u6d3e\u53d1\u4e8b\u4ef6
\nlet button = document.getElementById('myButton');
\nbutton.dispatchEvent(clickEvent);<\/p>\n
\/\/ \u73b0\u4ee3\u63a8\u8350\u5199\u6cd5
\n\/\/ let clickEvent = new MouseEvent('click', {
\n\/\/ bubbles: true,
\n\/\/ clientX: 50,
\n\/\/ clientY: 50
\n\/\/ });\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u521b\u5efa\u4e00\u4e2a\u65b0\u7684 HTML \u5143\u7d20\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Create（\u521b\u5efa）+ Element（\u5143\u7d20）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let element = document.createElement(tagName, options);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
tagName：\u8981\u521b\u5efa\u7684\u5143\u7d20\u7684\u6807\u7b7e\u540d（\u5982\u00a0'div'\u3001'span'\u3001'custom-element'）\u3002<\/p>\n<\/li>\n
options（\u53ef\u9009）：\u4e00\u4e2a\u5bf9\u8c61，\u53ef\u4ee5\u5305\u542b\u00a0is\u00a0\u5c5e\u6027\u6765\u6307\u5b9a\u81ea\u5b9a\u4e49\u5143\u7d20\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u65b0\u521b\u5efa\u7684\u00a0Element\u00a0\u5bf9\u8c61\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u57fa\u672c\u7528\u6cd5
\nlet div = document.createElement('div');
\ndiv.id = 'new-div';
\ndiv.className = 'box';
\ndiv.textContent = '\u6211\u662f\u65b0\u521b\u5efa\u7684 Div';<\/p>\n
\/\/ \u8bbe\u7f6e\u6837\u5f0f
\ndiv.style.padding = '10px';
\ndiv.style.backgroundColor = 'lightblue';<\/p>\n
\/\/ \u521b\u5efa\u81ea\u5b9a\u4e49\u5143\u7d20（\u5982\u679c\u5df2\u6ce8\u518c）
\n\/\/ let myElement = document.createElement('custom-element', { is: 'my-button' });<\/p>\n
\/\/ \u6dfb\u52a0\u5230\u9875\u9762
\ndocument.body.appendChild(div);<\/p>\n
\/\/ \u521b\u5efa\u5e26\u547d\u540d\u7a7a\u95f4\u7684\u5143\u7d20（\u5982 SVG）
\nlet svg = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'svg');
\nlet circle = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');
\nsvg.appendChild(circle);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u6587\u672c\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Create（\u521b\u5efa）+ Text（\u6587\u672c）+ Node（\u8282\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let textNode = document.createTextNode(data);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
data：\u4e00\u4e2a\u5b57\u7b26\u4e32，\u662f\u8981\u653e\u5165\u6587\u672c\u8282\u70b9\u7684\u5185\u5bb9\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u65b0\u521b\u5efa\u7684\u00a0Text\u00a0\u8282\u70b9\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u521b\u5efa\u6587\u672c\u8282\u70b9
\nlet text1 = document.createTextNode('\u8fd9\u662f\u4e00\u6bb5\u666e\u901a\u6587\u672c');
\nlet text2 = document.createTextNode('\u53e6\u4e00\u6bb5\u6587\u672c');<\/p>\n
\/\/ \u521b\u5efa\u5143\u7d20\u5e76\u6dfb\u52a0\u6587\u672c
\nlet paragraph = document.createElement('p');
\nparagraph.appendChild(text1);<\/p>\n
\/\/ \u5728\u6587\u672c\u540e\u8ffd\u52a0\u66f4\u591a\u6587\u672c
\nparagraph.appendChild(document.createTextNode(' – \u8ffd\u52a0\u7684\u5185\u5bb9'));<\/p>\n
\/\/ \u4fee\u6539\u6587\u672c\u5185\u5bb9
\ntext1.nodeValue = '\u4fee\u6539\u540e\u7684\u6587\u672c';<\/p>\n
\/\/ \u6ce8\u610f：createTextNode \u4f1a\u8f6c\u4e49 HTML \u6807\u7b7e
\nlet safeText = document.createTextNode('<script>alert("xss")<\/script>');
\n\/\/ \u9875\u9762\u4f1a\u663e\u793a\u539f\u6587，\u4e0d\u4f1a\u6267\u884c\u811a\u672c
\ndocument.body.appendChild(safeText);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u6bd4\u8f83\u5f53\u524d\u6587\u6863\u548c\u53e6\u4e00\u4e2a\u8282\u70b9\u7684\u4f4d\u7f6e\u5173\u7cfb\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Compare（\u6bd4\u8f83）+ Document（\u6587\u6863）+ Position（\u4f4d\u7f6e）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let relationship = document.compareDocumentPosition(otherNode);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
otherNode：\u8981\u6bd4\u8f83\u7684\u53e6\u4e00\u4e2a\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u4e00\u4e2a\u4f4d\u63a9\u7801（\u6574\u6570），\u8868\u793a\u4e24\u4e2a\u8282\u70b9\u7684\u5173\u7cfb\u3002\u53ef\u80fd\u7684\u503c：<\/p>\n
0：\u4e24\u4e2a\u8282\u70b9\u76f8\u540c<\/p>\n<\/li>\n
1：\u8282\u70b9\u4e0d\u5728\u540c\u4e00\u6587\u6863\u4e2d<\/p>\n<\/li>\n
2：otherNode \u5728\u5f53\u524d\u8282\u70b9\u4e4b\u524d<\/p>\n<\/li>\n
4：otherNode \u5728\u5f53\u524d\u8282\u70b9\u4e4b\u540e<\/p>\n<\/li>\n
8：otherNode \u5305\u542b\u5f53\u524d\u8282\u70b9<\/p>\n<\/li>\n
16：otherNode \u88ab\u5f53\u524d\u8282\u70b9\u5305\u542b<\/p>\n<\/li>\n
32：\u6d4f\u89c8\u5668\u7684\u79c1\u6709\u4f7f\u7528<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let head = document.head;
\nlet body = document.body;<\/p>\n
\/\/ \u6bd4\u8f83 head \u548c body \u7684\u4f4d\u7f6e
\nlet result = head.compareDocumentPosition(body);<\/p>\n
\/\/ \u4f7f\u7528\u4f4d\u8fd0\u7b97\u68c0\u67e5\u5173\u7cfb
\nif (result & Node.DOCUMENT_POSITION_FOLLOWING) {
\n console.log('head \u5728 body \u4e4b\u524d'); \/\/ \u901a\u5e38\u4f1a\u8f93\u51fa\u8fd9\u4e2a
\n}<\/p>\n
if (result & Node.DOCUMENT_POSITION_PRECEDING) {
\n console.log('head \u5728 body \u4e4b\u540e');
\n}<\/p>\n
\/\/ \u68c0\u67e5\u5143\u7d20\u662f\u5426\u5305\u542b\u53e6\u4e00\u4e2a\u5143\u7d20
\nlet parent = document.getElementById('parent');
\nlet child = document.getElementById('child');<\/p>\n
if (parent.compareDocumentPosition(child) & Node.DOCUMENT_POSITION_CONTAINED_BY) {
\n console.log('child \u88ab parent \u5305\u542b');
\n}<\/p>\n
\/\/ \u5e38\u91cf\u5b9a\u4e49（\u4fbf\u4e8e\u9605\u8bfb）
\nconst POSITION = {
\n DISCONNECTED: 1,
\n PRECEDING: 2,
\n FOLLOWING: 4,
\n CONTAINS: 8,
\n CONTAINED_BY: 16
\n};\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u68c0\u67e5\u4e00\u4e2a\u8282\u70b9\u662f\u5426\u662f\u6587\u6863\u7684\u540e\u4ee3\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Contains（\u5305\u542b）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let isDescendant = document.contains(otherNode);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
otherNode：\u8981\u68c0\u67e5\u7684\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5e03\u5c14\u503c，\u5982\u679c\u8282\u70b9\u662f\u6587\u6863\u7684\u4e00\u90e8\u5206\u8fd4\u56de\u00a0true，\u5426\u5219\u8fd4\u56de\u00a0false\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let div = document.getElementById('myDiv');
\nconsole.log(document.contains(div)); \/\/ true（div \u5728\u9875\u9762\u4e2d）<\/p>\n
\/\/ \u68c0\u67e5\u65b0\u521b\u5efa\u7684\u8282\u70b9
\nlet newDiv = document.createElement('div');
\nconsole.log(document.contains(newDiv)); \/\/ false（\u8fd8\u6ca1\u6dfb\u52a0\u5230\u9875\u9762）<\/p>\n
\/\/ \u6dfb\u52a0\u5230\u9875\u9762\u540e
\ndocument.body.appendChild(newDiv);
\nconsole.log(document.contains(newDiv)); \/\/ true<\/p>\n
\/\/ \u68c0\u67e5 null \u6216 undefined
\nconsole.log(document.contains(null)); \/\/ false<\/p>\n
\/\/ \u68c0\u67e5\u6587\u6863\u81ea\u8eab
\nconsole.log(document.contains(document)); \/\/ true<\/p>\n
\/\/ \u5b9e\u7528\u573a\u666f：\u68c0\u67e5\u5143\u7d20\u662f\u5426\u8fd8\u5728 DOM \u4e2d
\nfunction isInDOM(element) {
\n return document.contains(element);
\n}<\/p>\n
\/\/ \u5b9a\u671f\u68c0\u67e5\u5143\u7d20\u662f\u5426\u5b58\u5728
\nlet element = document.getElementById('temp');
\nsetInterval(() => {
\n if (!document.contains(element)) {
\n console.log('\u5143\u7d20\u5df2\u88ab\u79fb\u9664');
\n element = null;
\n }
\n}, 1000);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u68c0\u67e5\u6307\u5b9a\u7684\u547d\u540d\u7a7a\u95f4 URI \u662f\u5426\u4e3a\u6587\u6863\u7684\u9ed8\u8ba4\u547d\u540d\u7a7a\u95f4\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Is（\u662f）+ Default（\u9ed8\u8ba4）+ Namespace（\u547d\u540d\u7a7a\u95f4）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let bool = document.isDefaultNamespace(namespaceURI);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
namespaceURI：\u8981\u68c0\u67e5\u7684\u547d\u540d\u7a7a\u95f4 URI \u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5e03\u5c14\u503c，\u5982\u679c\u662f\u9ed8\u8ba4\u547d\u540d\u7a7a\u95f4\u8fd4\u56de\u00a0true，\u5426\u5219\u8fd4\u56de\u00a0false\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u68c0\u67e5 HTML \u547d\u540d\u7a7a\u95f4
\nlet isHTML = document.isDefaultNamespace('http:\/\/www.w3.org\/1999\/xhtml');
\nconsole.log('\u662f HTML \u9ed8\u8ba4\u547d\u540d\u7a7a\u95f4？', isHTML); \/\/ true<\/p>\n
\/\/ \u68c0\u67e5 SVG \u547d\u540d\u7a7a\u95f4
\nlet isSVG = document.isDefaultNamespace('http:\/\/www.w3.org\/2000\/svg');
\nconsole.log('\u662f SVG \u9ed8\u8ba4\u547d\u540d\u7a7a\u95f4？', isSVG); \/\/ false<\/p>\n
\/\/ \u5728 XML \u6587\u6863\u4e2d\u4f7f\u7528
\nif (document.isDefaultNamespace('http:\/\/www.w3.org\/1999\/xhtml')) {
\n console.log('\u5f53\u524d\u662f HTML \u6587\u6863');
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u68c0\u67e5\u4e24\u4e2a\u8282\u70b9\u662f\u5426\u76f8\u7b49（\u5177\u6709\u76f8\u540c\u7684\u7c7b\u578b\u3001\u5c5e\u6027\u3001\u5b50\u8282\u70b9\u7b49，\u4f46\u4e0d\u4e00\u5b9a\u662f\u540c\u4e00\u4e2a\u5f15\u7528）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Is（\u662f）+ Equal（\u76f8\u7b49）+ Node（\u8282\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let isEqual = document.isEqualNode(otherNode);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
otherNode：\u8981\u6bd4\u8f83\u7684\u53e6\u4e00\u4e2a\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5e03\u5c14\u503c，\u5982\u679c\u4e24\u4e2a\u8282\u70b9\u5b8c\u5168\u76f8\u7b49\u8fd4\u56de\u00a0true\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u521b\u5efa\u4e24\u4e2a\u7ed3\u6784\u76f8\u540c\u7684\u5143\u7d20
\nlet div1 = document.createElement('div');
\ndiv1.id = 'test';
\ndiv1.className = 'box';
\ndiv1.textContent = '\u5185\u5bb9';<\/p>\n
let div2 = document.createElement('div');
\ndiv2.id = 'test';
\ndiv2.className = 'box';
\ndiv2.textContent = '\u5185\u5bb9';<\/p>\n
\/\/ \u68c0\u67e5\u662f\u5426\u76f8\u7b49（\u7ed3\u6784\u76f8\u540c）
\nconsole.log(div1.isEqualNode(div2)); \/\/ true<\/p>\n
\/\/ \u68c0\u67e5\u662f\u5426\u662f\u540c\u4e00\u4e2a\u8282\u70b9（\u5f15\u7528\u76f8\u540c）
\nconsole.log(div1 === div2); \/\/ false<\/p>\n
\/\/ \u7a0d\u5fae\u4fee\u6539\u4e00\u70b9
\ndiv2.textContent = '\u4e0d\u540c\u5185\u5bb9';
\nconsole.log(div1.isEqualNode(div2)); \/\/ false<\/p>\n
\/\/ \u6bd4\u8f83\u6587\u6863\u7247\u6bb5
\nlet frag1 = document.createDocumentFragment();
\nlet frag2 = document.createDocumentFragment();
\nconsole.log(frag1.isEqualNode(frag2)); \/\/ true（\u90fd\u662f\u7a7a\u7247\u6bb5）<\/p>\n
\/\/ \u5b9e\u7528\u573a\u666f：\u68c0\u67e5\u4e24\u4e2a\u5143\u7d20\u662f\u5426\u76f8\u540c（\u4e0d\u8003\u8651\u5f15\u7528）
\nfunction areElementsIdentical(el1, el2) {
\n return el1.isEqualNode(el2);
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u68c0\u67e5\u4e24\u4e2a\u8282\u70b9\u662f\u5426\u662f\u540c\u4e00\u4e2a\u8282\u70b9（\u5f15\u7528\u76f8\u540c）\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Is（\u662f）+ Same（\u76f8\u540c）+ Node（\u8282\u70b9）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let isSame = document.isSameNode(otherNode);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
otherNode：\u8981\u6bd4\u8f83\u7684\u53e6\u4e00\u4e2a\u8282\u70b9\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5e03\u5c14\u503c，\u5982\u679c\u4e24\u4e2a\u8282\u70b9\u662f\u540c\u4e00\u4e2a\u5bf9\u8c61\u8fd4\u56de\u00a0true\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
let div1 = document.getElementById('myDiv');
\nlet div2 = document.getElementById('myDiv');<\/p>\n
\/\/ \u68c0\u67e5\u662f\u5426\u662f\u540c\u4e00\u4e2a\u8282\u70b9
\nconsole.log(div1.isSameNode(div2)); \/\/ true<\/p>\n
\/\/ \u7b49\u4ef7\u4e8e
\nconsole.log(div1 === div2); \/\/ true<\/p>\n
\/\/ \u590d\u5236\u540e\u7684\u8282\u70b9\u4e0d\u662f\u540c\u4e00\u4e2a
\nlet div3 = div1.cloneNode(true);
\nconsole.log(div1.isSameNode(div3)); \/\/ false<\/p>\n
\/\/ \u5b9e\u7528\u573a\u666f：\u907f\u514d\u91cd\u590d\u5904\u7406
\nfunction processElement(element) {
\n if (processedElement && processedElement.isSameNode(element)) {
\n console.log('\u5df2\u7ecf\u5904\u7406\u8fc7\u8fd9\u4e2a\u5143\u7d20\u4e86');
\n return;
\n }
\n \/\/ \u5904\u7406\u5143\u7d20
\n processedElement = element;
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u7ed9\u5b9a\u524d\u7f00\u5bf9\u5e94\u7684\u547d\u540d\u7a7a\u95f4 URI\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Lookup（\u67e5\u627e）+ Namespace（\u547d\u540d\u7a7a\u95f4）+ URI\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let namespaceURI = document.lookupNamespaceURI(prefix);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
prefix：\u8981\u67e5\u627e\u7684\u524d\u7f00\u5b57\u7b26\u4e32（\u5982\u00a0'svg'\u3001'xhtml'）\u3002\u4f20\u5165\u00a0null\u00a0\u8fd4\u56de\u9ed8\u8ba4\u547d\u540d\u7a7a\u95f4\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5bf9\u5e94\u7684\u547d\u540d\u7a7a\u95f4 URI \u5b57\u7b26\u4e32，\u5982\u679c\u6ca1\u6709\u5219\u8fd4\u56de\u00a0null\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u67e5\u627e\u9ed8\u8ba4\u547d\u540d\u7a7a\u95f4
\nlet defaultNS = document.lookupNamespaceURI(null);
\nconsole.log('\u9ed8\u8ba4\u547d\u540d\u7a7a\u95f4：', defaultNS); \/\/ 'http:\/\/www.w3.org\/1999\/xhtml'<\/p>\n
\/\/ \u67e5\u627e\u7279\u5b9a\u524d\u7f00\u7684\u547d\u540d\u7a7a\u95f4
\nlet svgNS = document.lookupNamespaceURI('svg');
\nconsole.log('SVG \u547d\u540d\u7a7a\u95f4：', svgNS); \/\/ 'http:\/\/www.w3.org\/2000\/svg'<\/p>\n
let xlinkNS = document.lookupNamespaceURI('xlink');
\nconsole.log('XLink \u547d\u540d\u7a7a\u95f4：', xlinkNS); \/\/ 'http:\/\/www.w3.org\/1999\/xlink'<\/p>\n
\/\/ \u5728 XML \u6587\u6863\u4e2d\u4f7f\u7528
\nfunction getNamespaceInfo() {
\n return {
\n default: document.lookupNamespaceURI(null),
\n html: document.lookupNamespaceURI('html'),
\n svg: document.lookupNamespaceURI('svg'),
\n math: document.lookupNamespaceURI('math')
\n };
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u8fd4\u56de\u7ed9\u5b9a\u547d\u540d\u7a7a\u95f4 URI \u5bf9\u5e94\u7684\u524d\u7f00\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Lookup（\u67e5\u627e）+ Prefix（\u524d\u7f00）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：let prefix = document.lookupPrefix(namespaceURI);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
namespaceURI：\u8981\u67e5\u627e\u7684\u547d\u540d\u7a7a\u95f4 URI \u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u8fd4\u56de\u503c：\u5bf9\u5e94\u7684\u524d\u7f00\u5b57\u7b26\u4e32，\u5982\u679c\u6ca1\u6709\u5219\u8fd4\u56de\u00a0null\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u67e5\u627e HTML \u547d\u540d\u7a7a\u95f4\u7684\u524d\u7f00
\nlet htmlPrefix = document.lookupPrefix('http:\/\/www.w3.org\/1999\/xhtml');
\nconsole.log('HTML \u524d\u7f00：', htmlPrefix); \/\/ null（HTML \u662f\u9ed8\u8ba4\u547d\u540d\u7a7a\u95f4，\u65e0\u524d\u7f00）<\/p>\n
\/\/ \u67e5\u627e SVG \u547d\u540d\u7a7a\u95f4\u7684\u524d\u7f00
\nlet svgPrefix = document.lookupPrefix('http:\/\/www.w3.org\/2000\/svg');
\nconsole.log('SVG \u524d\u7f00：', svgPrefix); \/\/ 'svg'（\u5982\u679c\u6709\u5b9a\u4e49）<\/p>\n
\/\/ \u67e5\u627e XLink \u547d\u540d\u7a7a\u95f4\u7684\u524d\u7f00
\nlet xlinkPrefix = document.lookupPrefix('http:\/\/www.w3.org\/1999\/xlink');
\nconsole.log('XLink \u524d\u7f00：', xlinkPrefix); \/\/ 'xlink'<\/p>\n
\/\/ \u5b9e\u7528\u573a\u666f：\u6839\u636e URI \u83b7\u53d6\u524d\u7f00
\nfunction getPrefixForURI(uri) {
\n let prefix = document.lookupPrefix(uri);
\n return prefix || '(\u9ed8\u8ba4\u547d\u540d\u7a7a\u95f4)';
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u6253\u5f00\u4e00\u4e2a\u6587\u6863\u6d41，\u51c6\u5907\u5199\u5165\u5185\u5bb9\u3002\u4f1a\u6e05\u7a7a\u5f53\u524d\u6587\u6863\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Open（\u6253\u5f00）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.open();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
\u53ef\u4ee5\u63a5\u53d7\u53ef\u9009\u7684 MIME \u7c7b\u578b\u548c\u66ff\u6362\u53c2\u6570，\u4f46\u901a\u5e38\u4e0d\u4f20\u53c2\u3002<\/p>\n<\/li>\n
\u8c03\u7528\u540e\u4f1a\u6e05\u7a7a\u5f53\u524d\u6587\u6863\u7684\u6240\u6709\u5185\u5bb9\u3002<\/p>\n<\/li>\n
\u5371\u9669\u64cd\u4f5c：\u4f1a\u6e05\u9664\u5f53\u524d\u9875\u9762\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u57fa\u672c\u7528\u6cd5（\u6781\u5ea6\u5371\u9669！）
\n\/\/ document.open();
\n\/\/ document.write('<h1>\u65b0\u9875\u9762<\/h1>');
\n\/\/ document.close();<\/p>\n
\/\/ \u5728\u65b0\u7a97\u53e3\u4e2d\u4f7f\u7528
\nfunction openInNewWindow() {
\n let newWindow = window.open();
\n newWindow.document.open();
\n newWindow.document.write(`
\n <!DOCTYPE html>
\n <html>
\n <head><title>\u65b0\u7a97\u53e3<\/title><\/head>
\n <body>
\n <h1>\u52a8\u6001\u751f\u6210\u7684\u5185\u5bb9<\/h1>
\n <p>\u5f53\u524d\u65f6\u95f4：${new Date()}<\/p>
\n <\/body>
\n <\/html>
\n `);
\n newWindow.document.close();
\n}<\/p>\n
\/\/ \u5b89\u5168\u7528\u6cd5：\u4ec5\u5728\u9700\u8981\u5b8c\u5168\u91cd\u5199\u6587\u6863\u65f6\u4f7f\u7528
\nfunction resetDocument() {
\n if (confirm('\u786e\u5b9a\u8981\u6e05\u7a7a\u9875\u9762\u5417？')) {
\n document.open();
\n document.write('<h1>\u9875\u9762\u5df2\u91cd\u7f6e<\/h1>');
\n document.close();
\n }
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u5173\u95ed\u7531\u00a0open()\u00a0\u6253\u5f00\u7684\u6587\u6863\u6d41，\u5e76\u5b8c\u6210\u6587\u6863\u5199\u5165\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Close（\u5173\u95ed）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.close();<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：\u65e0\u53c2\u6570\u3002\u5fc5\u987b\u5728\u00a0write()\u00a0\u64cd\u4f5c\u5b8c\u6210\u540e\u8c03\u7528\u3002<\/p>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u914d\u5408 open \u548c write \u4f7f\u7528
\nfunction generatePDFView() {
\n document.open();
\n document.write('<h1>PDF \u67e5\u770b\u5668<\/h1>');
\n document.write('<embed src="doc.pdf" type="application\/pdf" width="100%" height="600px">');
\n document.close(); \/\/ \u5b8c\u6210\u5199\u5165
\n}<\/p>\n
\/\/ \u9519\u8bef\u793a\u8303：\u5fd8\u8bb0 close \u53ef\u80fd\u5bfc\u81f4\u5185\u5bb9\u4e0d\u663e\u793a
\nfunction badExample() {
\n document.open();
\n document.write('\u8fd9\u6bb5\u6587\u5b57\u53ef\u80fd\u4e0d\u4f1a\u663e\u793a');
\n \/\/ \u5fd8\u8bb0 document.close()
\n}\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u5411\u6587\u6863\u4e2d\u5199\u5165 HTML \u6216 JavaScript \u4ee3\u7801\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Write（\u5199\u5165）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.write(markup);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
markup：\u8981\u5199\u5165\u7684 HTML \u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u91cd\u8981\u8b66\u544a：<\/p>\n
\u5982\u679c\u5728\u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u8c03\u7528，\u4f1a\u8986\u76d6\u6574\u4e2a\u6587\u6863\u3002<\/p>\n<\/li>\n
\u5728 XHTML \u6587\u6863\u4e2d\u65e0\u6548\u3002<\/p>\n<\/li>\n
\u73b0\u4ee3\u5f00\u53d1\u4e2d\u6781\u5c11\u4f7f\u7528，\u63a8\u8350\u4f7f\u7528 DOM \u64cd\u4f5c\u65b9\u6cd5\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5728\u6587\u6863\u52a0\u8f7d\u671f\u95f4\u4f7f\u7528（\u4f20\u7edf\u7528\u6cd5）
\n\/\/ <script>
\n\/\/ document.write('<p>\u5f53\u524d\u65f6\u95f4：' + new Date() + '<\/p>');
\n\/\/ <\/script><\/p>\n
\/\/ \u5371\u9669\u7528\u6cd5：\u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u8c03\u7528\u4f1a\u8986\u76d6\u9875\u9762
\ndocument.getElementById('btn').addEventListener('click', function() {
\n \/\/ document.write('\u65b0\u5185\u5bb9'); \/\/ \u8fd9\u6837\u4f1a\u6e05\u7a7a\u6574\u4e2a\u9875\u9762！
\n});<\/p>\n
\/\/ \u7528\u4e8e\u52a0\u8f7d\u5907\u7528\u8d44\u6e90
\nif (!document.querySelector('script[src="jquery.js"]')) {
\n document.write('<script src="jquery.js"><\\\\\/script>');
\n}<\/p>\n
\/\/ \u73b0\u4ee3\u66ff\u4ee3\u65b9\u6848
\n\/\/ \u4f7f\u7528 innerHTML \u6216 DOM \u65b9\u6cd5
\nlet p = document.createElement('p');
\np.textContent = '\u5f53\u524d\u65f6\u95f4：' + new Date();
\ndocument.body.appendChild(p);\n<\/li>\n<\/ul>\n
\u542b\u4e49：\u548c\u00a0write()\u00a0\u7c7b\u4f3c，\u4f46\u5728\u672b\u5c3e\u6dfb\u52a0\u4e00\u4e2a\u6362\u884c\u7b26\u3002<\/p>\n<\/li>\n
\u8bcd\u6e90：Write（\u5199\u5165）+ Line（\u884c）\u3002<\/p>\n<\/li>\n
\u8bed\u6cd5：document.writeln(markup);<\/p>\n<\/li>\n
\u53c2\u6570\u53ca\u8bf4\u660e：<\/p>\n
markup：\u8981\u5199\u5165\u7684 HTML \u5b57\u7b26\u4e32\u3002<\/p>\n<\/li>\n
\u5728 HTML \u4e2d\u6362\u884c\u7b26\u901a\u5e38\u4e0d\u53ef\u89c1，\u4f46\u5728\u00a0<pre>\u00a0\u6807\u7b7e\u5185\u6216\u6587\u672c\u8282\u70b9\u4e2d\u6709\u6548\u3002<\/p>\n<\/li>\n<\/ul>\n<\/li>\n
\u4f8b\u5b50：<\/p>\n
\/\/ \u5728 <pre> \u6807\u7b7e\u4e2d\u4f7f\u7528\u6709\u6548
\ndocument.write('<pre>');
\ndocument.writeln('\u7b2c\u4e00\u884c\u6587\u672c');
\ndocument.writeln('\u7b2c\u4e8c\u884c\u6587\u672c');
\ndocument.writeln('\u7b2c\u4e09\u884c\u6587\u672c');
\ndocument.write('<\/pre>');<\/p>\n
\/\/ \u67e5\u770b\u6e90\u7801\u65f6\u4f1a\u770b\u5230\u6362\u884c
\n\/\/ \u7b2c\u4e00\u884c\u6587\u672c\\\\n
\n\/\/ \u7b2c\u4e8c\u884c\u6587\u672c\\\\n
\n\/\/ \u7b2c\u4e09\u884c\u6587\u672c<\/p>\n
\/\/ \u751f\u6210\u6587\u672c\u6587\u4ef6\u5185\u5bb9
\nfunction generateTextFile() {
\n let content = '';
\n document.write('<pre>');
\n document.writeln('\u59d3\u540d,\u5e74\u9f84,\u57ce\u5e02');
\n document.writeln('\u5f20\u4e09,25,\u5317\u4eac');
\n document.writeln('\u674e\u56db,30,\u4e0a\u6d77');
\n document.write('<\/pre>');
\n}\n<\/li>\n<\/ul>\n