网站建设开源程序,做网站挣钱,学历提升咨询,老干部局网站建设目录一、Web APIs介绍1、API2、Web API二、DOM1、DOM树2、获取元素3、事件基础4、操作元素属性5、节点#xff08;node#xff09;操作三、DOM操作总结#xff08;创建、增删改查、属性操作、事件操作API#xff09;1、创建2、增3、删4、改5、查6、属性操作7、事件操作四、…
目录一、Web APIs介绍1、API2、Web API二、DOM1、DOM树2、获取元素3、事件基础4、操作元素属性5、节点node操作三、DOM操作总结创建、增删改查、属性操作、事件操作API1、创建2、增3、删4、改5、查6、属性操作7、事件操作四、小案例一、Web APIs介绍
JS的组成ECMAScript基础语法、DOM页面文档模型和BOM浏览器文档模型 基础语法为后面做铺垫Web API是JS的应用大量使用JS基础语法做交互效果
1、API
API应用程序编程接口Application Programming Interface是预先定义的函数API是给程序员提供的一种工具帮助我们实现想要完成的功能会用即可不必纠结内部如何实现
2、Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的APIBOM和DOM
Web API主要是针对于浏览器提供的接口主要针对于浏览器做交互效果
Web API一般都有输入和输出函数的传参和返回值Web API很多都是方法函数
二、DOM
文档对象模型Document Object Model是W3C组织推荐的处理可扩展标记语言HTML或XML的标准编程接口
1、DOM树 文档一个页面就是一个文档DOM中使用document来表示 元素页面中的所有标签都是元素DOM中使用element来表示 节点网页中的所有内容都是节点标签、属性、文本、注释等DOM中使用node表示 DOM把以上内容都看做是对象DOM在实际开发中主要用来操作元素
2、获取元素
《1》根据ID获取
document.getElementById(id);使用console.dir()可以打印我们获取的元素对象更好的查看对象里面的属性和方法。
《2》根据标签名获取 getElementByTagName()方法可以返回带有指定标签名的对象的集合
document.getElementByTagName(标签名);注意 得到的是一个对象集合想要操作里面的元素就需要遍历 得到元素对象是动态的 如果获取不到元素则返回空的伪数组因为获取不到对象
还可以获取某个元素的所有指定标签名的子元素
element.getElementByTagName(标签名);注意父元素必须是单个对象必须指明是哪一个元素对象获取时不包括父元素自己
divp1111/pp222/pp333/p
/divscriptvar div document.getElementsByTagName(div);var a div[0].getElementsByTagName(p);console.log(a);console.dir(a);
/script《3》HTML5新增
document.getElementByClassName(类名); // 根据类名返回元素对象集合
document.querySelector(选择器); // 根据指定选择器返回第一个元素
document.querySelectorAll(选择器); // 根据指定选择器返回注意querySelector和querySelectorAll里面的选择器需要加符号
《4》特殊元素获取 获取body元素和获取html元素
document.body; // 返回body元素对象
document.documentElement // 返回html元素对象3、事件基础
JS使我们有能力创造动态页面而事件是可以被JS侦测到的行为。触发–响应机制 常见的鼠标事件
鼠标事件触发条件onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseout鼠标离开触发onfocus获得鼠标焦点触发onblur失去鼠标焦点触发onmousemove鼠标移动触发onmouseup鼠标弹起触发onmousedown鼠标按下触发
4、操作元素属性
DOM操作可以改变页面内容、结构和样式
《1》改变元素内容
element.innerText; // 去掉html标签、空格和换行
element.innerHTML // 包括html同时保留空格和换行《2》常用元素的属性操作
innerText、innerHTML、src、href、id、alt、title《3》表单元素的属性操作
type、value、checked、selected、disabled《4》样式属性操作 可以通过 JS 修改元素的大小、颜色、位置等样式 JS 修改 style 样式操作产生的是行内样式CSS 权重比较高
element.style // 行内样式操作
element.className // 类名样式操作注意 如果样式修改较多可以采取操作类名方式更改元素样式 className 会直接更改元素的类名会覆盖原先的类名 《5》自定义属性的操作
① 获取属性
element.属性 // 获取内置属性
element.getAttribute(属性) // 获得自定义的属性② 操作属性值
element.属性 值
element.setAttribute(属性,值) // 设置自定义属性值③ 移除属性
element.removeAttribute(属性)《6》H5自定义属性 自定义属性目的是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 H5规定自定义属性data-开头做为属性名并且赋值。 ① 兼容性获取 element.getAttribute(‘data-index’); ② H5新增 element.dataset.index 或者 element.dataset[‘index’] IE11才开始支持
5、节点node操作
一般地节点至少拥有nodeType节点类型、nodeName节点名称和nodeValue节点值这三个 基本属性。 元素节点 nodeType 为 1属性节点 nodeType 为 2文本节点 nodeType 为 3文本节点包含文字、空格、换行等
在实际开发中节点操作主要操作的是元素节点
DOM 树把节点划分为不同的层级关系常见的是父子兄层级关系。 《1》父级节点
node.parentNode 注意返回某节点的父节点是最近的一个父节点如果指定的节点没有父节点则返回null
《2》子节点 ① 第一种
parentNode.childNodes(标准) // 返回包含指定节点的子节点的集合该集合为即时更新的集合parentNode.firstChild // 返回第一个子节点找不到返回null包含所有的节点
parentNode.lastChild // 返回最后一个子节点找不到返回null包含所有的节点注意返回值里面包含了所有的子节点包含元素节点文本节点等 如果只想要获得里面的元素节点则需要专门处理。所以一般不提倡使用childNodes
var ul document. querySelector(ul);
for(var i 0; i ul.childNodes.length;i) {if (ul.childNodes[i].nodeType 1) {// ul.childNodes[i] 是元素节点console.log(ul.childNodes[i]);
}
}② 第二种
// 各个浏览器支持
parentNode.children(非标准) // 是一个只读属性返回所有的子元素节点。它只返回子元素节点其余节点不返回 // 以下两方法IE9以上才支持
parentNode.firstElementChild // 返回第一个子元素节点找不到返回null
parentNode.lastElementChild // 返回最后一个子元素节点找不到返回null想要得到第一个或最后一个子元素节点实际开发中解决方案 1. 如果想要第一个子元素节点可以使用 parentNode.chilren[0] 如果想要最后一个子元素节点可以使用parentNode.chilren[parentNode.chilren.length - 1]
《3》兄弟节点
node.nextSibling // 返回当前元素的下一个兄弟元素节点找不到返回null包含所有的节点
node.previousSibling // 返回当前元素的上一个兄弟元素节点找不到返回null包含所有的节点// IE9以上支持
node.nextElementSibling // 返回当前元素下一个兄弟元素节点
node.previousElementSibling // 返回当前元素上一个兄弟节点兼容性问题解决方案
// 封装一个兼容性的函数
function getNextElementSibling(element) {var el element;while (el el.nextSibling) {if (el.nodeType 1) {return el;}}return null;
} 《4》创建节点动态创建元素节点
document.createElement(tagName);《5》添加节点
node.appendChild(child) // 将一个节点添加到指定父节点的子节点列表的末尾类似于css里面的after伪元素
node。insertBefore(child,指定元素) // 添加到父节点的指定子节点前面类似于的before伪元素《6》删除节点
node.removeChild(child) // 返回删除的节点《7》复制节点
node.cloneNode() // 法返回调用该方法的节点的一个副本注意 ① 如果括号参数为空或者为 false 则是浅拷贝即只克隆复制节点本身不克隆里面的子节点。 ② 如果括号参数为 true 则是深度拷贝会复制节点本身以及里面所有的子
《8》三种动态创建元素的区别
方法特点document.write()直接将内容写入页面的内容流但是文档执行完毕则会导致页面全部重绘element.innerHTML()将内容写入某某个DOM节点页面不重绘创建多个元素效率更高(不要拼接字符串采用数组形式拼接)结构稍微复杂document.createElement()创建多个元素效率低一些但是结构更清晰
三、DOM操作总结创建、增删改查、属性操作、事件操作API
为了能够使JS操作HTMLJS有一套自己的DOM编程接口对于HTML来说DOM使html形成了一颗DOM树
关于DOM操作主要是针对元素的操作主要有创建、增、删、改、查、属性操作、事件操作
1、创建
document.write
innerHTML
createElement2、增
appendChild
insertBefore3、删
removeChild4、改
src、href、title等 // 修改元素属性
innerHTML、innerText // 修改普通元素内容
value、type、disable等 // 修改表单元素
style、className // 修改元素样式5、查
getElementById、getElementsByTagName // DOM提供的API方法不推荐
querySelector、querySelectorAll // H5新增提倡
parentNode父、children子、previousElementSibling、nextElementSibling兄// 利用节点获取元素提倡6、属性操作
setAttribute // 设置dom的属性值
getAttribute // 得到dom的属性值
removeAttribute // 移出属性7、事件操作
鼠标事件触发条件onclick鼠标点击左键触发onmouseover鼠标经过触发onmouseout鼠标离开触发onfocus获得鼠标焦点触发onblur失去鼠标焦点触发onmousemove鼠标移动触发onmouseup鼠标弹起触发onmousedown鼠标按下触发
四、小案例
添加/删除留言
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}li a {float: right;}/style
/headbodytextarea name id/textareabutton发布/buttonul/ulscript// 1. 获取元素var btn document.querySelector(button);var text document.querySelector(textarea);var ul document.querySelector(ul);// 2. 注册事件btn.onclick function() {if (text.value ) {alert(您没有输入内容);return false;} else {// console.log(text.value);// (1) 创建元素var li document.createElement(li);// 先有li 才能赋值li.innerHTML text.value a hrefjavascript:;删除/a;// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);// (3) 删除元素 删除的是当前链接的li 它的父亲var as document.querySelectorAll(a);for (var i 0; i as.length; i) {as[i].onclick function() {// node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode;ul.removeChild(this.parentNode);}}}}/script
/body/html
