DOM属性和事件

Posted lvlisn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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代码
 1 <script>
 2 var btn=document.getElementById("btn");
 3 btn.onclick=function()
 4     //判断如果按钮时锁定,则显示为解锁,变为灰色,否则显示为锁定,变为蓝色
 5     if(this.className=="lock")
 6         this.className="unlock";
 7         this.innerHTML="解锁";
 8         this.style.backgrouncolor="gray";
 9     else
10         this.className="lock";
11     this.innerHTML="锁定";
12     
13     
14 
15 </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属性和事件的主要内容,如果未能解决你的问题,请参考以下文章

事件注册 DOM事件流 事件对象(常用属性,方法) 事件委派(鼠标,键盘事件对象)

传统的DOM0级事件处理程序

js DOM注册事件修改标签属性和样式

DOM 就绪事件之前的 URL 属性

如何优雅的封装一个DOM事件库

DOM 事件深入浅出