From 9caf4db88613fa76a3fdcf338b9b14d0f65eefa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=B5=A9=E6=95=8F?= <3127104562@qq.com> Date: Thu, 17 Nov 2022 19:22:45 +0800 Subject: [PATCH 1/3] 11.18 --- ...\347\211\207\350\275\256\347\225\252.html" | 41 +++++ ...\345\245\226\347\263\273\347\273\237.html" | 146 ++++++++++++++++++ 2 files changed, 187 insertions(+) create mode 100644 "27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\345\244\215\344\271\240\345\233\276\347\211\207\350\275\256\347\225\252.html" create mode 100644 "27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\346\212\275\345\245\226\347\263\273\347\273\237.html" diff --git "a/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\345\244\215\344\271\240\345\233\276\347\211\207\350\275\256\347\225\252.html" "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\345\244\215\344\271\240\345\233\276\347\211\207\350\275\256\347\225\252.html" new file mode 100644 index 0000000..c7dcd36 --- /dev/null +++ "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\345\244\215\344\271\240\345\233\276\347\211\207\350\275\256\347\225\252.html" @@ -0,0 +1,41 @@ + + + + + Title + + + + +
+ +
+ + + + \ No newline at end of file diff --git "a/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\346\212\275\345\245\226\347\263\273\347\273\237.html" "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\346\212\275\345\245\226\347\263\273\347\273\237.html" new file mode 100644 index 0000000..3143646 --- /dev/null +++ "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.17\346\212\275\345\245\226\347\263\273\347\273\237.html" @@ -0,0 +1,146 @@ + + + + + + + + 浏览器对象模型(Browser Object Model) + + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
郑玮喆庄云廖治先郑文源戴俊锋陈昊童谢金金占志新张淑芳
刘永潘廖柏成郑宗帅李韦峰吴欣燕陈梅香陈立智袁贵森赵浩敏
林世涛罗启恒卢国建黄柱菘陈鹏张耀仁陈华伟张正豪韦仲晓
黄富贵陆建锋曾德森吴文龙陆利群黄雄王世财张先杰胡基耀
马鑫涛李涛杨凌翔罗此东唐皓颖白婉婷
+ + + + \ No newline at end of file -- Gitee From cf654f029dc7c96e0a5c2da9c54f83df8e55628b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=B5=A9=E6=95=8F?= <3127104562@qq.com> Date: Mon, 21 Nov 2022 11:52:28 +0800 Subject: [PATCH 2/3] 11.21 --- ...\345\242\236\345\210\240\346\224\271.html" | 70 +++++ .../11.19DOM JS\347\254\224\350\256\260.md" | 287 ++++++++++++++++++ 2 files changed, 357 insertions(+) create mode 100644 "27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\345\244\215\344\271\240\347\254\254\344\272\214\350\212\202\350\257\276\345\242\236\345\210\240\346\224\271.html" create mode 100644 "27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.19DOM JS\347\254\224\350\256\260.md" diff --git "a/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\345\244\215\344\271\240\347\254\254\344\272\214\350\212\202\350\257\276\345\242\236\345\210\240\346\224\271.html" "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\345\244\215\344\271\240\347\254\254\344\272\214\350\212\202\350\257\276\345\242\236\345\210\240\346\224\271.html" new file mode 100644 index 0000000..0206b30 --- /dev/null +++ "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\345\244\215\344\271\240\347\254\254\344\272\214\350\212\202\350\257\276\345\242\236\345\210\240\346\224\271.html" @@ -0,0 +1,70 @@ + + + + + Title + + + + + +
+ + + + \ No newline at end of file diff --git "a/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.19DOM JS\347\254\224\350\256\260.md" "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.19DOM JS\347\254\224\350\256\260.md" new file mode 100644 index 0000000..28c79ce --- /dev/null +++ "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.19DOM JS\347\254\224\350\256\260.md" @@ -0,0 +1,287 @@ +# 11.19DOM JS笔记 + +## 1.节点 + +### 1.1 什么是document对象 + +document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档， + +该对象就存在了，可以直接使用。 + +### 1.2 document对象的属性 + +### 1.3 document.doctype + +document.doctype，指向节点，即文档类型（Document Type Declaration，简写DTD）节点。 + +HTML 的文档类型节点，一般写成。如果网页没有声明 DTD，该属性返回null。 + +```html + + + + + + + + +``` + +### 1.4document.documentElement + +document.documentElement属性返回当前文档的根节点（root），一般是节点。 + +### 1.5document.head + +document.body属性指向节点。 + +### 1.6 document.body + +document.head属性指向节点。 + +### 1.7document对象的方法 + +### 1.8document.write() + +document.write方法用于向当前文档写入内容。 + +document.getElementsByTagName() +document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象 + +（HTMLCollection实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。 + + +```html + + + + +

文本1

+

文本2

+

文本3

+ + + + +``` + +## 1.9document.getElementsByClassName() + +document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。 + +```html + + + + +
文本1
+
文本2
+
文本3
+ + + + +``` + +## 2.document.getElementById() + +document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。 + +```html + + + + +
文本1
+
文本2
+
文本3
+ + + + +``` + +### 2.1document.querySelector()和document.querySelectorAll() + +document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件， + +则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。 + +document.querySelectorAll方法返回所有匹配选择器的元素节点。 + + +```html + + + + +
文本1
+
文本2
+
文本3
+ + + +``` + +### 2.2document.createElement() + +document.createElement方法用来生成元素节点，并返回该节点。 + +```js +var newDiv = document.createElement('div'); +``` + +### 2.3document.createTextNode() + +document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。 + +```js +var newContent = document.createTextNode('Hello'); +``` + +### 2.4document.createAttribute() + +document.createAttribute方法生成一个新的属性节点（Attr实例），并返回该节点。它的参数是属性的名称。 + +```js +var attribute = document.createAttribute("class"); +``` + +### 3.元素(elements) + +```js + + //查看body中有几个元素节点 + console.log(document.body.childElementCount); + console.log(document.body.children); + //查看父节点 + console.log(document.body.children[0].parentElement); + //上一个元素节点 + console.log(document.body.children[1].previousElementSibling); + //下一个元素节点 + console.log(document.body.children[1].nextElementSibling); + //查看子节点 + console.log(document.body.firstChild);//所有节点中的第一个节点 + console.log(document.body.firstElementChild);//找第一个元素节点 + + //查看父节点 + console.log(document.body.children[0].parentElement);//结果body + +``` + +### 4.DOM节点方法 + +```js + //DOM0 + + //根据class获取元素: 返回: HTMLCollection (数组) + // console.log(document.getElementsByClassName('H2')); + + //根据name属性获取元素对象: NodeList(伪数组)：只能获取下标和长度 + // console.log(document.getElementsByName('username')); + + //根据标签名获取元素对象:返回 HTMLCollection + // console.log(document.getElementsByTagName('input')); + + //根据id属性获取元素对象，返回当前元素对象 + // console.log(document.getElementById('thirdH2')); + + //DOM2 + //找class=H2的元素对象，如果不止一个，返回第一个元素对象 + //根据class : ('.className') + //根据Id ： ('#id') + //根据标签名: ('div') + // console.log(document.querySelector('div')); + //找全部 + // console.log(document.querySelectorAll('.H2')); +``` + +### 5.节点增删改 + +```html + + + + + + + Document + + +
+

我是将被删除的h2

+
+ + + +``` + +### 5.1增 + +```js + var div = document.querySelector('#box'); + //创建元素节点 + var newH2 = document.createElement('h2'); + var txt = document.createTextNode('我是新添加的H2'); + newH2.appendChild(txt); + // 添加子元素节点 + div.appendChild(newH2); +``` + +### 5.2删 + +```js + //删除子节点:removeChild(元素对象:h2) + var h2 = document.getElementById('h2'); + div.removeChild(h2); +``` + +### 5.2改 + +```js + var newH3 = document.createElement('h3'); + var txt = document.createTextNode('替换的h3'); + var h2 = document.getElementById('h2'); + newH3.appendChild(txt); +//改:replaceChild + div.replaceChild(newH3,h2); +``` + -- Gitee From d52fd16660ed60db039e66e9c3531e874515ef82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=B5=A9=E6=95=8F?= <3127104562@qq.com> Date: Mon, 21 Nov 2022 03:53:17 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2027=20?= =?UTF-8?q?=E8=B5=B5=E6=B5=A9=E6=95=8F/=E4=BD=9C=E4=B8=9A/11.18=E5=A4=8D?= =?UTF-8?q?=E4=B9=A0=E7=AC=AC=E4=BA=8C=E8=8A=82=E8=AF=BE=E5=A2=9E=E5=88=A0?= =?UTF-8?q?=E6=94=B9.html=20=E4=B8=BA=2027=20=E8=B5=B5=E6=B5=A9=E6=95=8F/?= =?UTF-8?q?=E4=BD=9C=E4=B8=9A/11.18=E6=8C=89=E9=92=AE=E7=82=B9=E5=87=BB.ht?= =?UTF-8?q?ml?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../11.18\346\214\211\351\222\256\347\202\271\345\207\273.html" | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename "27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\345\244\215\344\271\240\347\254\254\344\272\214\350\212\202\350\257\276\345\242\236\345\210\240\346\224\271.html" => "27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\346\214\211\351\222\256\347\202\271\345\207\273.html" (100%) diff --git "a/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\345\244\215\344\271\240\347\254\254\344\272\214\350\212\202\350\257\276\345\242\236\345\210\240\346\224\271.html" "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\346\214\211\351\222\256\347\202\271\345\207\273.html" similarity index 100% rename from "27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\345\244\215\344\271\240\347\254\254\344\272\214\350\212\202\350\257\276\345\242\236\345\210\240\346\224\271.html" rename to "27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.18\346\214\211\351\222\256\347\202\271\345\207\273.html" -- Gitee