DOM属性操作
HTML attribute --> DOM property
每个html属性都对应一个DOM对象属性,举个栗子:
- <div>
- <label for="userName">用户名:</label>
- <input id="userName" type="text" class="u-txt" />
- </div>
HTML | DOM |
input.id | input.id |
input.type | input.type |
input.class | input.className |
label.for | label.htmlFor |
读
- input.className // “u-txt”
- input[“id”] // ”userName”
写
类型
input.
属性名 | 返回值 | 返回值类型 |
className | “u-txt” | String |
maxLength | 10 | Number |
disabled | true | Boolean |
onclick | function onclick(event){ … } | Function |
✘通用性--名字异常: 由于一些属性名与关键字重合,所以不能直接使用属性名访问,如class就会变成className
✘ 扩展性
✔实用对象
g/setAttribute
读
var attribute=element.getAttribute(attributeName);
- <div>
- <label for="userName">用户名:</label>
- <input id="userName" type="text" class="u-txt">
- </div>
- input.getAttribute("class"); //"u-txt"
写
element.setAttribute(name,value);
- <div>
- <label for="userName">用户名:</label>
- <input id="userName" type="text" class="u-txt">
- </div>
- input.setAttribute("value","757617012@qq.com");
- input.setAttribute("disabled",""); //在html中,布尔型的属性只要出现默认是true
类型
- <input class="u-txt"
- maxlength="10"
- disabled
- onclick="showSuggest();">
input.getAttribute(“ 属性字符串
属性名 | 返回值 | 返回值类型 |
class | “u-txt” | String |
maxlength | “10” | String |
disabled | “” | String |
onclick | “showSuggest();” | String |
”)
- button.disabled = true; //设置 『属性』
- button.setAttribute('class','disabled'); //通过方法 指定 『属性字符串:属性值字符串』
DOM属性操作的更多相关文章
- jQuery属性操作之DOM属性操作
DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...
- DOM——属性操作
属性操作 非表单元素的属性 href.title.id.src.className var link = document.getElementById('link'); console.log(l ...
- DOM 属性操作
1 属性节点 2 attribute操作 3 value获取值操作 4 class的操作 5 指定CSS操作 1.属性节点 //获取文本节点的值 var divEle = document.getEl ...
- JQuery DOM操作(属性操作/样式操作/文档过滤)
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- DOM样式操作
CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...
- jQuery源代码学习之八——jQuery属性操作模块
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...
- Python全栈开发之路 【第十六篇】:jQuey的动画效果、属性操作、文档操作、input的value
01-动画效果 show 显示 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数: speed:三种预定速度之一的字符串('slow','normal','fast')或 ...
- 前端 ----jQuery的属性操作
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...
- 04-jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
随机推荐
- javascript类型注意事项
以下是javascript类型的注意事项: null:表示尚未存在的对象,注意,尽管尚未存在,也是个对象啊,所以用typeof检测一个null值变量的结果是Object:不过,为了便于写if语句,在j ...
- Model元数据定制与Model模板
元数据这一词对于计算机科学来说不算陌生,对元数据的解释最简单的解释就是描述数据的数据,那么Model元数据当然是描述Model中各种成员的数据了,在ASP.NET MVC中ModelMetadata这 ...
- Asp.Net WebForm和MVC同样优秀!
不是说MVC不好,而是WebForm并没有那么不堪,和Mvc同样优秀.对说WebForm缺点多的,表示不服,求指教,虽然本人有些见解可能比较浅薄. 看过很多文章和书籍,都会拿MVC模式和WebForm ...
- android The connection to adb is down 错误信息
之前运行eclipse执行android应用都没问题,今天突然出问题了,控制台报错: The connection to adb is down, and a severe error has occ ...
- ab网站压力测试
ab网站压力测试命令的参数.输出结果的中文注解 permalink 以前安装好APACHE总是不知道该如何测试APACHE的性能,现在总算找到一个测试工具了.就是APACHE自带的测试工具AB( ...
- jquery 删除cookie失效的解决方法
最近在做网站退出功能的时候出现删除Cookie 的时候总是失效. 1.使用$.cookie("name",""); 结果出来是生成了一个新的空值的cookie ...
- ASP.NET中的随机密码生成
第一种方法:用.NET中的 Sytem.Guid.NewGuid().ToString() 生成,实际上是对一个128bit数字的十六进制输出.生成的字符由0-9和a-z这几种字符组成,也可能会有“- ...
- 【Java每日一题】20161107
package Nov2016; import java.util.List; public class Ques1107 { public static void main(String[] arg ...
- Apache运行python cgi程序
Apache运行python cgi程序 环境 win10 x64 专业版 Apache2.4 python 2.7 Apache安装和配置 Apache服务器的安装请自行搜索.在Apache2.4中 ...
- 操作系统与c语言
以下是根据看书后的理解做的总结: 最早,unix是使用汇编编写,但是非常简单.后来觉得汇编,换种机器又得重新用另外一种机器汇编重写,太麻烦.于是想设计一种通用的语言,到各种机器上都能运行 当时 ...