removeAttribute getAttribute setAttribute
1.removeAttribute() 方法删除指定的属性。
注:removeAttributeNode() 方法从元素中删除指定的属性节点。
简单的来讲,removeAttribute() 移除元素内的属性;
<style>
.aaa{
color:red;
}
</style>
</head>
<body>
<h1 class="aaa">Hello World</h1>
<button onclick="myFunction()">点击</button>
<script>
function myFunction()
{
document.getElementsByTagName("h1")[0].removeAttribute("class"); //当点击的时候,h1的红色会变成黑色(默认黑色)应为移除了class这个属性
}
</script>
</body>
2.getAttribute() 方法通过名称获取属性的值。(属性不存在时返回null)
注:getAttributeNode() 方法从当前元素中通过名称获取属性节点。
<style>
.aaa{
color:red;
}
</style>
</head>
<body>
<h1 class="aaa">Hello World</h1>
<button onclick="myFunction()">点击</button>
<script>
function myFunction()
{
var h1=document.getElementsByTagName("h1")[0];
alert(h1.className); //两者都能有效果 aaa
alert(h1.getAttribute("class")); // aaa
}
</script>
</body>
获取 dom 节点数据请不要用其他方法,统一用getattribute,获取对象属性方括号是兼容性最广的,点号方便,但是低版本 ie 有兼容性问题。良好的编程习惯是减少bug的保证
3.setAttribute() 方法添加指定的属性,并为其赋指定的值。
*注意:如果这个指定的属性已存在,则仅设置/更改值。
和getAttribute一样,setAttribute只是用于元素节点
*
<body>
<input value="OK">
<p>点击按钮来设置按钮的 type 属性。</p>
<button onclick="myFunction()">点击</button>
<script>
function myFunction()
{
document.getElementsByTagName("input")[0].setAttribute("type","button");
}
</script>
</body>
Internet Explorer 8 以及更早的版本不支持此方法。
通过setAttribute对文档做出修改后,在通过浏览器的源代码查看时看到的仍然是改变前的属性值。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,在动态刷新,动态刷新不影响文档的静态内容。
-DOM编程艺术removeAttribute getAttribute setAttribute的更多相关文章
- 认识 getAttribute() setAttribute()
getAttribute()方法不属于document对象,所以不能通过document对象调用,它只能通过元素节点对象调用 var paras = document.getElementsByTag ...
- setAttribute()方法和 getAttribute() 方法
一.setAttribute() 方法 setAttribute() 方法为一个或一组元素添加指定的属性,并且为其赋指定的值.(主要针对自定义属性) 如果这个属性已经存在,仅仅设置或是修改属性值. 浏 ...
- JavaScript中.、[]与setAttribute()在设置属性上的区别
.和[] javaScript.和[]既可以对所有js对象设置属性,但是对于DOM对象它设置的属性有些特殊.对于元素DOM标准属性,实现属性值的设置/更改;对于元素DOM非标准属性,仅在js中有效,在 ...
- javascript 中 dom.getAttribute("value") 与dom.value的差异
dom 是一个 input type="text" 手动修改 input 的值, 使用 dom.getAttribute("value") 只能得到 html ...
- jQuery 2.0.3 源码分析 钩子机制 - 属性操作
jQuery提供了一些快捷函数来对dom对象的属性进行存取操作. 这一部分还是比较简单的. 根据API这章主要是分解5个方法 .attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置 ...
- 公司内部的一篇关于dom方法的分享
第一部分 dom node类型 nodeType 属性 nodeType 属性返回节点的类型.nodeType 是只读的. 比较重要的节点类型有: 元素类型 NodeType 元素 1 属性 2 文本 ...
- servlet学习笔记_3
一.路径问题如果是在浏览器端请求服务器的数据(超链接,js的src),那么加/代表在Tomcat的webapp目录,不加/的话通常不考虑,实际上不加/在浏览器端也是当前项目目录(但是开发中通常必须要写 ...
- Js杂谈-DOM
前言 对jQuery的依赖.导致js的原生方法的淡忘,如果是封装自己的库,那势必要用到js的许多原生方法.从Jquery强大的dom处理开始,我们开始回顾javascript那些古老而坚挺的DOM方法 ...
- DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...
随机推荐
- day25-网络基础
# 一.子网掩码: # 1. 作用是划分子网,就是将某个ip地址划分成网络地址和主机地址两部分. # 形式上等同于ip地址,也是一个32位二进制数, # 如果它的网络部分(前24位)全为1,主机部分( ...
- shell、cmd、dos和脚本语言
问题一:Shell是什么? 操作系统可以分成核心(kernel)和Shell(外壳)两部分,其中,Shell是操作系统与外部的主要接口,位于操作系统的外层,为用户提供与操作系统核心沟通的途径.Shel ...
- Leetcode7_整数反转
题目 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123输出: 321 示例 2: 输入: -123输出: -321 示例 3: 输入: 120输出: ...
- Java虚拟机内存划分
Java虚拟机在执行Java程序时,会把它管理的内存划分为若干个不同的数据区.这些区域有不同的特性,起不同的作用.它们有各自的创建时间,销毁时间.有的区域随着进程的启动而创建,随着进程结束而销毁,有的 ...
- Qt 项目中main主函数及其作用
main.cpp 是实现 main() 函数的文件,下面是 main.cpp 文件的内容. #include "widget.h" #include <QApplicatio ...
- discount the possibility|pessimistic|bankrupt|
Nor can we discount the possibility that some factor in the diet itself has harmful effects. ADJ-GRA ...
- Centos7下常见目录
/etc/fstab
- synchronized互斥锁实例解析
目录 synchronized互斥锁实例解析 1.互斥锁基础使用:防止多个线程同时访问对象的synchronized方法. 1.1.多个线程调用同一个方法 1.2.多个线程多个锁,升级为类锁 2.线程 ...
- Jenkins+jmeter设置定时执行任务
1.准备好你的jmeter脚本 2.测试命令行下脚本执行 1)cd进入脚本目录 2)dir命令查看该目录下的脚本文件 3)jmeter -n -t test.jmx -l result.jtl 命令 ...
- npm镜像源
1.国内用户,建议将npm的注册表源设置为国内的镜像,可以大幅提升安装速度,先查看本机地址 npm config get registry 2.国内优秀npm镜像推荐及使用 淘宝npm镜像 ·搜索地址 ...