.和[]

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. VS2019 配置opencv4.4

    安装VS2019 参考:链接 下载opencv 链接 下载此时的最新版4.4.0 最后"上墙"下,不然很慢! 安装opencv 我的安装位置是:D:\soft\opencv\ins ...

  2. 发布MeteoInfo 1.2.8

    增加了对SYNOP数据的支持(功能从C#版移植过来).数据可以从这里下载:http://weather.cod.edu/digatmos/syn/SYNOP数据搞气象的人应该多少知道些,类似MICAP ...

  3. linux(centos8):用sort对文本内容排序

    一,sort的用途 1,作用: sort命令用于将文本文件内容加以排序. 它能够以行为单位来排序 2,sort常与uniq搭配使用,原因: 用uniq命令去重时, 需要相同的每行位置相邻才能生效, 所 ...

  4. 第十七章 DNS原理

    一.DNS的相关介绍 1.主机名与IP地址映射需求 1)IP地址难于记忆 2)能否用便于记忆的名字来映射IP地址? 2.hosts文件 1)hosts文件记录了主机名和IP地址的对应信息 2)host ...

  5. 第三十五章 Linux常规练习题（二）参考答案

    一.练习题一 1.删除用户基本组shanghai03.发现无法正常删除,怎样才能将其删除掉,不能删除用户. groupdel shanghai03 移除其所属组的用户 2.打开多个xshell窗口连接 ...

  6. CPU 底层运算之乘法运算

    CPU 运算加减法运算 假设计算  3+3  原码是0011 * 0011(以4位存贮单元,因为是原码,最高位不代表符号位) 1. 首先 判断 两个加数是否有 负数(减法)  如果有 负数 先将负数转 ...

  7. 边界层吞吸技术（BLI）

    气流在机体表面前进时,由于受到摩擦,其速度会不断降低,从而会产生湍流甚至气流分离,而流动分离又会造成大量紊流.涡,使升力大量损失,同时也会造成阻力急剧增加.边界层吞吸技术就是一种对附面层气流" ...

  8. Java编程思想 笔记

    date: 2019-09-06 15:10:00 updated: 2019-09-24 08:30:00 Java编程思想 笔记 1. 四类访问权限修饰词 \ 类内部 本包 子类 其他包 publ ...

  9. origin把点图和线图放在一起

    首先分别做好点图和线图在两个graph中,然后选中其中一副图(点图或者线图),然后按下图选择: 如果有多个图,可以在弹出窗口中选择多个sheet.

  10. eclipse中将java项目变成web项目

    今天,用Eclipse开发项目的时候,把一个Web项目导入到Eclipse里会变成了一个java工程,将无法在Tomcat中进行部署运行. 方法: 1.找到.project文件,找到里面的<na ...