.和[]

javaScript.和[]既可以对所有js对象设置属性，但是对于DOM对象它设置的属性有些特殊。对于元素DOM标准属性，实现属性值的设置/更改;对于元素DOM非标准属性，仅在js中有效，在(标准浏览器中)HTML中无效。

setAttribute()

设置指定元素上的某个属性值。如果属性已经存在，则更新该值;否则，使用指定的名称和值添加一个新的属性。

要获取某个属性当前的值，可使用 getAttribute();要删除某个属性，可使用 removeAttribute();要获取该自定义属性的属性值，可以使用getAttribute();

语法：

element.setAttribute(name,value)

属性说明：

name——表示属性名称的字符串。

value——属性的值/新值。

（.）、（[]）、（getAttribute()）的区别

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="UTF-8">

</head>

<style>

</style>

<script>

    window.onload = function () {

        var oImage=document.getElementById('image');

        var simg='weimob';

        console.log(oImage.alt);//=>'微盟百度品专大图'

        console.log(oImage['alt']);//=>'微盟百度品专大图'

        console.log(oImage.getAttribute('alt'));//=>'微盟百度品专大图'  

    }

</script>

<body>

    <div id='div1'>

          <img id='image'   class='image' src='./images/1.jpg' alt='微盟百度品专大图'  width='500' height='auto'/>

    </div>

</body>

</html>

在元素的DOM对象的class属性上需要注意，由于class是JavaScript中的保留字，采用(.)和([])获取/设置class属性值时，需要变为className，而采用getAttribute()/setAttribute()则需要直接写class的字符串。

示例

var oImage=document.getElementById('image');

var simg='weimob';

console.log(oImage.className);//=>'image'

console.log(oImage['className']);//=>'image'

console.log(oImage.getAttribute('class'));//=>'image'

JavaScript中.、[]与setAttribute()在设置属性上的区别的更多相关文章

  1. 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  2. JavaScript中易混淆的DOM属性及方法对比

    JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...

  3. JavaScript中四种不同的属性检测方式比较

    JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...

  4. JavaScript 中定义变量时有无var声明的区别

    关于JavaScript中定义变量时有无var声明的区别 var a=5; //正确 a=5; //正确 在javascript中,以上两种方法都是定义变量的正确方法.微软的Script56.CHM中 ...

  5. JavaScript中querySelector()和getElementById()（getXXXByXX）的区别

    在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelecto ...

  6. JavaScript中如何给按钮设置隐藏与显示属性

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...

  7. JavaScript中的setAttribute用法

    我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题. setAttribute(string nam ...

  8. JavaScript中闭包实现的私有属性的getter()和setter()方法

    注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  9. JavaScript中Function原型及其prototype属性的简单应用

    大家都知道在JavaScript中是没有类的概念的,但是却是有对象的概念的.有的人可能理解对象和类有些迷糊,这里简单的概括一下他们之间的区别: 类:抽象的概念,例如人,动物,汽车等都可以抽象成一个类 ...

随机推荐

  1. 透视HTTPS建造固若金汤的城堡

    为什么有 HTTPS?因为 HTTP 不安全! 现在的互联网已经不再是 "田园时代","黑暗森林" 已经到来.上网的记录会被轻易截获,网站是否真实也无法验证,黑 ...

  2. .NET Core使用FluentEmail发送邮件

    前言 在实际的项目开发中,我们会遇到许多需要通过程序发送邮件的场景,比如异常报警.消息.进度通知等等.一般情况下我们使用原生的SmtpClient类库居多,它能满足我们绝大多数场景.但是使用起来不够简 ...

  3. SpringBoot使用activiti自定义流程demo解析

    环境搭建[这里直接讲解自定义流程] 集成 Activiti Modeler 下载源码 我这里选用的是 Activiti 5.23.0 版本的页面,下载 zip,解压 Activiti 5.23.0 源 ...

  4. SpringBoot多任务Quartz动态管理Scheduler，时间配置，页面+源码

    页面展现 后台任务处理:恢复任务 15s执行一次后台打印消息 不BB了,直接上代码 import... /** * 调度工厂类 * Created by jinyu on 2018/4/14/014. ...

  5. 无法访问GitHub

    我们开发者经常用的最大的同性交流平台--GitHub忽然访问不了了,很尴尬 可以打开控制台 ping一下 github.com 果不其然 不通 不过幸运的是里面有github的ip地址,好像是美国某个 ...

  6. 【贪心算法】CF3D Least Cost Bracket Sequence

    题目大意 洛谷链接 给一个序列,序列里面会有左括号.问号.右括号.对于一个?而言,可以将其替换为一个(,也可以替换成一个),但是都有相应的代价.问:如何替换使得代价最小.前提是替换之后的序列中,括号是 ...

  7. Storm入门教程汇总

    http://www.aboutyun.com/thread-8059-1-1.html

  8. 单元测试之道Java版——读书笔记

    单元测试知道Java版读书笔记 首先我们必须要知道我们所写的代码,它的功能是什么,如果我们不了解代码的行为,那么也就无从测试. 我们测试的目的,是为了我们整个程序架构的稳定,代码其实就是欧文要实现功能 ...

  9. Anderson《空气动力学基础》5th读书笔记导航

    没错,在2018年,我正式启程了安德森教授这本空气动力学圣经的阅读,为了深入理解概念,特写此刊,边读边写,2020年一定写完,写不完我就/￥@%￥---! 以下是导航: 第一章任务图: 第一章思维导图 ...

  10. 2020主流国产BI产品对比

    国产BI软件由于具备较强的本土特性,可以很好地适应国内用户的使用习惯,越来越多被国内用户使用.目前国内BI产品很多,可谓百家争鸣,如何从众多的BI产品中选择适合自己的呢?这里我们对比一下目前国内主流的 ...