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代码

 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>

原图在这