From fdb8da13a5484b7469ed083cca0e8a33e31716db Mon Sep 17 00:00:00 2001 From: unknown <2833605196@qq.com> Date: Mon, 21 Nov 2022 13:18:54 +0800 Subject: [PATCH] =?UTF-8?q?06=E9=99=88=E6=A2=85=E9=A6=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2022.11.17\344\275\234\344\270\232.md" | 106 ++++++++++++++++++ .../2022.11.18\344\275\234\344\270\232.html" | 36 ++++++ ...71\350\261\241\346\250\241\345\236\213.md" | 84 ++++++++++++++ ...1\345\236\213\345\257\271\350\261\241).md" | 58 ++++++++++ 4 files changed, 284 insertions(+) create mode 100644 "06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.17\344\275\234\344\270\232.md" create mode 100644 "06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.18\344\275\234\344\270\232.html" create mode 100644 "06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.17DOM \346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" create mode 100644 "06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.18BOM(\346\226\207\346\241\243\346\250\241\345\236\213\345\257\271\350\261\241).md" diff --git "a/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.17\344\275\234\344\270\232.md" "b/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.17\344\275\234\344\270\232.md" new file mode 100644 index 0000000..cdac626 --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.17\344\275\234\344\270\232.md" @@ -0,0 +1,106 @@ + + + + + + + Document + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
郑玮喆庄云廖治先郑文源戴俊锋谢金金陈昊童占志新张淑芳刘永潘
廖柏成郑宗帅李韦峰吴欣燕陈梅香陈立智袁贵森赵浩敏林世涛罗启恒
卢国建黄柱菘陈鹏张耀仁陈华伟张正豪韦仲晓黄富贵陆建锋曾德森
吴文龙陆利群黄雄王世财张先杰胡基耀马鑫涛李涛杨凌翔罗此东
唐皓颖白婉婷
+ + + diff --git "a/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.18\344\275\234\344\270\232.html" "b/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.18\344\275\234\344\270\232.html" new file mode 100644 index 0000000..923eb13 --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\344\275\234\344\270\232/2022.11.18\344\275\234\344\270\232.html" @@ -0,0 +1,36 @@ + + + + + + + Document + + + + +   + +
+
+ + + \ No newline at end of file diff --git "a/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.17DOM \346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.17DOM \346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" new file mode 100644 index 0000000..eb6df75 --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.17DOM \346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" @@ -0,0 +1,84 @@ +## BOM 浏览器对象模型 + +浏览器对象模型（BOM）是以 window 对象为基础的，这个对象代表了浏览器窗口和页面可见的区域。 + +主要包括window、history、location和document等对象，其中window对象是整个BOM的顶层对象。 + + 通过 location 对象可以以编程方式操纵浏览器的导航系统。通过设置这个对象上的属性，可 以改变浏览器 URL 中的某一部分或全部。 + + 使用 replace()方法可以替换浏览器历史记录中当前显示的页面，并导航到新 URL。 + + navigator 对象提供关于浏览器的信息。 + +screen 对象中保存着客户端显示器的信息。这些信息 通常用于评估浏览网站的设备信息。 + +history 对象提供了操纵浏览器历史记录的能力，可以确定历史记录中包含多少个条目，并以编程方式实现在历史记录中导航，而且也可以修改历史记录。 + +### setTimeout() + +可以延时执行函数，只执行一次 + +``` +//无参 +setTimeout(要执行的函数代码, 等待的毫秒数); +//带参 +function sayHi(phrase, who) { + alert( phrase + ', ' + who ); +} +setTimeout(sayHi, 1000, "Hello", "John"); // Hello, John +``` + +**如果第二个参数为0** + +因为js是单线程执行，setTimeout的内容会留到其他普通队列执行后再执行 + +相当于异步执行，可以改变任务的执行顺序 + +### setInterval() + +依然延迟执行，但是反复 + +``` +setInterval(要重复执行的函数代码, 等待的毫秒数); //一样也能传参 + +//结束执行 +itv = setInterval(fn,80); +clearInterval(itv); +``` + +### **onclick()** + +onclick 事件在元素被点击时发生 + +``` +//html + //SomeJavaScriptCode：规定该事件发生时执行的 JavaScript +//JavaScript +object.onclick=function(){SomeJavaScriptCode}; +``` + +**document.getElementById()**：查找文档特定元素 + +**getElementsByTagName()**：获取任何类型的 HTML 元素的列表，不区分大小写 + +``` +var tables = document.getElementsByTagName("table"); +alert ("This document contains " + tables.length + " tables"); +//也可以获取文档中特定元素 +var myParagragh = document.getElementsByTagName("p")[3]; +``` + +##### 修改元素样式 + +``` +//修改td1的字体颜色 +'td1'.style.color = '#FF5072' +//修改td1的背景颜色 +'td1'.style.backgroundColor = 'white'; +``` + +**修改文档某元素的文本内容** + +``` +document.getElementById('pOutput').innerText = +``` \ No newline at end of file diff --git "a/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.18BOM(\346\226\207\346\241\243\346\250\241\345\236\213\345\257\271\350\261\241).md" "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.18BOM(\346\226\207\346\241\243\346\250\241\345\236\213\345\257\271\350\261\241).md" new file mode 100644 index 0000000..7cfd43b --- /dev/null +++ "b/06\351\231\210\346\242\205\351\246\231/\347\254\224\350\256\260/2022.11.18BOM(\346\226\207\346\241\243\346\250\241\345\236\213\345\257\271\350\261\241).md" @@ -0,0 +1,58 @@ +2022.11.18BOM(文档模型对象) + +1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。 + +2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。 + +3.DOM 模型被构造为对象的树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 + +节点类型： + +节点类型为1：元素节点 + +节点类型3：文本节点 + +节点类型2: 属性节点 + +获取html元素的三种模式 + +1、根据id获取HTML元素：document.getElementByld('id名') + +2、根据标签名获取HTML元素：document.getElementsByTagName('标签名') + +3、根据类名获取HTML元素：document.getElementsByClassName("类名") + +元素(elements) + +查看body中有几个元素节点 + +查看子节点 + +​ console.log(document.body.firstChild);//所有节点中的第一个节点 + +​ console.log(docuent.body.firstElementChild);//找第一个元素节点 + + 查看父节点 + +​ console.log(document.body.children[0].parentElement); + + 上一个元素节点 + +​ console.log(document.body.children[1].previousElementSibling); + + 下一个元素节点 + +​ console.log(document.body.children[1].nextElementSibling); + +节点的增删改查 + +1、创建HTML元素 +appendChild()：添加新元素到尾部 + +insertBefore()：添加新元素到该元素之前 + +2、删除HTMl节点 +removeChild() + +3、替换HTML元素 +replaceChild() \ No newline at end of file -- Gitee