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属性和事件的更多相关文章

  1. JS DOM属性+JS事件

    DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 e ...

  2. HTML DOM Document对象 元素对象 属性对象 事件对象

    DOM Document对象 DOM 元素 对象 DOM 属性 对象 DOM 事件 菜鸟教程上 总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...

  3. DOM中的事件对象

    三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...

  4. [ javascript html Dom image 对象事件加载方式 ] 对象事件加载方式

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  5. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  6. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  7. Chrome插件Visual Event查看Dom元素绑定事件的利器

    找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...

  8. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

  9. DOM中的事件对象和IE事件对象

    DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明  bubles Boolean 只读  表明事件是否冒泡  cancleBubble Boolean ...

随机推荐

  1. python安装报错error writing to file:......

    今天换了win10 64电脑,安装python3.6.8时,报错:error writing to file:...... 安装时,右键--以管理员身份运行,安装成功.

  2. 有色物体检测opencv+python

    import cv2 import numpy as np import matplotlib.pyplot as plt cap=cv2.VideoCapture(0) while(1): ret, ...

  3. 白鹭http请求post

    示例demo: //new http请求 var request = new egret.HttpRequest(); //请求参数 var params = "p1=postP1& ...

  4. legend3---Homestead常用操作代码

    legend3---Homestead常用操作代码 一.总结 一句话总结: 在虚拟机里面改变文件windows里面也会变,在windows里面改变虚拟机里面也会变,所以可以在windows里面编程或者 ...

  5. oracle em启动问题

    这种情况出现的可能性是(1)主机IP地址改变,(2)主机名改变,(3)移植到全新的主机,(4)监听程序未启动,5)oracle服务也检查一下 关于orcl的启动: emctl start dbcons ...

  6. Android传感器【转】

    本文转载自:http://blog.csdn.net/ffmxnjm/article/details/52101592?locationNum=3&fps=1 传感器的意义 事实上,目前智能手 ...

  7. Mybaits成长之路

    今天刚开始接触mybaits,接下来介绍mybaits的demo的建立 1根据数据库表定义一个实体类Employee package com.atguigu.mybatis.bean; public ...

  8. python正则表达式 分割字符串

    使用或 标准的正则表达式有小括号,但是python的没有 # -*- coding: utf-8 -*- import sys import re import sys reload(sys) sys ...

  9. Selenium IDE环境部署

    摘自https://blog.csdn.net/ywyxb/article/details/59103683 Selenium IDE环境部署 - Firefox浏览器 Firefox-ESR版本下载 ...

  10. JDK1.7安装配置环境变量+图文说明Jmeter安装

    Jmeter通常用于并发测试,本文介绍Jmeter工具的安装步骤. 工具/原料   WIN7 Jmeter安装包 JDK 一.安装JDK   1 [步骤一]安装jdk 1.下载jdk,到官网下载jdk ...