[{"data":1,"prerenderedAt":217},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript_dom_inheritance_tree_dom_basic_operations":3},{"id":4,"title":5,"body":6,"category":205,"cover":206,"csdn":206,"date":207,"description":5,"draft":208,"extension":209,"meta":210,"navigation":39,"path":211,"seo":212,"stem":213,"tags":214,"updated":206,"__hash__":216},"blog\u002Fblog\u002Fjavascript_dom_inheritance_tree_dom_basic_operations.md","JavaScript dom 继承树 dom 基本操作",{"type":7,"value":8,"toc":202},"minimark",[9,14,22,198],[10,11,13],"h2",{"id":12},"dom结构树","DOM结构树",[15,16,17],"p",{},[18,19],"img",{"alt":20,"src":21},"在这里插入图片描述","https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F0e53643d278bb40f395ae9c6f2f3cb1c.png",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-js shiki shiki-themes github-dark","\n\u002F\u002F 增\n- document.createElement();      \u002F\u002F 元素节点\n- document.createTextNode();     \u002F\u002F 文本节点\n- document.createComment();\n- document.createDocumentFragment();\n\n\u002F\u002F 插\n- PARENTNODE.appendChild();             \u002F\u002F 剪贴\n- PARENTNODE.insertBefore(a, 参考位置b); \u002F\u002F 在 b 前插入a\n\n\u002F\u002F 删\n- 谋杀 parent.removeChild();            \u002F\u002F 可以拿变量接收下来\n- 自杀 child.remove();\n\n\u002F\u002F 替换（上镜率不高）\n- parent.replaceChild(new, origin);\n\n\u002F\u002F  Element节点的属性\n- innerHTML \u002F\u002F 可取值 会覆盖； += 追加\n- innerText \u002F textContent\n\n\u002F\u002F Element节点的方法\n- ele.setAttribute();\n      div.setAttribute('class', 'demo');\n- ele.getAttribute();\n      div.getAttribute('class');\n      > \"demo\"\n","js","",[30,31,32,41,47,53,59,65,71,76,82,88,94,99,105,111,117,122,128,134,139,145,151,157,162,168,174,180,186,192],"code",{"__ignoreMap":28},[33,34,37],"span",{"class":35,"line":36},"line",1,[33,38,40],{"emptyLinePlaceholder":39},true,"\n",[33,42,44],{"class":35,"line":43},2,[33,45,46],{},"\u002F\u002F 增\n",[33,48,50],{"class":35,"line":49},3,[33,51,52],{},"- document.createElement();      \u002F\u002F 元素节点\n",[33,54,56],{"class":35,"line":55},4,[33,57,58],{},"- document.createTextNode();     \u002F\u002F 文本节点\n",[33,60,62],{"class":35,"line":61},5,[33,63,64],{},"- document.createComment();\n",[33,66,68],{"class":35,"line":67},6,[33,69,70],{},"- document.createDocumentFragment();\n",[33,72,74],{"class":35,"line":73},7,[33,75,40],{"emptyLinePlaceholder":39},[33,77,79],{"class":35,"line":78},8,[33,80,81],{},"\u002F\u002F 插\n",[33,83,85],{"class":35,"line":84},9,[33,86,87],{},"- PARENTNODE.appendChild();             \u002F\u002F 剪贴\n",[33,89,91],{"class":35,"line":90},10,[33,92,93],{},"- PARENTNODE.insertBefore(a, 参考位置b); \u002F\u002F 在 b 前插入a\n",[33,95,97],{"class":35,"line":96},11,[33,98,40],{"emptyLinePlaceholder":39},[33,100,102],{"class":35,"line":101},12,[33,103,104],{},"\u002F\u002F 删\n",[33,106,108],{"class":35,"line":107},13,[33,109,110],{},"- 谋杀 parent.removeChild();            \u002F\u002F 可以拿变量接收下来\n",[33,112,114],{"class":35,"line":113},14,[33,115,116],{},"- 自杀 child.remove();\n",[33,118,120],{"class":35,"line":119},15,[33,121,40],{"emptyLinePlaceholder":39},[33,123,125],{"class":35,"line":124},16,[33,126,127],{},"\u002F\u002F 替换（上镜率不高）\n",[33,129,131],{"class":35,"line":130},17,[33,132,133],{},"- parent.replaceChild(new, origin);\n",[33,135,137],{"class":35,"line":136},18,[33,138,40],{"emptyLinePlaceholder":39},[33,140,142],{"class":35,"line":141},19,[33,143,144],{},"\u002F\u002F  Element节点的属性\n",[33,146,148],{"class":35,"line":147},20,[33,149,150],{},"- innerHTML \u002F\u002F 可取值 会覆盖； += 追加\n",[33,152,154],{"class":35,"line":153},21,[33,155,156],{},"- innerText \u002F textContent\n",[33,158,160],{"class":35,"line":159},22,[33,161,40],{"emptyLinePlaceholder":39},[33,163,165],{"class":35,"line":164},23,[33,166,167],{},"\u002F\u002F Element节点的方法\n",[33,169,171],{"class":35,"line":170},24,[33,172,173],{},"- ele.setAttribute();\n",[33,175,177],{"class":35,"line":176},25,[33,178,179],{},"      div.setAttribute('class', 'demo');\n",[33,181,183],{"class":35,"line":182},26,[33,184,185],{},"- ele.getAttribute();\n",[33,187,189],{"class":35,"line":188},27,[33,190,191],{},"      div.getAttribute('class');\n",[33,193,195],{"class":35,"line":194},28,[33,196,197],{},"      > \"demo\"\n",[199,200,201],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":28,"searchDepth":43,"depth":43,"links":203},[204],{"id":12,"depth":43,"text":13},"前端",null,"2020-04-05",false,"md",{},"\u002Fblog\u002Fjavascript_dom_inheritance_tree_dom_basic_operations",{"title":5,"description":5},"blog\u002Fjavascript_dom_inheritance_tree_dom_basic_operations",[215],"JavaScript","2zxtF9Zps598wFS-XPhva9x1GPM1jARm9lHNs2_Aif4",1780076048568]