[{"data":1,"prerenderedAt":370},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript_dom_inheritance_tree_dom_basic_operations":3},{"id":4,"title":5,"body":6,"category":356,"cover":357,"csdn":357,"date":358,"description":5,"draft":359,"extension":360,"meta":361,"navigation":39,"path":362,"seo":363,"stem":364,"tags":365,"updated":357,"__hash__":369},"blog\u002Fblog\u002Fjavascript_dom_inheritance_tree_dom_basic_operations.md","JavaScript dom 继承树 dom 基本操作",{"type":7,"value":8,"toc":353},"minimark",[9,14,22,349],[10,11,13],"h2",{"id":12},"dom结构树","DOM结构树",[15,16,17],"p",{},[18,19],"img",{"alt":20,"src":21},"在这里插入图片描述","https:\u002F\u002Fimg.moooodapp.com\u002Fweb_hongweizhu_com_blog\u002F0e53643d278bb40f395ae9c6f2f3cb1c.png",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-js shiki shiki-themes github-light","\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,48,69,85,98,110,115,121,142,160,165,171,188,201,206,212,232,237,243,254,268,273,279,292,315,327,340],"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,47],{"class":46},"sAwPA","\u002F\u002F 增\n",[33,49,51,55,59,63,66],{"class":35,"line":50},3,[33,52,54],{"class":53},"sD7c4","-",[33,56,58],{"class":57},"sgsFI"," document.",[33,60,62],{"class":61},"s7eDp","createElement",[33,64,65],{"class":57},"();      ",[33,67,68],{"class":46},"\u002F\u002F 元素节点\n",[33,70,72,74,76,79,82],{"class":35,"line":71},4,[33,73,54],{"class":53},[33,75,58],{"class":57},[33,77,78],{"class":61},"createTextNode",[33,80,81],{"class":57},"();     ",[33,83,84],{"class":46},"\u002F\u002F 文本节点\n",[33,86,88,90,92,95],{"class":35,"line":87},5,[33,89,54],{"class":53},[33,91,58],{"class":57},[33,93,94],{"class":61},"createComment",[33,96,97],{"class":57},"();\n",[33,99,101,103,105,108],{"class":35,"line":100},6,[33,102,54],{"class":53},[33,104,58],{"class":57},[33,106,107],{"class":61},"createDocumentFragment",[33,109,97],{"class":57},[33,111,113],{"class":35,"line":112},7,[33,114,40],{"emptyLinePlaceholder":39},[33,116,118],{"class":35,"line":117},8,[33,119,120],{"class":46},"\u002F\u002F 插\n",[33,122,124,126,130,133,136,139],{"class":35,"line":123},9,[33,125,54],{"class":53},[33,127,129],{"class":128},"sYu0t"," PARENTNODE",[33,131,132],{"class":57},".",[33,134,135],{"class":61},"appendChild",[33,137,138],{"class":57},"();             ",[33,140,141],{"class":46},"\u002F\u002F 剪贴\n",[33,143,145,147,149,151,154,157],{"class":35,"line":144},10,[33,146,54],{"class":53},[33,148,129],{"class":128},[33,150,132],{"class":57},[33,152,153],{"class":61},"insertBefore",[33,155,156],{"class":57},"(a, 参考位置b); ",[33,158,159],{"class":46},"\u002F\u002F 在 b 前插入a\n",[33,161,163],{"class":35,"line":162},11,[33,164,40],{"emptyLinePlaceholder":39},[33,166,168],{"class":35,"line":167},12,[33,169,170],{"class":46},"\u002F\u002F 删\n",[33,172,174,176,179,182,185],{"class":35,"line":173},13,[33,175,54],{"class":53},[33,177,178],{"class":57}," 谋杀 parent.",[33,180,181],{"class":61},"removeChild",[33,183,184],{"class":57},"();            ",[33,186,187],{"class":46},"\u002F\u002F 可以拿变量接收下来\n",[33,189,191,193,196,199],{"class":35,"line":190},14,[33,192,54],{"class":53},[33,194,195],{"class":57}," 自杀 child.",[33,197,198],{"class":61},"remove",[33,200,97],{"class":57},[33,202,204],{"class":35,"line":203},15,[33,205,40],{"emptyLinePlaceholder":39},[33,207,209],{"class":35,"line":208},16,[33,210,211],{"class":46},"\u002F\u002F 替换（上镜率不高）\n",[33,213,215,217,220,223,226,229],{"class":35,"line":214},17,[33,216,54],{"class":53},[33,218,219],{"class":57}," parent.",[33,221,222],{"class":61},"replaceChild",[33,224,225],{"class":57},"(",[33,227,228],{"class":53},"new",[33,230,231],{"class":57},", origin);\n",[33,233,235],{"class":35,"line":234},18,[33,236,40],{"emptyLinePlaceholder":39},[33,238,240],{"class":35,"line":239},19,[33,241,242],{"class":46},"\u002F\u002F  Element节点的属性\n",[33,244,246,248,251],{"class":35,"line":245},20,[33,247,54],{"class":53},[33,249,250],{"class":57}," innerHTML ",[33,252,253],{"class":46},"\u002F\u002F 可取值 会覆盖； += 追加\n",[33,255,257,259,262,265],{"class":35,"line":256},21,[33,258,54],{"class":53},[33,260,261],{"class":57}," innerText ",[33,263,264],{"class":53},"\u002F",[33,266,267],{"class":57}," textContent\n",[33,269,271],{"class":35,"line":270},22,[33,272,40],{"emptyLinePlaceholder":39},[33,274,276],{"class":35,"line":275},23,[33,277,278],{"class":46},"\u002F\u002F Element节点的方法\n",[33,280,282,284,287,290],{"class":35,"line":281},24,[33,283,54],{"class":53},[33,285,286],{"class":57}," ele.",[33,288,289],{"class":61},"setAttribute",[33,291,97],{"class":57},[33,293,295,298,300,302,306,309,312],{"class":35,"line":294},25,[33,296,297],{"class":57},"      div.",[33,299,289],{"class":61},[33,301,225],{"class":57},[33,303,305],{"class":304},"sYBdl","'class'",[33,307,308],{"class":57},", ",[33,310,311],{"class":304},"'demo'",[33,313,314],{"class":57},");\n",[33,316,318,320,322,325],{"class":35,"line":317},26,[33,319,54],{"class":53},[33,321,286],{"class":57},[33,323,324],{"class":61},"getAttribute",[33,326,97],{"class":57},[33,328,330,332,334,336,338],{"class":35,"line":329},27,[33,331,297],{"class":57},[33,333,324],{"class":61},[33,335,225],{"class":57},[33,337,305],{"class":304},[33,339,314],{"class":57},[33,341,343,346],{"class":35,"line":342},28,[33,344,345],{"class":53},"      >",[33,347,348],{"class":304}," \"demo\"\n",[350,351,352],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sD7c4, html code.shiki .sD7c4{--shiki-default:#D73A49}html pre.shiki code .sgsFI, html code.shiki .sgsFI{--shiki-default:#24292E}html pre.shiki code .s7eDp, html code.shiki .s7eDp{--shiki-default:#6F42C1}html pre.shiki code .sYu0t, html code.shiki .sYu0t{--shiki-default:#005CC5}html pre.shiki code .sYBdl, html code.shiki .sYBdl{--shiki-default:#032F62}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":354},[355],{"id":12,"depth":43,"text":13},"JavaScript",null,"2020-01-09",false,"md",{},"\u002Fblog\u002Fjavascript_dom_inheritance_tree_dom_basic_operations",{"title":5,"description":5},"blog\u002Fjavascript_dom_inheritance_tree_dom_basic_operations",[356,366,367,368],"DOM","节点操作","继承树","FqsLQaNaJbHJu2uCQZvJnS5e5VZvUJ360F2z5OXJv_0",1793010849228]