html标签使用时特别注意,JavaScript怎么修改HTML标签属性-程序员宅基地
技术标签： html标签使用时特别注意
javascript修改属性的方法：首先使用getElementById()、getElementsByName()或getElementsByTagName()获取到DOM对象；然后使用“DOM对象.属性名=值;”来修改属性即可。
本教程操作环境：windows7系统、ECMAScript 5版、Dell G3电脑。
HTML DOM 对象
从 JavaScript 的观点来看，网页上的每个 HTML 标签都是一个 DOM 对象，标签的属性也是 DOM 对象的属性。如：
从 JavaScript 的观点来看，这个 标签是一个 Image 对象，它是 DOM 对象的一种。它的 id、src、width、border 属性的值已经指定，其它属性采用默认值。
利用 JavaScript 程序可以访问 DOM 对象，实际上就是用程序访问一个 HTML 标签。你可以通过编程修改一个 DOM 对象的属性，也就是用程序修改一个 HTML 标签的属性，使标签变得可控。
DOM 对象的属性通常与相应的 HTML 标签的属性相对应，名字通常也是相同的，但 DOM 对象的属性需区分大小写。比如 border 属性可以用在 、
有个别 DOM 属性的名字和 HTML 标签的属性名字不同，但它们实际上是同一个属性。比如 HTML 标签的 class 属性对应的 DOM 属性是className (注意大小写)。这是因为 class 是 JavaScript 保留字，而属性名是不能和保留字同名的。
还有一些 DOM 属性没有与之对应的 HTML 属性，比如 innerHTML 是一个 DOM 属性，它代表的是一个标签所包含的内容。利用这个属性可以修改一个 HTML 的开始标签和结束标签之间的内容。但对于 等单个标签，它所对应的 Image 对象没有 innerHTML 属性。
另外，DOM 对象还提供有方法，可以在程序中调用。
实际上，DOM 对象不是 JavaScript 特有的对象，它是一种跨平台的对象，有很多语言都提供了对 DOM 对象的访问支持。JavaScript 只是其中之一。
对象的获取
用 JavaScript 设置或修改一个 HTML 标签的属性时，首先要做的是获取这个标签所对应的 DOM 对象。常用的方法有：
1、用 id 获取 DOM 对象：
如果一个标签设置了 id 属性，我们可以利用 id 值访问这个标签，它的 JavaScript 代码代码为：
document.getElementById( id )
document 是一个 BOM 对象，它代表了当前的 HTML 文档；getElementById 是 Document 对象的一个方法；id 是网页中某个 HTML 标签的 id 属性值。
document.getElementById( id ) 的返回值是一个对象型数据，也就是一个 DOM 对象。
2、用 name 获取 DOM 对象：
如果一个标签设置了 name 属性，我们可以利用 name 值访问这个标签，它的 JavaScript 代码代码为：document.getElementsByName( name )
说明：在一个网页中，如果为标签设置 id 属性，则各个标签的 id 属性值不能相同，如果为标签设置 name 属性，则一个网页中可以有多个 name 属性值相同的标签。
所以 document.getElementsByName( name ) 的返回值不是单一的对象，而是一个 DOM 对象数组，它包含了本页中所有 name 值相同的那些标签。
3、用标签名获取 DOM 对象：
我们可以直接用标签名访问指定标签，它的JavaScript代码代码为：
document.getElementsByTagName( tagname )
说明：由于在一个网页中，同一种标签可以出现多次，所以 document.getElementsByTagName( tagname ) 的返回值也是一个 DOM 对象数组，它包含了本页中指定种类的所有标签。
比如：document.getElementsByTagName( "img" ) 返回的是一个 Image 对象数组，每个元素对应于网页中的一个 标签，数组中的元素按 标签出现的顺序排列。
比较以上三种方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接访问到网页中一个指定的 HTML 标签，这也是我们今后最常使用的方法。
设置或修改标签的属性
获取了一个 DOM 对象之后，我们可以为该对象的属性进行赋值，从而修改了它所对应标签的属性值。一般方法是：
DOM对象.属性名 = 值;
DOM 对象的属性名通常和HTML标签的属性名相同，但它要区分大小写，所以在书写时要特别注意。
例1：
border="0"
border="1"
border="3"
border="8"
function setBorder( n )
{
document.getElementById( "image1" ).border = n;
}
本例可以通过按钮修改 标签的 border 属性的值。
首先，为了可以访问这个 标签，为它定义了 id="image1" 属性。
在按钮中，利用事件句柄 onclick 响应鼠标单击事件，调用 JS 函数 setBorder()。
在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取 标签对应的 Image 对象，并为它的 border 属性设置新值。
例2：欢迎光临！
改变方向
var dir = "left";
function setDir()
{
dir = (dir=="left") ? "right" : "left";
document.getElementById( "Mar" ).direction = dir;
}
本例利用按钮修改 标签的 direction 属性的值。
标签没有指定 direction 属性时，其默认值为“left”。利用 JS 程序可以修改它的值。
智能推荐
CALayer的子类之CAShapeLayer-程序员宅基地
文章浏览阅读198次。一，CAShapeLayer介绍* CAShapeLayer继承自CALayer，属于QuartzCore框架，可使用CALayer的所有属性。 CAShapeLayer是在坐标系内绘制贝塞尔曲线的，通过绘制贝塞尔曲线，设置shape(形状)的path(路径)，从而绘制各种各样的图形以及不规则图形。因此，使用CAShapeLayer需要与UIBezierPath一起使用。 UIBezie..._kcalinejoinbevel
GeoTools，GIS的另一个基础设施~_gt-referencing-程序员宅基地
文章浏览阅读847次。About GeoToolsGeoTools is an open source (LGPL) Java code library which provides standards compliant methods for the manipulation of geospatial data, for example to implement Geographic Information Systems (GIS). The GeoTools library implements Open Geo_gt-referencing
2022华为Android面试真题解，2022最新阿里Android高级面试题及答案_华为安卓面试-程序员宅基地
文章浏览阅读1.9k次。前言职场的金九银十跳槽季火热进行中，不同的是，今年的竞争比往年会更加激烈一些，形式更加严峻一些。对于求职者来说，面试是一道坎，很多人会恐惧面试，即使是工作很多年的老鸟，也可能存在面试焦虑。大家多多少少可能都听到或看到一些信息，就是好多公司在优化裁员，但是也有很多大厂放出了“扩招”的信息，比如腾讯，比如字节跳动。让我们来一起看看腾讯微视第三面，面试官都问了什么呢？你能答上来多少？ArrayList的使用，然后问他ArrayList使用过程中有没有遇到过坑；还问了HashMap，问了差不多2_华为安卓面试
最近公共祖先算法（LCA）-程序员宅基地
文章浏览阅读1.7k次。发现网上对此算法真是多之又多，看了几个小时才算看懂。 写下我的理解思路，首先，LCA要用到并查集和深度优先搜索，其中并查集用来查找和合并各个节点集合，深度优先搜索用了搜索问题节点是否在同一个集合中。其实就是递归。（1）：其中递的过程：首先算法从根开始，对每一棵子树进行深度优先搜索，访问根时，将创建由根结点构建的集合，然后把根节点的祖先设为自身，然后遍历该节点的每个子节点，也就是该节点的其他_公共祖先算法
如何面试Java中级开发（16k）试题讲解和Java学习_如何面试中级开发-程序员宅基地
文章浏览阅读1.3k次。面试题：HashMap底层实现原理，红黑树，B+树，B树的结构原理，volatile关键字，CAS（比较与交换）实现原理Spring的AOP和IOC是什么？使用场景有哪些？Spring事务，事务的属性，传播行为，数据库隔离级别Spring和SpringMVC，MyBatis以及SpringBoot的注解分别有哪些？SpringMVC的工作原理，SpringBoot框架的优点，MyBatis框架的优点SpringCould组件有哪些，他们的作用是什么？（说七八个）微服务的CAP是什么？BASE是什么？_如何面试中级开发
Android Studio 代理问题总结(Gradle代理,模拟器代理)_andorid studio 模拟器走本地代理-程序员宅基地
文章浏览阅读1.3w次，点赞5次，收藏11次。Android Studio 的 代理 和 gradle的代理 和 AVD模拟器 代理_andorid studio 模拟器走本地代理
随便推点
mysql中net start mysql57出现服务无法启动显现-程序员宅基地
文章浏览阅读3.1k次，点赞3次，收藏4次。首先问题的出现有很多情况，如下只是针对我自己电脑发生的情况做总结，希望可以帮到有需要的小伙伴。我是刚接触mysql的小白，跟着康老师学的。因为mysql5的版本无法解析中文字符，每次添加中文数据都需要用到utf8，于是打算配置文件，让输入中文可以得到识别，不用每次都去打utf8。他第9节的时候配置了my.ini文件，如下结果就出现了net start mysql57出现服务无法启动显现的情形。后面我在用到net stop mysql57关闭服务后，打算用net start m..._net start mysql57
php中遍历数组_遍历PHP数组的6种方式-程序员宅基地
文章浏览阅读365次。在PHP的日常操作中，数组是最常出现的结构，而我们几乎每天都在处理数组相关的内容。那么问题来了，你一般怎么遍历并处理数组。1、foreach很熟悉吧，是不是你的最爱？$arr = ['a', 'b', 'c'];foreach ($arr as $key => $value) {$arr[$key] = $value . '_i';}print_r($arr); // ['a_i', 'b_..._php 数组元素遍历处理
webstorm 2019 最新注册码 破解方法（持续更新中~_webdriver 2019 license-程序员宅基地
文章浏览阅读1.7w次。webstorm 对咱们前端来说是无人不知无人不晓，那么下面就安利一下webstorm的注册方法吧。2019-2-21更新（注册码激活）：访问http://idea.lanyus.com/按照箭头顺序操作即可。第一步，下载资源JetbrainsIdesCrack-4.2-release-enc.jar，第二步，修改文件，1.、2...._webdriver 2019 license
hive的使用及基本操作完整版_hive使用-程序员宅基地
文章浏览阅读8.8k次，点赞9次，收藏22次。安装mysql、hive步骤一、什么是hiveHive是基于Hadoop的一个数据仓库工具(离线)，可以将结构化的数据文件映射为一张数据库表，并提供类SQL查询功能。操作接口采用类SQL语法，提供快速开发的能力， 避免了去写MapReduce，减少开发人员的学习成本， 功能扩展很方便。用于解决海量结构化日志的数据统计。本质是：将 HQL 转化成 MapReduce 程序1、优缺点优点：1) 操作接口采用类 SQL 语法，提供快速开发的能力（简单、容易上手）。 2) 避免了去写 MapR_hive使用
课堂笔记day1__基础_编写main方法,声明一个product对象数组products-程序员宅基地
文章浏览阅读540次。运算符的优先级：顺序运算符1括号 ()2一元运算符 ++、-- 和 !3算术运算符 +、-、*、/、%4关系运算符 >、>=、<、<=、==和 !=5逻辑运算符 &&（与） 、或者6条件运算符和赋值运算符 ? : 、=、*=、/=、+=、-=注意：顺序5的地方 或者（||）..._编写main方法,声明一个product对象数组products
关于CountDownLatch和CyclicBarrier的认识_关于cyclicbarrier和countdownlatch说法正确的是-程序员宅基地
文章浏览阅读917次。**关于CountDownLatch的认识** 今天在浏览论坛的时候发现了一个有趣的东西，自己之前没有用过，在此记录一下，一遍日后阅读浏览， 作为程序员，尤其使一个已近做了3年的java程序员来说，总感觉自己都会了，其实自己稍微看看又发现自己咋又不知道呢， 这个也是我的感慨，应为即将面临这找工作，自己还有有一点压力的，还是比较怕技术面试的，不知道面试官会问哪些奇怪的问题，这些问题又是我不知道的_关于cyclicbarrier和countdownlatch说法正确的是