From f27536884ec6a3102f5e276261b3b83d47613afb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=AF=8C=E8=B4=B5?= <2380003452@qq.com> Date: Mon, 21 Nov 2022 03:36:25 +0000 Subject: [PATCH] =?UTF-8?q?=E9=BB=84=E5=AF=8C=E8=B4=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 黄富贵 <2380003452@qq.com> --- ...02\347\202\271\347\254\224\350\256\260.md" | 100 ++++++++++++++++++ ...\347\202\271\344\275\234\344\270\232.html" | 37 +++++++ 2 files changed, 137 insertions(+) create mode 100644 "36\351\273\204\345\257\214\350\264\265/11-18-DOM\344\275\234\344\270\232/11-08-DOM\350\212\202\347\202\271\347\254\224\350\256\260.md" create mode 100644 "36\351\273\204\345\257\214\350\264\265/11-18-DOM\344\275\234\344\270\232/11-18-DOM\350\212\202\347\202\271\344\275\234\344\270\232.html" diff --git "a/36\351\273\204\345\257\214\350\264\265/11-18-DOM\344\275\234\344\270\232/11-08-DOM\350\212\202\347\202\271\347\254\224\350\256\260.md" "b/36\351\273\204\345\257\214\350\264\265/11-18-DOM\344\275\234\344\270\232/11-08-DOM\350\212\202\347\202\271\347\254\224\350\256\260.md" new file mode 100644 index 0000000..4dab8ff --- /dev/null +++ "b/36\351\273\204\345\257\214\350\264\265/11-18-DOM\344\275\234\344\270\232/11-08-DOM\350\212\202\347\202\271\347\254\224\350\256\260.md" @@ -0,0 +1,100 @@ +第十九课DOM笔记 + +节点(node)类型分为3种: + +节点类型1:元素节点 + +节点类型2:文本节点 + +节点类型3:属性节点 + +元素(elements) + +查看body中有几个元素节点: + +``` +console.log(document.body.childElementCount); +console.log(document.body.children); +``` + +查看子节点: + +``` +console.log(document.body.firstChild);//所有节点中的第一个节点 +console.log(document.body.firstElementChild);//找第一个元素节点 +``` + +查看节点方法: + +``` +//查看父节点: +console.log(document.body.children[0].parentElement); +//查看上一个节点: +console.log(document.body.children[1].previousElementSibling); +//查看下一个节点: +console.log(document.body.children[1].nextElementSibling); +``` + +DOM节点方法: + +``` +//1.根据class获取元素: 返回: HTMLCollection (数组) +console.log(document.getElementsByClassName('H2')); + +//2.根据name属性获取元素对象: NodeList(伪数组)：只能获取下标和长度 +console.log(document.getElementsByName('username')); + +//3.根据标签名获取元素对象:返回 HTMLCollection +console.log(document.getElementsByTagName('input')); + +//4.根据id属性获取元素对象，返回当前元素对象 +console.log(document.getElementById('thirdH2')); +``` + +找元素对象: + +``` +//找class=H2的元素对象，如果不止一个，返回第一个元素对象 + //根据class : ('.className') + //根据Id ： ('#id') + //根据标签名: ('div') + console.log(document.querySelector('div')); + //找全部 + console.log(document.querySelectorAll('.H2')); +``` + +节点的增删改查: + +//首先要创建元素节点 + +``` + var newH2 = document.createElement('h2'); + var txt = document.createTextNode('我是新添加的H2'); + newH2.appendChild(txt); +``` + +//添加子元素节点 + +``` +div.appendChild(newH2); +``` + +//删除子节点 + +``` + var h2 = document.getElementById('h2'); + div.removeChild(h2); +``` + +//改子节点:replaceChild + +``` +div.replaceChild(newH3,h2); +``` + +//在...之前插入一个节点 + +``` +div.insertBefore(newH3,h2); +``` + diff --git "a/36\351\273\204\345\257\214\350\264\265/11-18-DOM\344\275\234\344\270\232/11-18-DOM\350\212\202\347\202\271\344\275\234\344\270\232.html" "b/36\351\273\204\345\257\214\350\264\265/11-18-DOM\344\275\234\344\270\232/11-18-DOM\350\212\202\347\202\271\344\275\234\344\270\232.html" new file mode 100644 index 0000000..6e739e9 --- /dev/null +++ "b/36\351\273\204\345\257\214\350\264\265/11-18-DOM\344\275\234\344\270\232/11-18-DOM\350\212\202\347\202\271\344\275\234\344\270\232.html" @@ -0,0 +1,37 @@ + + + + + + + Document + + + + +
+

封校三天 快乐无边

+
+ + + + + + \ No newline at end of file -- Gitee