HTML attribute  --> DOM property

每个html属性都对应一个DOM对象属性,举个栗子:

  1. <div>
  2. <label for="userName">用户名:</label>
  3. <input id="userName" type="text" class="u-txt" />
  4. </div>
HTML DOM
input.id input.id
input.type input.type
input.class input.className
label.for label.htmlFor

  1. input.className // “u-txt”
  2.  
  3. 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);

  1. <div>
  2. <label for="userName">用户名:</label>
  3. <input id="userName" type="text" class="u-txt">
  4. </div>
  1. input.getAttribute("class"); //"u-txt"

element.setAttribute(name,value);

  1. <div>
  2. <label for="userName">用户名:</label>
  3. <input id="userName" type="text" class="u-txt">
  4. </div>
  1. input.setAttribute("value","757617012@qq.com");
  2. input.setAttribute("disabled",""); //在html中,布尔型的属性只要出现默认是true

类型

  1. <input class="u-txt"
  2. maxlength="10"
  3. disabled
  4. onclick="showSuggest();">

input.getAttribute(“ 属性字符串

属性名 返回值 返回值类型
class “u-txt” String
maxlength “10” String
disabled “” String
onclick “showSuggest();” String

”)

举个栗子(用两种方法将button设置为『不可点击』):
  1. button.disabled = true; //设置 『属性』
  2. button.setAttribute('class','disabled'); //通过方法 指定 『属性字符串:属性值字符串』

DOM属性操作的更多相关文章

  1. jQuery属性操作之DOM属性操作

    DOM属性操作是对DOM元素的属性进行读取.设置和移除操作, 比如prop(). removeProp(). 1. prop() 1.1 使用prop()获取返回值 prop() 用于返回属性值时, ...

  2. DOM——属性操作

    属性操作 非表单元素的属性 href.title.id.src.className  var link = document.getElementById('link'); console.log(l ...

  3. DOM 属性操作

    1 属性节点 2 attribute操作 3 value获取值操作 4 class的操作 5 指定CSS操作 1.属性节点 //获取文本节点的值 var divEle = document.getEl ...

  4. JQuery DOM操作(属性操作/样式操作/文档过滤)

    jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...

  5. DOM样式操作

    CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...

  6. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  7. Python全栈开发之路 【第十六篇】:jQuey的动画效果、属性操作、文档操作、input的value

    01-动画效果 show 显示 概念:显示隐藏的匹配元素 语法:show(speed,callback) 参数: speed:三种预定速度之一的字符串('slow','normal','fast')或 ...

  8. 前端 ----jQuery的属性操作

    04-jQuery的属性操作   jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如 ...

  9. 04-jQuery的属性操作

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...

随机推荐

  1. javascript类型注意事项

    以下是javascript类型的注意事项: null:表示尚未存在的对象,注意,尽管尚未存在,也是个对象啊,所以用typeof检测一个null值变量的结果是Object:不过,为了便于写if语句,在j ...

  2. Model元数据定制与Model模板

    元数据这一词对于计算机科学来说不算陌生,对元数据的解释最简单的解释就是描述数据的数据,那么Model元数据当然是描述Model中各种成员的数据了,在ASP.NET MVC中ModelMetadata这 ...

  3. Asp.Net WebForm和MVC同样优秀!

    不是说MVC不好,而是WebForm并没有那么不堪,和Mvc同样优秀.对说WebForm缺点多的,表示不服,求指教,虽然本人有些见解可能比较浅薄. 看过很多文章和书籍,都会拿MVC模式和WebForm ...

  4. android The connection to adb is down 错误信息

    之前运行eclipse执行android应用都没问题,今天突然出问题了,控制台报错: The connection to adb is down, and a severe error has occ ...

  5. ab网站压力测试

    ab网站压力测试命令的参数.输出结果的中文注解    permalink 以前安装好APACHE总是不知道该如何测试APACHE的性能,现在总算找到一个测试工具了.就是APACHE自带的测试工具AB( ...

  6. jquery 删除cookie失效的解决方法

    最近在做网站退出功能的时候出现删除Cookie 的时候总是失效. 1.使用$.cookie("name","");  结果出来是生成了一个新的空值的cookie ...

  7. ASP.NET中的随机密码生成

    第一种方法:用.NET中的 Sytem.Guid.NewGuid().ToString() 生成,实际上是对一个128bit数字的十六进制输出.生成的字符由0-9和a-z这几种字符组成,也可能会有“- ...

  8. 【Java每日一题】20161107

    package Nov2016; import java.util.List; public class Ques1107 { public static void main(String[] arg ...

  9. Apache运行python cgi程序

    Apache运行python cgi程序 环境 win10 x64 专业版 Apache2.4 python 2.7 Apache安装和配置 Apache服务器的安装请自行搜索.在Apache2.4中 ...

  10. 操作系统与c语言

      以下是根据看书后的理解做的总结:   最早,unix是使用汇编编写,但是非常简单.后来觉得汇编,换种机器又得重新用另外一种机器汇编重写,太麻烦.于是想设计一种通用的语言,到各种机器上都能运行 当时 ...