DOM属性和事件
1-22 DOM属性设置与获取
1、获取属性：
getAttribute("attribute")；
var p = document.getElementById("text");
// 获取p标签本身具有的id和align属性：
// 方法：*.id、*.align(class属性除外)
console.log(p.id);
console.log(p.align);
// 如果想获取自定义的属性，得用此方法：
console.log(p.getAttribute("data-opq"));
var input = document.getElementById("user");
console.log(user.name);
2、设置属性：
// 给p标签设置一个data-color属性：
p.setAttribute("data-color","red");//p.setAttribute("属性名","属性值")
user.setAttribute("isRead","false");
3、 删除属性：
p.removeAttribute("align");
· 2-9 DOM0级事件
DOM0级事件
语法：ele.事件 = 执行脚本
功能：在DOM对象上绑定事件
说明：执行脚本可以使一个匿名函数，也可以是一个函数的调用，如果调用函数，语法是：ele.事件=函数名，不加括号；
不建议使用HTML事件原因： 1.多元素绑定相同事件时，效率低 2.不建议在HTML元素中写JS代码
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
//判断如果按钮时锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色
if(this.className=="lock"){
this.className="unlock";
this.innerHTML="解锁";
this.style.backgrouncolor="gray";
}else{
this.className="lock";
this.innerHTML="锁定";
} }
</script>
</style>
<body>
<div id="btn" class="lock">锁定</div>
</body>
<script>
var btn=document.getElementById("btn");
function clickBtn(){
alert("我是按钮");
}
//点击按钮调用clickBtn这个函数
btn.onclick=clickBtn;//此时调用的不是匿名函数时不要写小括号
</script>
原图在这
DOM属性和事件的更多相关文章
- JS DOM属性+JS事件
DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 e ...
- HTML DOM Document对象 元素对象 属性对象 事件对象
DOM Document对象 DOM 元素 对象 DOM 属性 对象 DOM 事件 菜鸟教程上 总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...
- DOM中的事件对象
三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...
- [ javascript html Dom image 对象事件加载方式 ] 对象事件加载方式
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- Chrome插件Visual Event查看Dom元素绑定事件的利器
找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- DOM中的事件对象和IE事件对象
DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明 bubles Boolean 只读 表明事件是否冒泡 cancleBubble Boolean ...
随机推荐
- 序列式容器————dequeue
#include <deque> 双端队列,可以在队头队尾进行入队出队操作 deque<int> q; q.empty(); q.push_front(s);//将s插入到队头 ...
- 3D Computer Grapihcs Using OpenGL - 16 使用DrawElementsInstanced绘制立方体
我们使用15节学到的知识来绘制14节的立方体. 在第14节我们使用了两次glDrawElements实现了OpenGL实例化,发现这样仍然不太方便,如果需要绘制成千上万的立方体,就需要手写成千上万次的 ...
- js中Array方法归类解析
为什么要对Array方法进行归类解析 因为它常用,而且面试必问 改变原数组的方法 pop 删除并返回数组最后一个元素push 从末尾给数组添加元素,返回新数组length值reverse 颠倒数组元素 ...
- OOM和SOF代码
OutOfMemoryError大数组,例如图片加载. public class MockOutOfMemoryError { public static void main(String[] arg ...
- 20165218 《网络对抗技术》 Exp9 网络安全基础
Exp9 网络完全基础 基础问题回答 SQL注入攻击原理,如何防御 所谓SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. ...
- laravel Route::resource() 资源路由
格式: Route::resource('/order', 'OrderController', ['as' => 'admin']); 框架自动创建路由及其对应控制器中的方法: 请求方式 路由 ...
- Mybaits查询返回值是List类型的
查询返回值是list类型的 1 首先在接口中写方法 public interface EmployeeMapper { public List<Employee> getEmpsByLas ...
- k8s 添加ingress 暴露服务
vim file.yaml apiVersion: extensions/v1beta1 kind: Ingress metadata: name: pgadmin labels: k8s-app: ...
- 九、SpringBoot集成Thymeleaf模板引擎
Thymeleaf咋读!??? 呵呵,是不是一脸懵逼...哥用我的大学四级英文知识告诉你吧:[θaimlif]. 啥玩意?不会音标?...那你就这样叫它吧:“赛母李府”,大部分中国人是听不出破绽的.. ...
- 安装 Windows 系统在 NVMe 规范的 M.2 接口的固态硬盘（SSD）上
作为一个程序员很重要的一项技能就是装系统 @_@,以前我都是随便用网上的工具做个系统盘,每次要用直接随手就搞好了,节省大家时间. 但最近同事装了个贼小的固态,然后我启动盘里的系统果断识别不出来他的固态 ...