From dc9fb8bae52efcfa8f770731cac34e6e62b66142 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAgares1024=E2=80=9D?= <2025575070@qq.com> Date: Sat, 19 Nov 2022 00:03:23 +0800 Subject: [PATCH] 11-18 --- .../11-18-DOM-\347\254\224\350\256\260.md" | 69 +++++++++++++++++++ ...22_11_18_DOM\347\273\203\344\271\240.html" | 36 ++++++++++ ...\351\227\255\346\226\207\345\255\227.html" | 34 +++++++++ 3 files changed, 139 insertions(+) create mode 100644 "24\345\274\240\346\267\221\350\212\263/11-18-DOM/11-18-DOM-\347\254\224\350\256\260.md" create mode 100644 "24\345\274\240\346\267\221\350\212\263/11-18-DOM/2022_11_18_DOM\347\273\203\344\271\240.html" create mode 100644 "24\345\274\240\346\267\221\350\212\263/11-18-DOM/\346\230\276\347\244\272\345\205\263\351\227\255\346\226\207\345\255\227.html" diff --git "a/24\345\274\240\346\267\221\350\212\263/11-18-DOM/11-18-DOM-\347\254\224\350\256\260.md" "b/24\345\274\240\346\267\221\350\212\263/11-18-DOM/11-18-DOM-\347\254\224\350\256\260.md" new file mode 100644 index 0000000..82089c7 --- /dev/null +++ "b/24\345\274\240\346\267\221\350\212\263/11-18-DOM/11-18-DOM-\347\254\224\350\256\260.md" @@ -0,0 +1,69 @@ +## DOM 文档对象模型 + +Dom就是由多层节点组成的文档,能够将HTML文档进行模型化，将一个文档转换为一个类似树状结构，以便于配合JS语言进行模型中（如HTML网页）元素的添加或移除等操作 + +![](https://gitee.com/Agares1024/img/raw/master/img/1668774662918-2022-11-1820:31:02.png) + +HTML 中的每段标记都可以表示为这个树形结构中的一个节点。元素节点表示 HTML 元素，属性 节点表示属性，文档类型节点表示文档类型，注释节点表示注释 + + + +**查看元素节点** + +```js +//查看子节点 +document.body.childNodes +//查看子节点数量 +document.body.childElementCount; +//查看所有节点的第一个节点 +document.body.firstChild; +// + +//查看父节点 +document.body.children[0].parentElement; +//上一个元素节点,兄弟节点 +document.body.children[1].previousElementSibling; +//下一个元素节点 +document.body.children[1].nextElementSibling; +``` + + + +```js +//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的元素对象，返回全部 +``` + + + +**节点的增删改查** + +```js +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 +``` + + + diff --git "a/24\345\274\240\346\267\221\350\212\263/11-18-DOM/2022_11_18_DOM\347\273\203\344\271\240.html" "b/24\345\274\240\346\267\221\350\212\263/11-18-DOM/2022_11_18_DOM\347\273\203\344\271\240.html" new file mode 100644 index 0000000..8b1145a --- /dev/null +++ "b/24\345\274\240\346\267\221\350\212\263/11-18-DOM/2022_11_18_DOM\347\273\203\344\271\240.html" @@ -0,0 +1,36 @@ + + + + + + + Document + + + +   + +
+ +
+ + + \ No newline at end of file diff --git "a/24\345\274\240\346\267\221\350\212\263/11-18-DOM/\346\230\276\347\244\272\345\205\263\351\227\255\346\226\207\345\255\227.html" "b/24\345\274\240\346\267\221\350\212\263/11-18-DOM/\346\230\276\347\244\272\345\205\263\351\227\255\346\226\207\345\255\227.html" new file mode 100644 index 0000000..54d3d96 --- /dev/null +++ "b/24\345\274\240\346\267\221\350\212\263/11-18-DOM/\346\230\276\347\244\272\345\205\263\351\227\255\346\226\207\345\255\227.html" @@ -0,0 +1,34 @@ + + + + + + + Document + + + + +

封校三天 快乐无边

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