企业官网建设流程全解析

网站建设标新立异,旅游网站建设的目的与意义是什么意思,南通优化网站排名,沈阳网站建设选网龙WebAPI 学习文档 概述 WebAPI 是浏览器提供的一套 API#xff0c;用于操作浏览器窗口和界面#xff0c;与 JavaScript 标准库不同#xff0c;它依赖于浏览器环境。WebAPI 主要包含两部分#xff1a; BOM#xff08;Browser Object Model#xff09;#xff1a;浏览器…WebAPI 学习文档概述WebAPI 是浏览器提供的一套 API用于操作浏览器窗口和界面与 JavaScript 标准库不同它依赖于浏览器环境。WebAPI 主要包含两部分BOMBrowser Object Model浏览器模型提供和浏览器相关的操作DOMDocument Object Model文档模型提供和页面相关的操作BOM浏览器对象模型BOM 提供了一系列对象和函数用于操作浏览器本身。window 对象window 是浏览器的全局对象所有 BOM 和 DOM 的功能都以某种方式与 window 对象相关联。API含义备注open()打开一个新的浏览器窗口返回新窗口的 window 对象close()关闭浏览器窗口只能关闭使用 open 打开的窗口setTimeout()设置计时器一段时间后执行函数参数1回调函数this 指向 window参数2延迟时间毫秒返回计时器 IDclearTimeout()清除指定 ID 的计时器需传入 setTimeout 返回的 IDsetInterval()设置计时器每隔一段时间执行函数参数1回调函数参数2间隔时间毫秒返回计时器 IDclearInterval()清除指定 ID 的计时器需传入 setInterval 返回的 IDalert()弹出提示框外观因操作系统而异confirm()弹出确认框点击确定返回 true取消返回 false示例代码// 打开新窗口constnewWindowwindow.open(https://example.com,_blank,width500,height300);// 3秒后执行consttimersetTimeout((){console.log(3秒后执行);},3000);// 清除计时器clearTimeout(timer);// 每隔1秒执行一次constintervalsetInterval((){console.log(每隔1秒执行);},1000);// 5秒后停止间隔执行setTimeout((){clearInterval(interval);},5000);window.location提供地址栏的相关操作用于获取或修改当前页面的 URL 信息。API含义备注href获取或设置页面当前地址设置地址会导致页面跳转protocol获取或设置地址中的协议部分如http:、https:host获取或设置主机名和端口号如example.com:8080hostname获取或设置主机名如example.comport获取或设置端口号如8080pathname获取或设置路径部分如/page/index.htmlsearch获取或设置参数部分如?id1nametesthash获取或设置 hash 部分如#section1reload()刷新页面类似 F5 刷新示例代码// 获取当前URLconsole.log(location.href);// 输出完整URL// 跳转到新页面location.hrefhttps://example.com;// 获取URL参数console.log(location.search);// 输出?id1nametest// 刷新页面location.reload();window.history提供当前窗口历史记录的操作。API含义备注back()后退到上一页类似浏览器的后退按钮forward()前进到下一页类似浏览器的前进按钮go(n)跳转到相对当前页面的第 n 条记录n 为正数前进负数后退pushState()在历史记录中添加一条新记录页面不刷新replaceState()替换当前历史记录页面不刷新示例代码// 后退一页history.back();// 前进一页history.forward();// 前进两页history.go(2);// 添加新的历史记录history.pushState({page:1},页面1,/page1);DOM文档对象模型DOM 将 HTML 文档表示为一个树状结构每个节点都是一个对象通过操作这些对象可以改变页面的结构、内容和样式。获取 DOM 元素API含义备注document.getElementById()根据 ID 获取元素返回单个 DOM 元素document.getElementsByTagName()根据标签名获取元素返回元素集合伪数组document.getElementsByClassName()根据类名获取元素返回元素集合伪数组document.querySelector()根据 CSS 选择器获取元素返回第一个匹配的元素document.querySelectorAll()根据 CSS 选择器获取元素返回所有匹配的元素伪数组document.documentElement获取 html 元素直接访问根元素document.body获取 body 元素直接访问 body 元素dom.children获取元素的子元素返回子元素集合伪数组dom.parentElement获取元素的父元素返回父元素dom.previousElementSibling获取前一个兄弟元素返回前一个同级元素dom.nextElementSibling获取后一个兄弟元素返回后一个同级元素示例代码// 根据ID获取constboxdocument.getElementById(box);// 根据标签名获取constdivsdocument.getElementsByTagName(div);// 根据类名获取constitemsdocument.getElementsByClassName(item);// 根据CSS选择器获取constfirstItemdocument.querySelector(.list .item);constallItemsdocument.querySelectorAll(.list .item);// 获取子元素constchildrenbox.children;// 获取父元素constparentbox.parentElement;创建 DOM 元素API含义备注document.createElement(tagName)创建一个新元素参数为标签名返回新创建的元素示例代码// 创建一个div元素constnewDivdocument.createElement(div);newDiv.textContent新创建的元素;newDiv.classNamenew-class;更改 DOM 结构API含义备注dom.remove()从文档树中删除元素移除自身dom.removeChild(child)删除子元素参数为要删除的子元素dom.insertBefore(newNode, referenceNode)在指定子元素前插入新元素第一个参数为新元素第二个为参考元素dom.appendChild(child)向元素末尾添加子元素参数为要添加的子元素示例代码constparentdocument.getElementById(parent);constchilddocument.createElement(div);// 添加子元素parent.appendChild(child);// 在第一个子元素前插入新元素constfirstChildparent.firstElementChild;parent.insertBefore(child,firstChild);// 删除子元素parent.removeChild(child);// 移除自身child.remove();DOM 属性操作标准属性HTML 元素的标准属性如href、src、value等可以直接通过dom.属性名访问和修改。注意布尔属性会自动转换为 boolean 类型路径类属性会转换为绝对路径class属性需使用className访问避免与关键字冲突示例代码constlinkdocument.querySelector(a);console.log(link.href);// 获取href属性link.hrefhttps://example.com;// 设置href属性constinputdocument.querySelector(input);input.value默认值;// 设置输入框值constdivdocument.querySelector(div);div.classNameactive;// 设置类名自定义属性自定义属性需要通过setAttribute和getAttribute方法操作。示例代码constdivdocument.querySelector(div);// 设置自定义属性div.setAttribute(data-id,123);div.setAttribute(data-name,test);// 获取自定义属性console.log(div.getAttribute(data-id));// 输出123DOM 内容操作API含义备注dom.innerText获取或设置元素的文本内容设置时会自动进行 HTML 实体编码dom.innerHTML获取或设置元素的 HTML 内容可以解析 HTML 标签示例代码constdivdocument.querySelector(div);// 设置文本内容div.innerTextHello strongWorld/strong;// 显示为Hello strongWorld/strong// 设置HTML内容div.innerHTMLHello strongWorld/strong;// 显示为Hello WorldWorld会加粗// 获取内容console.log(div.innerText);// 获取文本内容console.log(div.innerHTML);// 获取HTML内容DOM 样式操作JS 中可以操作两种样式内联样式和计算样式最终样式但只能设置内联样式。方法含义备注dom.style获取元素的内联样式可读写属性为驼峰命名法如fontSizegetComputedStyle(dom)获取元素的计算样式只读返回最终应用到元素上的所有样式示例代码constdivdocument.querySelector(div);// 设置内联样式div.style.colorred;div.style.fontSize16px;div.style.backgroundColor#f0f0f0;// 获取内联样式console.log(div.style.color);// 输出red// 获取计算样式constcomputedStylegetComputedStyle(div);console.log(computedStyle.width);// 输出元素的实际宽度console.log(computedStyle.marginTop);// 输出元素的实际上边距事件监听事件监听是指当某个 DOM 元素发生特定事件时执行相应的处理函数。事件类型表单类事件事件名称触发时机备注submit表单被提交时注册到 form 元素上input文本框内容改变时注册到 input、textarea 上change内容改变且失去焦点时下拉列表、单选框、复选框改变时立即触发注册到 input、select、textarea 上focus元素获得焦点时-blur元素失去焦点时-鼠标类事件事件名称触发时机备注click鼠标点击时-mousedown鼠标按下时-mouseup鼠标抬起时-mousemove鼠标在元素上移动时-mouseenter鼠标进入元素时不冒泡mouseleave鼠标离开元素时不冒泡键盘类事件事件名称触发时机备注keydown键盘按键按下时-keyup键盘按键抬起时-注册事件的方式方式 1通过元素属性不推荐buttononclickhandleClick()点击我/buttonscriptfunctionhandleClick(){console.log(按钮被点击了);}/script方式 2通过 DOM 属性constbuttondocument.querySelector(button);button.onclickfunction(){console.log(按钮被点击了);};// 移除事件监听button.onclicknull;方式 3通过addEventListener方法推荐constbuttondocument.querySelector(button);functionhandleClick(){console.log(按钮被点击了);}// 添加事件监听button.addEventListener(click,handleClick);// 移除事件监听button.removeEventListener(click,handleClick);事件对象事件处理函数会接收一个事件对象参数包含事件相关的信息。示例代码document.querySelector(button).addEventListener(click,function(e){console.log(鼠标X坐标,e.clientX);console.log(鼠标Y坐标,e.clientY);console.log(事件源,e.target);});DOM 进阶事件默认行为某些事件会触发浏览器的默认行为如 a 标签的跳转、表单的提交等可以通过e.preventDefault()阻止。示例代码// 阻止a标签跳转document.querySelector(a).addEventListener(click,function(e){e.preventDefault();// 阻止默认跳转行为console.log(链接被点击但不跳转);});// 阻止表单提交document.querySelector(form).addEventListener(submit,function(e){e.preventDefault();// 阻止默认提交行为console.log(表单被提交但不刷新页面);});事件传播机制事件传播分为三个阶段捕获阶段、目标阶段、冒泡阶段。捕获阶段事件从最外层元素向内传播到目标元素目标阶段事件到达目标元素冒泡阶段事件从目标元素向外传播到最外层元素示例代码// 在捕获阶段触发parent.addEventListener(click,function(){console.log(捕获阶段 - 父元素);},true);// 在冒泡阶段触发默认parent.addEventListener(click,function(){console.log(冒泡阶段 - 父元素);},false);// 阻止事件冒泡child.addEventListener(click,function(e){e.stopPropagation();// 阻止事件继续传播console.log(子元素被点击);});DOM 尺寸和位置可以通过以下属性和方法获取元素的尺寸和位置信息dom.offsetWidth/dom.offsetHeight元素的宽高包括边框和内边距dom.clientWidth/dom.clientHeight元素的宽高包括内边距不包括边框dom.scrollWidth/dom.scrollHeight元素内容的实际宽高包括滚动隐藏部分dom.offsetTop/dom.offsetLeft元素相对于 offsetParent 的位置dom.scrollTop/dom.scrollLeft元素滚动的距离dom.getBoundingClientRect()获取元素相对于视口的位置和尺寸示例代码constboxdocument.querySelector(.box);// 获取元素尺寸console.log(宽,box.offsetWidth);console.log(高,box.offsetHeight);// 获取元素位置console.log(距离顶部,box.offsetTop);console.log(距离左侧,box.offsetLeft);// 获取相对于视口的位置constrectbox.getBoundingClientRect();console.log(视口顶部,rect.top);console.log(视口左侧,rect.left);// 滚动到顶部box.scrollTo(0,0);总结WebAPI 是前端开发的基础包含 BOM 和 DOM 两部分BOM 用于操作浏览器窗口包括窗口控制、地址栏操作、历史记录等DOM 用于操作网页内容包括元素获取、创建、修改、样式设置和事件处理等掌握 WebAPI 是进行前端开发的必备技能通过灵活运用这些 API可以实现丰富的交互效果和功能。建议结合实际项目多练习加深对这些 API 的理解和应用。