JavaScript 之 web API
1、获取元素
document.getElementById('标签的id值');
document.getElementsByTagName('标签名');
document.getElementsByClassName('标签的类名');
document.getElementsByName('标签的name值');
document.querySelector('选择器'); // 可以传多种 'ul li.active'
document.querySelectorAll('选择器');
2、操作元素
操作非表单元素
id title href src className innerHTML innerText
表单元素
value checked disable selected readOnly
操作自定义标签的属性
用户根据需求,自己给标签添加的自己定义的标签属性
<img src='wc.jpg' bigImg='bigWc.jpg' />
<!--bigImg='bigWc.jpg' 就是用户自定义的标签属性-->
操作方式:
节点对象.getAttribute('属性名')
节点对象.setAttribute('属性值','值')
节点对象.removeAttribute('属性值','值')
注意:自定义标签属性的操作只能够通过元素的getAtrribute、setAttribute、removeAttribute提供的方法操作。 不能直接通过元素点的方式直接获取或设置
3、操作元素样式
3.1、通过元素的style属性操作
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red'; // css→ background-color js→ backgroundColor
通过样式属性设置宽高、位置的属性类型是字符串,需要加上px。**
3.2、通过设置元素的className属性操作
var box = document.getElementById('box');
box.className = 'aa bb';//设置
box.className.replace('aa','AA');//替换
注意:元素的style属性适合操作单个样式,而元素className适合操作一组样式
4、节点之间的关系
元素节点.parentNode
节点.childNodes (包括文本节点和元素节点)
节点.children (仅仅是元素节点)
父节点.firstChild;
// 获取第一个元素子节点对象,有兼容问题IE9以下不支持:
父节点.firstElementChild
父节点.lastChild
// 获取最后一个元素子节点对象,有兼容问题IE9以下不支持
父节点.lastElementChild
节点.previousSibling;
// 获取上一个同级的元素节点,有兼容问题IE9以下不支持
节点.previousElementSibling;
节点.nextSibling;
// 获取下一个同级的元素节点,有兼容问题IE9以下不支持
节点.nextElementSibling;
5、动态创建、追加、删除元素
document.write('<h2>我是标题</h2>');
ul.innerHTML = ul.innerHTML + '<li><a href="#">我是新的li</a></li>';
var a = document.createElement('a');
父节点.appendChild(新的子节点);
父节点.insertBefore(新的节点,旧的子节点)
父节点.removeChild(子节点)
父节点.replaceChild(新的节点,旧的子节点)
6、事件
事件源.事件类型 = 事件处理程序
/*
功能:给元素注册事件
参数:
事件类型 字符串 注意:事件名不加on 如 'click'
事件处理程序 函数
是否捕获:可选,默认为false
*/
事件目标.addEventListener(事件类型,事件处理程序,是否捕获);
/*
功能:移除元素的指定事件程序
参数:
事件类型 字符串 注意:事件名不加on 如:'click'
事件处理程序:函数 注意:这里要把函数名传入过来
*/
事件目标.removeEventListener(事件类型,事件处理程序名称);
7、事件对象的公共属性和方法
事件对象.type -- 获取当前的事件名
事件对象.target -- 获取事件目标里最先触发事件的元素
事件对象.preventDefault() -- 阻止事件默认行为的执行
事件对象.stopPropagation() -- 停止冒泡
8、鼠标事件对象的属性
事件对象.clientX / 事件对象.clientY -- 鼠标在浏览器可视区域中的坐标
事件对象.offsetX / 事件对象.offsetY -- 获取鼠标在指定的元素的区域中的坐标
事件对象.pageX / 事件对象.pageY -- 获取鼠标在整个文档区域中的坐标
9、键盘事件对象的属性
事件对象.altKey -- 检测是否按下键盘上的 Alt键。 按下返回 true
事件对象.ctrlKey -- 检测是否按下键盘上的 Ctrl键。 按下返回 true
事件对象.shiftKey -- 检测是否按下键盘上的 Shift键。 按下返回 true
事件对象.keyCode -- 返回被敲击的键生成的 Unicode 字符码(ascii码),返回ascii码表对应的十进制的数字
10、事件委托
原理就是目标元素和事件冒泡,把事件注册到父元素或父级以上的元素上,等待子元素事件冒泡,并且在父元素或父级以上的元素注册的事件中能够 通过事件对象.target判断是哪个子元素,从而做相应处理。
① 给目标元素的父元素或父级以上的元素注册事件
② 在父元素或父级以上元素注册的事件中通过 事件对象.target判断是哪个子元素
③ 根据判断做出处理。
优点:提高程序性能,可以代理新动态添加的元素的事件。
// 获取div元素
var divNode = document.getElementById('box');
divNode.onclick = function(e){
// 获取最先触发的元素节点
var node = e.target;
// 节点对象.tagName 获取节点对象对应的标签名 返回的是大写
if(node.tagName.toLowerCase()=='p'){
alert(node.innerHTML);
}
}
最新文章
- asp.net 验证码(一)Session
- Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE
- CCActionManager
- 【函数】plsql 函数的默认值
- 5分钟学习maven
- 常用的MyEclipse快捷键
- ajax检查用户名
- 关于applicationx/www-form-urlencoded和multipart/form-data的描述
- 使用 ETag 和 Last-Modified 报头减轻服务器压力(转)
- Gradle 1.12 翻译——第十四章. 教程 - 杂七杂八
- VC POST表单——登录验证新浪邮箱
- 详解Java动态代理机制
- Linux 服务器如何配置网站以及绑定域名
- 标准3层神经网络搭建Demo
- 1.1.4 PROB Greedy Gift Givers
- SSL加速卡调研的原因及背景
- weblogic系列漏洞整理 -- 2. weblogic弱口令
- android项目结构
- asp.net core 2.1 post 无法提交参数?
- Artem and Array CodeForces - 442C (贪心)
热门文章
- vue-cli 局域网可访问配置
- Oracle 新建用户、赋予权限
- IDE一直在indexing, 造成系统卡死解决方法
- Linux学习43 CCNA网络知识-计算机网络基础
- axios实现类似form传值的格式,以及实现拦截器功能,response拦截实现权限判断
- P3045 [USACO12FEB]牛券Cow Coupons
- UVA - 11491 Erasing and Winning(奖品的价值)(贪心)
- WIN10怎么查看端口,并杀死进程
- POJ1338 &; POJ2545 &; POJ2591 &; POJ2247
- EUI库 - 10 - 使用自定义组件