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. PCL智能指针疑云 <一>

    背景: 最近写了一个包,使用ndt算法拼接点云,构建三维壁面环境的点云地图. 设计一个lidar类,表征激光雷达.可以获取点云数据并存储到容器 std::vector<PointCloudPtr ...

  2. 实现mypwd(选做）

    实现mypwd(选做) 任务清单 1 学习pwd命令 2 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 实现mypwd 4 测试mypwd (一)pwd命令的学习 1.pw ...

  3. java学习之- 创建线程run和start特点

    标签(空格分隔): run,start 为什么做run方法的覆盖? 1.Thread类用于描述线程,该类就定义一个功能用于存储线程要运行的代码,该存储功能就是run方法: 也就是说Thread种的ru ...

  4. 3、electron打包生成exe文件

    打包方式1:DOS窗口命令打包 DOS 下,输入 npm install electron-packager -g全局安装我们的打包神器: cnpm install electron-packager ...

  5. ubuntu通过windows下的ccproxy代理上网

    网上教程很多,需要注意的是将ubuntu的ip和windows的Ip设置到同一个网段,即子网掩码是1的对应的部分要相同.由于没有配置到同一个网段,折腾了我好久.

  6. 利用Git版本控制管理你的项目

    准备工作 项目创建完成后,将项目版本控制起来,今后每个版本的迭代会非常清楚,同时也有助于项目进行协同开发. 还有一个十分重要的问题是:项目上线后,线上的运行的程序的配置与线下进行测试的配置文件是不一样 ...

  7. C#接口的实现和继承实践

    1.基本概念 接口是一种契约规范,类似于抽象基类.包括方法,属性,索引器和事件作为成员,这些成员只是作为定义,并不在接口中具体实现. 接口创建时注意以下事项: 继承接口的任何非抽象类都必须实现接口的所 ...

  8. $.ajax函数调接口，报异常No converter found for return value of type: class java.util.ArrayList

    接口正常执行,返回给前端后报服务器500异常,异常详情: org.springframework.http.converter.HttpMessageNotWritableException: No ...

  9. Linux_Samba详解

    目录 目录 Samba Server Parameter Configuration file explain Setup the Samba Server Access the samba shar ...

  10. 读取yaml中的内容

    def read_yml(path): """ 读取yml文件中的数据 :param path: 文件yaml 的路径 :return: 返回读取yaml文件内的结果 & ...