From 421a958d02fdd24e5b8f5eee74e06ad91446e20d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=86=E5=88=A9=E7=BE=A4?= <2246026162@qq.com> Date: Mon, 21 Nov 2022 11:23:48 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2022_11_18DOM.html" | 34 ++++++++++++ .../2022-11-18DOM\350\212\202\347\202\271.md" | 52 +++++++++++++++++++ 2 files changed, 86 insertions(+) create mode 100644 "32\351\231\206\345\210\251\347\276\244/\344\275\234\344\270\232/2022_11_18DOM.html" create mode 100644 "32\351\231\206\345\210\251\347\276\244/\347\254\224\350\256\260/2022-11-18DOM\350\212\202\347\202\271.md" diff --git "a/32\351\231\206\345\210\251\347\276\244/\344\275\234\344\270\232/2022_11_18DOM.html" "b/32\351\231\206\345\210\251\347\276\244/\344\275\234\344\270\232/2022_11_18DOM.html" new file mode 100644 index 0000000..4a065eb --- /dev/null +++ "b/32\351\231\206\345\210\251\347\276\244/\344\275\234\344\270\232/2022_11_18DOM.html" @@ -0,0 +1,34 @@ + + + + + + + Document + + + + +

封校三天 快乐无边

+ + + + \ No newline at end of file diff --git "a/32\351\231\206\345\210\251\347\276\244/\347\254\224\350\256\260/2022-11-18DOM\350\212\202\347\202\271.md" "b/32\351\231\206\345\210\251\347\276\244/\347\254\224\350\256\260/2022-11-18DOM\350\212\202\347\202\271.md" new file mode 100644 index 0000000..1a44e40 --- /dev/null +++ "b/32\351\231\206\345\210\251\347\276\244/\347\254\224\350\256\260/2022-11-18DOM\350\212\202\347\202\271.md" @@ -0,0 +1,52 @@ +### DOM + +查看元素节点 + +``` +//查看子节点 +document.body.childNodes +//查看子节点数量 +document.body.childElementCount; +//查看所有节点的第一个节点 +document.body.firstChild; +//查看父节点 +document.body.children[0].parentElement; +//上一个元素节点,兄弟节点 +document.body.children[1].previousElementSibling; +//下一个元素节点 +document.body.children[1].nextElementSibling; +``` + +``` +//DOM 0 + //根据class获取元素，返回一个HTMLCollection数组 + document.getElementsByClassName('className') + //根据name属性获取元素对象 + document.getElementsByName('propName') + //根据标签名字获取元素对象 + document.getElementsByTagName('tagname') + //根据id属性获取元素对象 + document.getElementById('id') +//DOM 2 + //获取任何类型的参数 + document.querySelector('.H2') //找class==H2的元素对象，返回第一个 + document.querySelectorAll('#H2') //找id==H2的元素对象，返回全部 +``` + +增删改查 + +``` +var dd = document.querySelector('#dd'); //获取id为dd的元素 + +var newH1 = div.createElement('H1'); //创建一个H1的元素节点 +newH1.innerText = '哇哦'; //在H1里面加上文字 +dd.append(newH1); //将节点添加在网页中 +console.log(newH1); //网页就能显示哇哦 +//删 +dd.remove(newH1); //删除节点 +console.log(newH1); //此时哇哦消失 +//改(替换) +parentNode.replaceChild(newChild, oldChild); +//插入 +node.insertBefore(newH3,h2); //在h2之前插入newH3 +``` \ No newline at end of file -- Gitee