diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-18-DOM\350\212\202\347\202\271\345\222\214\345\242\236\345\210\240\346\224\271\346\237\245/.keep" "b/47\346\233\276\345\276\267\346\243\256/2022-11-18-DOM\350\212\202\347\202\271\345\222\214\345\242\236\345\210\240\346\224\271\346\237\245/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/47\346\233\276\345\276\267\346\243\256/2022-11-18-DOM\350\212\202\347\202\271\345\222\214\345\242\236\345\210\240\346\224\271\346\237\245/\347\254\224\350\256\260.md" "b/47\346\233\276\345\276\267\346\243\256/2022-11-18-DOM\350\212\202\347\202\271\345\222\214\345\242\236\345\210\240\346\224\271\346\237\245/\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..d5d707e58ace88fb0fcd1f2587cd35ec147be13c --- /dev/null +++ "b/47\346\233\276\345\276\267\346\243\256/2022-11-18-DOM\350\212\202\347\202\271\345\222\214\345\242\236\345\210\240\346\224\271\346\237\245/\347\254\224\350\256\260.md" @@ -0,0 +1,111 @@ +### DOM节点方法和增删改查 + +##### //节点类型(node) + +`console.log(document.body.childNodes);` + +节点类型:1:元素节点 2:文本节点 3:属性节点 + + + +##### //元素(elements) + +//查看body中有多少元素节点 + +`console.log(document.body.chilElemmentcount);` + +`console.log(document.body.children);` + +//查看子节点 + +`console.log(document.body.firstchild);` //所有节点中的第一个节点 + +`console.log(document.body.firstElementchilcd)`; //找到第一个元素节点 + +//查看父节点 + +`console.log(document.body.children[0].parentElement);` + +//根据class获取元素 返回:`HTMLcouection`(数组) + +`console.log(document.getElementsByclassName('H2'));` + +//根据name属性获取元素对象:`NodeList`(伪数组):只能获取下标和长度 + +`console.log(document.getElementsByTageName('username'));` +//根据标签名获取元素对象:返回`GTMLcollection` + +`console.log(document.getElementsByTagName('input'));` + +//根据id属性获取元素对象,返回当前元素对象 + +`console.log(document.getElementByid('thirdH2'));` + + + +##### DOM2 + +//找class=H2的元素对象,如果不止一个,返回第一个元素对象 + +//根据class:('className') + +//根据id:('#id') + +//根据标签名:('div') + +`console.log(dpcument.queryselector('div'));` + +//找全部 + +`console.log(document.queryselectprAll('.H2'));` + +`var div=document.queryselector('#box');` + +//创建元素节点 + +`var newH2=document.crateElement('h2');` + +`var txt=document.createtextNode('我是新添加的'H2');` + +`newH2.appendchild(txt);` + +//添加子元素节点 + +`div.appendchild(newH2);` + +//删除子节点:removechild(元素对象:h2) + +`var h2=document.getelementByid('h2');` + +`div.removechild(h2));` + +//改 + +`var newH3=document.createElement('h3');` + +`var txt=document.createTextNode('替换的h3');` + +`var h2=document.getElementById('h2');` + +`newH3.appendchild(txt);` + +//改:replacech + +`div.replacechid(nawH3,h2);` + +//在...之前插入一个节点 + +`div.insertBefore(newH3.h2);` + +//查看父节点 + +`console.log(document.bady.children[0].parentElement);` + +//上一个元素节点 + +`console.log(document.body.children[1].previousElementsibling);` + +//下一个元素节点 + +`console.log(document.body.children[1].nextElementsibling);` +