所在位置：
首页 >
营销资讯 >
网站运营 > Part2 模块3 Web APIs 网页应用编程
Part2 模块3 Web APIs 网页应用编程
时间：2023-09-07 07:00:01 | 来源：网站运营
时间：2023-09-07 07:00:01 来源：网站运营
Part2 模块3 Web APIs 网页应用编程：
DOM
Web API简介
是一些预先定义的函数，目的是访问一组例程的能力，无需访问源码，或理解内部工作机制细节。
API的使用方法（console.log("abc")）
BOM 浏览器对象模型- 一套操作浏览器功能的API
- 通过BOM可以操作浏览器窗框，比如弹窗、控制浏览器跳转、获取分辨率。
DOM 文档对象模型- 一套操作页面元素的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。
DOM简介
DOM树- DOM又称为文档树模型
- - 文档：一个网页
- - 节点：网页中的所有内容都是节点
- - 元素：网页中的标签
- - 属性：标签属性
DOM经常进行的操作- 获取元素
- 对元素进行操作（设置属性或调用方法）
- 动态创建元素
- 事件（什么时机做相应的操作）
根据id获取元素
- 方法：调用 document 对象的 getElementById 方法。
- 参数：字符串类型的 id 的属性值。
- 返回值：对应 id 名的元素对象。
- 注意1：由于id具有唯一性，部分浏览器直接支持使用 id 访问元素，不推荐使用
- 注意2：代码执行顺序，如果js在html结构前，会导致结构未加载。
根据标签名获取元素
- 方法：调用 document 对象的 getElementsByTagName 方法。
- 参数：字符串类型的标签名。
- 返回值：同名的元素对象组成的数组。
- 注意1：操作数据时需要按照操作数组的方法进行。
- 注意2：getElementsByTagName 方法内部获取的元素是动态增加的。
元素对象内部获取元素
var box1 = document.getElementById("box1");
var box1p = box1.getElementsByTagName("p")
根据 name 属性获取元素
调用 document 对象的 getElementsByName 方法。
（不建议使用）
===
根据类名获取元素
调用 document 对象的 getElementsByClassName 方法。
===
根据选择器获取元素
var para1 = document.querySelector("#para .para")===
总结：
//掌握没有兼容document.getElementById();document.getElementsByTagName();// 了解document.getElementsByName();document.getElementsByClassName();document.querySelector();document.querySelectorAll();============================
DOM 事件基本应用（dom事件用法）事件：
- 给谁绑定事件
- 绑定什么类型的事件
- 事件发生后执行什么内容，写在函数内部
常用事件监听方法：
// 常用鼠标事件类型.onclick //鼠标左键单击触发.ondblclick //鼠标左键双击触发.onmousedown //鼠标按键按下触发.onmouseup //鼠标按键放开时触发.onmouseover //鼠标在元素上移动触发.onmousemove //鼠标移动到元素上触发.onmouseout //鼠标移除元素边界触发===
非表单元素属性操作- 例如：herf、title、id、src等。
- 调用方式：元素对象 点 调用属性名 obj.herf
- 部分属性名冲突 跟换写法
- class--className for--htmlFor rowspan--rowSpan
- 等号赋值 右侧是字符串类型
===
获取标签内部内容的属性使用场景
- innerText 设置纯字符串
- innerHTML 设置内部子标签结构
===
非表单元素属性- value 用于大部分表单元素的内容获取（option除外）
- type 可以获取input标签的类型（输入框或复选框）
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉框菜单选中属性
- * DOM 中元素对象的属性值只有一个时，会转换成布尔值。
txt.disabled = true;===
自定义属性操作
- .getAttribute(name) 获取标签行内属性
- .setAttribute(name,value) 设置标签行内属性
- .removeAttribute(name) 移除标签行内属性
- 与 element 属性区别：上述方法用于获取任意的行内属性，包括自定义属性。
===
style 样式属性操作
- 使用 style 属性方式设置样式的显示在标签内
- element.style 属性的值 是所有行内样式组成的一个样式对象
- 样式对象可以直接打点调用或更改 css 的行内样式属性
===
DOM 节点操作
节点属性
· nodeType 节点的类型，属性值为数字，表示不同的节点类型，共12种
- 元素节点
- 属性节点
- 文本节点
· nodeName 节点的名称（标签名称）
· nodeValue 节点值没返回或设置当前节点的值
===
父子节点常用属性- childNodes 只读属性，获取一个节点所有子节点的实时的合集，集合是动态变化的。
- children 只读属性，返回一个节点所有的子元素节点集合 动态跟新的 HTML 元素
- firstChild 只读属性，返回该节点的第一个子节点，如果该节点没有子节点则返回null。
- lastChild 只读属性，返回该节点的最后一个子节点，如果该节点没有子节点返回null。
- parentNode 返回一个当前节点的父节点，如果没有这样的节点，比如说像这个节点是树结构的顶端或者没有插入一棵树中，这个属性返回 null。
- parentElement 返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个Dom 元素，则返回 null。
===
兄弟节点常用属性- nextSibling 只读属性，返回该节点同级的下一个节点，如果没有返回 null
- previousSibling 只读属性，返回该节点同级的上一个节点，如果没有返回 null
- nextElementSibling 只读属性 返回该节点同级的下一个元素节点，如果没有返回 null
- previousElementSibling 只读属性 返回该节点同级的上一个元素节点，如果没有返回 null
ps：nextElementSibling 、previousElementSibling 支持ie9+。
===
创建新节点的方法document.createElement("div") // 创建元素节点document.createAttribute("id") //创建属性节点document.createTextNode("hello") //创建文本节点一般将创建的新节点存在变量中，方便使用节点常用操作方法 1
- parentNode.appendChild(child)：将一个节点添加到制定父节点的子节点列表末尾。
- parentNode.replaceChild(newChild,oldChild)：用指定的节点代替当前节点的一个子节点，并返回被替换掉的节点。
- parentNode.insertBefore(newNode,referenceNode)：在参考节点钱插入一个拥有指定父节点的子节点，referenceNode 必须设置，如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾
- parentNode.removeChild(child):移除当前节点的一个子节点。这个子节点必须存在于当前节点中。
节点常用操作方法 2
- node.cloneNode()：克隆一个节点，并且可以选择是否克隆节点下所有内容；参数为Boolean 布尔值，表示是否采用深度克隆，如果为 true 则克隆所有节点 为 false 则克隆该节点本身，默认值为 true 。
- ps：克隆时， 标签属性也属性值会被复制，写在标签内的绑定事件可以被复制，但是通过 js 动态绑定的时间不会被复制。
节点常用操作方法 3
- Node.hasChildNodes()；没有参数，返回一个 Boolean 布尔值，来表示该元素是否包含有子节点
- Node.contains(child)；返回一个 Boolean 布尔值；来表示传入的节点是否为该节点的后代节点。
判断方法总结- 有三种方法判断当前节点是否有子节点
- node.firstChild !== null
- node.childNode.lenght > 0
- node.hasChildNodes()
=====
注册事件得其他方法1
addEventListener()方法。参数：第一个参数：事件类型得字符串（直接书写 click 不需要 on）第二个参数：事件函数注册事件得其他方法2
element.attachEvent()
参数：第一个参数：事件类型得字符串（需要 on）第二个参数：事件函数注册事件的兼容写法- 自定义一个注册事件函数
- 参数：事件源 事件类型（不加on） 事件函数
- ie9+ 使用 addEventListener
- ie9- 使用 attachEvent
移除事件的其他方法1
element.removeEventListener() 方法
参数：
第一个参数：事件类型得字符串（直接书写 click 不需要 on）
第二个参数：事件函数引用名
移除事件的其他方法2
element.detachEvent() 方法
第一个参数：事件类型得字符串（需要 on）
第二个参数：事件函数
移除事件的兼容写法
- 自定义一个注册事件函数
- 参数：事件源 事件类型（不加on） 事件函数
- ie9+ 使用 removeEventListener
- ie9- 使用 detachEvent
事件流的三个阶段
- 事件捕获
- 实践执行过程
- 事件冒泡
- addEventListener() 第三个参数为 false 时间冒泡
- addEventListener() 第三个参数为 true 事件捕获
- onclick 类型；只能进行事件冒泡，没有捕获阶段
- attachEvent() 方法：只能进行冒泡，没有捕获阶段
事件对象
- 只要触发事件，就有一个对象
- e 低版本 window.event
- 常用属性
e.eventPhase 查看事件触发所处阶段e.target 获取触发事件的元素e.srcElement 获取触发事件的元素，低版本e.currentTarget 获取绑定事件的事件源元素e.type 获取事件类型e.clientX / e.clientY 鼠标距离浏览器窗口左上角距离e.pageX / e.pageY 鼠标距离HTML页面顶点的距离 取消默认行为和阻止事件传播的方式
e.preventDefault() 取消默认行为e.returnValue 取消默认行为，low e.stopPropagation() 阻止冒泡 标准e.cancelBubble = true; 阻止冒泡 低 废DOM特效
偏移量属性
offsetParent 偏移参考父级 距离自己最近的有定位的父级，如果没有参考bodyoffsetLeft / offsetTop 偏移位置offsetWidth / offsetHeight 偏移大小滚动偏移属性
scrollLeft / scrollTopscrollWidth / scrollHeight ================================
BOM
window 对象
- window 是浏览器顶级对象，当调用 window 下的属性和方法时，可以省略 window
- 注意：window 下两个特殊的属性 window.name、window.top
onload 事件
- 给window 对象 或者 img 等元素 添加 onload 加载事件，表示只有绑定事件的元素加载完毕才能触发事件，才能执行事件函数。
- window 对象加载完毕：指所有的 HTML 结构加载完，并且外部引用资源（js、css、img、video）也加载完毕
应用
- 利用 window.onload 事件，将 js 代码提前到 html 结构之前
- 注意：一个页面只能有一个 window.onload 事件。
延时器
- 延时器是 window 对象的一个方法，类似于定时炸弹
- 语法：window.setTimeout(func,time);
- 第一个参数：延时执行的函数，可以是匿名函数定义，函数名的引用，注意不要加 ()
- 第二个参数：延时的时间，以毫秒计数，1000 = 1s
- 功能：在指定时间后，延迟执行一个函数。
清除延时器
- window 对象的一个方法
- 语法：window.clearTimeout(timeout);
- 参数：指定的延时器变量名引用
- 功能：清除指定的延时器
- 注意：清除延时器需要储存到一个变量中，便于后期清除调用。
定时器
- 语法：window.setInterval(func,interval)
- 第一个参数：延时执行的函数，可以是匿名函数定义，函数名的引用，注意不要加 ()
- 第二个参数：延时的时间，以毫秒计数，1000 = 1s
- 功能：每隔一个指定时间，周期性的执行一个函数。
清除定时器
- window 对象的一个方法
- 语法：window.clearInterval(timer);
- 参数：指定的延时器变量名引用
- 功能：清除指定的延时器
- 注意：清除延时器需要储存到一个变量中，便于后期清除调用
封装动画函数
在线咨询
