From fa72cea1f22f26575f7d8c519fca03dc37d480ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E6=AC=A3=E7=87=95?= <932306904@qq.com> Date: Mon, 21 Nov 2022 10:52:34 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=B4=E6=AC=A3=E7=87=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\344\275\234\344\270\232/BOM.md" | 107 +++++++ .../\344\275\234\344\270\232/DOM.md" | 32 +++ .../2022-11-18BOM.md" | 84 ++++++ .../2022-11-19DOM.md" | 271 ++++++++++++++++++ 4 files changed, 494 insertions(+) create mode 100644 "31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/BOM.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/DOM.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-18BOM.md" create mode 100644 "31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-19DOM.md" diff --git "a/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/BOM.md" "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/BOM.md" new file mode 100644 index 0000000..2a265d9 --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\344\275\234\344\270\232/BOM.md" @@ -0,0 +1,107 @@ +``` + + + + + + + Document + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
郑玮喆庄云廖治先郑文源戴俊锋谢金金陈昊童占志新张淑芳刘永潘
廖柏成郑宗帅李韦峰吴欣燕陈梅香陈立智袁贵森赵浩敏林世涛罗启恒
卢国建黄柱菘陈鹏张耀仁陈华伟张正豪韦仲晓黄富贵陆建锋曾德森
吴文龙陆利群黄雄王世财张先杰胡基耀马鑫涛李涛杨凌翔罗此东
唐皓颖白婉婷
+ + + #box{ + width: 500px; + height: 100px; + border: 2px solid rosybrown; + } + + + + +   + +
+
+ + + +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-18BOM.md" "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-18BOM.md" new file mode 100644 index 0000000..eb6df75 --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-18BOM.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/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-19DOM.md" "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-19DOM.md" new file mode 100644 index 0000000..88d54b5 --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-19DOM.md" @@ -0,0 +1,271 @@ +### 获取元素 + +#### 1，获取特殊元素（body、html） + +``` +//html头部里的title 输出Document + console.log(document.title); +//输出html头部里的全部 + console.log(document.head); +//全部html + console.log(document.documentElement); +``` + +#### 2，根据选择器获取元素 (document.querySelector,document.querySelectorAll) + +（1）方法1：调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素 + +（2）方法2：调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取所有符合条件的标签元素集合（伪数组） + +（3）参数：字符串类型的 css 中的选择器 + +（4）浏览器兼容问题：不支持 IE8 + +（5）需要将 js 代码写在 html 结构之后；不会动态增加 + +#### 3，根据类名获取元素 （document.getElementsByClassName） + +（1）方法：调用 document 对象的 getElementsByClassName 方法。（普通元素对象也可调用获取内部的元素） + +（2）参数：字符串类型的 class 属性值 + +（3）返回值：class 属性值相同的元素对象组成的动态集合（伪数组） + +（4）此方法内部获取的元素是动态增加的 + +#### 4，根据 name 获取元素 (document.getElementsByName) + +（1）方法：调用 document 对象的 getElementsByName 方法 + +（2）参数：字符串类型的 name 属性值。 + +（3）返回值：name 属性值相同的元素对象组成的集合（伪数组形式）。 + +（4）不建议使用：在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素 + +#### 5，根据标签名获取元素 (document.getElementsByTagName('')) + +（1）方法：调用 document 对象的 getElementsByTagName 方法。（普通元素对象也可调用获取内部的元素） + +（2）参数：字符串类型的标签名。 + +（3）返回值：同名的元素对象组成的集合（以伪数组的形式存储）。 + +（4）注意1：操作数据时需要按照操作数组的方法进行。 + +（5）注意2：getElementsByTagName 方法内部获取的元素是动态增加的 + +#### 6，根据 id 获取元素 (document.getElementById('')) + +（1）方法：调用 document 对象的 getElementById 方法。 + +（2）参数：字符串类型的 id 的属性值。 + +（3）返回值：对应 id 名的元素对象。 + +（4）注意1：由于 id 名具有唯一性，部分浏览器支持直接使用 id 名访问元素，但不是标准方式， 不推荐使用。 + +（5）注意2：代码执行顺序，如果 js 在 html 结构之前，会导致结构未加载，不能获取对应id的元素 + +#### 8，获取元素节点的长度 + +``` +var length=document.body.childElementCount +``` + +#### 9，获取第一个元素子节点 + +``` +var first=document.body.firstElementChild; +``` + +#### 10，获取元素节点(set)：HTMLCollection + +``` +var a=document.body.children[0].children[0].parentElement.parentElement; +``` + +### 节点层级 + +#### 1， 节点 + +- DOM的最小组成单位叫做节点（node），文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。 + +#### 2， 节点类型 + +| 节点 | 值 | 释义 | 对应常量 | +| ----------------------------- | ---- | ------------------------------------------------------------ | --------------------------- | +| 文档节点 Document | 9 | 整个HTML文档document对象作为window对象的属性存在的，不用获取可以直接使用 | Node.DOCUMENT_NODE | +| 文档类型节点 DocumentType | 10 | doctype标签 | Node.DOCUMENT_TYPE_NODE | +| 元素节点 Element | 1 | HTML文档中的HTML标签 | Node.ELEMENT_NODE | +| 文本节点 Text | 3 | HTML标签中的文本内容 | Node.TEXT_NODE | +| 注释节点 Comment | 8 | | Node.COMMENT_NODE | +| 文档片断节点 DocumentFragment | 11 | | Node.DOCUMENT_FRAGMENT_NODE | +| 属性节点 Attribute | 2 | 元素的属性 表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分 | Node.ATTRIBUTE_NODE | + +#### 3，节点关系 + +- 父节点关系（parentNode）：直接的那个上级节点 +- 子节点关系（childNode）：直接的下级节点 （属性；firstChild（第一个子节点），lastChild（最后一个子节点）） +- 同级节点关系（sibling）：拥有同一父节点的节点 （属性；nextSibling（紧邻在后的那个同级节点），previousSibling（紧邻在前的那个同级节点）） + +#### 4，节点树 + +- 一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM。 +- 最顶层的节点就是document节点，它代表了整个文档。文档里面最高的HTML标签，一般是html，它构成树结构的根节点（root node），其他HTML标签节点都是它的下级 + +### DOM级 + +``` + +
我是div + 这是div里面的span +
+

这是第1个h2

+

这是第2个h2

+

这是第3个h2

+ + + + +``` + +#### 1， DOM 0 级 getElementsBy + +``` +//返回的是HTMLCollection集合, + console.log(document.getElementsByTagName('h2')); +//返回的是HTMLCollection集合 + console.log(document.getElementsByClassName('H2')[0]); +//id是唯一的，返回的是指定元素 + console.log(document.getElementById('tH2')); +//返回的是NodeList + console.log(document.getElementsByName('username')); +``` + +#### 2，DOM 1 级 querySelector + +``` +console.log(document.querySelector('#tH2')); + +console.log(document.querySelector('input')); + +console.log(document.querySelectorAll('h2')); +``` + +#### 3，优先级 + +``` +btn.onclick = () => { + document.getElementById('sp').innerHTML = '你好，靓女.' +} + +btn.onclick = function (){ + document.getElementById('sp').innerHTML = '你好，靓女.' +} + +function sayHi(){ + document.getElementById('sp').innerHTML = '你好，帅哥.' +} +``` + +### Node + +``` +console.log(document.body.childNodes); +for (var i = 0; i < document.body.childNodes.length; i++) { + node = document.body.childNodes[i]; + console.log(node.nodeType); //节点类型 + console.log(node.nodeName); //节点名称 + console.log(node.nodeValue); //节点值 +} +``` + +| | 元素节点 | 属性节点 | 文本节点 | 注释节点 | +| --------- | -------- | -------- | -------- | ---------- | +| nodeType | 1 | 2 | 3 | 8 | +| nodeName | 元素名 | 属性名 | #text | #comment | +| nodeValue | null | 属性值 | 文本值 | 注释的文本 | + +### 操作 （增删改查） + +``` + + + + + + + Document + + + +
+
+   +   +   + +
+ + +``` + +#### 1，appendChild （增加） + +- appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点 + +``` + +``` + +#### 2， removeChild() （删除） + +- removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点 + +``` + +``` + +#### 3，replaceChild() 修改替换 + +- replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点 +- replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild + +``` + +``` \ No newline at end of file -- Gitee