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的更多相关文章

  1. 认识 getAttribute() setAttribute()

    getAttribute()方法不属于document对象,所以不能通过document对象调用,它只能通过元素节点对象调用 var paras = document.getElementsByTag ...

  2. setAttribute()方法和 getAttribute() 方法

    一.setAttribute() 方法 setAttribute() 方法为一个或一组元素添加指定的属性,并且为其赋指定的值.(主要针对自定义属性) 如果这个属性已经存在,仅仅设置或是修改属性值. 浏 ...

  3. JavaScript中.、[]与setAttribute()在设置属性上的区别

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

  4. javascript 中 dom.getAttribute("value") 与dom.value的差异

    dom 是一个 input type="text" 手动修改 input 的值, 使用 dom.getAttribute("value") 只能得到 html ...

  5. jQuery 2.0.3 源码分析 钩子机制 - 属性操作

    jQuery提供了一些快捷函数来对dom对象的属性进行存取操作. 这一部分还是比较简单的. 根据API这章主要是分解5个方法 .attr()   获取匹配的元素集合中的第一个元素的属性的值  或 设置 ...

  6. 公司内部的一篇关于dom方法的分享

    第一部分 dom node类型 nodeType 属性 nodeType 属性返回节点的类型.nodeType 是只读的. 比较重要的节点类型有: 元素类型 NodeType 元素 1 属性 2 文本 ...

  7. servlet学习笔记_3

    一.路径问题如果是在浏览器端请求服务器的数据(超链接,js的src),那么加/代表在Tomcat的webapp目录,不加/的话通常不考虑,实际上不加/在浏览器端也是当前项目目录(但是开发中通常必须要写 ...

  8. Js杂谈-DOM

    前言 对jQuery的依赖.导致js的原生方法的淡忘,如果是封装自己的库,那势必要用到js的许多原生方法.从Jquery强大的dom处理开始,我们开始回顾javascript那些古老而坚挺的DOM方法 ...

  9. DOM Element节点类型详解

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...

随机推荐

  1. 导入import的多种形式

    参考资料:anaconda官方资料 一.module(模块) 比如fibo是个模块(.py文件),其中有fib.fib2等函数 第一种形式:import fibo 在当前的符号表中,这并不会直接进入到 ...

  2. 算法笔记4.2哈希 问题 A: 谁是你的潜在朋友

    题目描述 "臭味相投"--这是我们描述朋友时喜欢用的词汇.两个人是朋友通常意味着他们存在着许多共同的兴趣.然而作为一个宅男,你发现自己与他人相互了解的机会 并不太多.幸运的是,你意 ...

  3. HBase单机安装及Phoenix JDBC连接

    HBase是建立在Hadoop文件系统之上的分布式面向列的数据库,它是横向扩展的.它利用了Hadoop的文件系统(HDFS)提供的容错能力. HBase提供对数据的随机实时读/写访问,可以直接HBas ...

  4. Java面试题4-附答案

    BIO.NIO和AIO的区别   Java BIO : 同步并阻塞,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线程 ...

  5. LTE-U/LAA

    将LTE扩展至非授权频谱,得益于一个稳健的无线电通信线路,具有更好协调性的同步节点,以及以授权频谱为基点的载波聚合,LTE-U/LAA能提供比载波Wi-Fi更佳的网络性能和更强的用户体验,为移动运营商 ...

  6. jenkins-定时跑代码

    build periodically和poll scm都可以定时运行

  7. css样式表---样式表分类、选择器

    一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...

  8. C++线程池的实现

    线程池,简单来说就是有一堆已经创建好的线程(最大数目一定),初始时他们都处于空闲状态,当有新的任务进来,从线程池中取出一个空闲的线程处理任务,然后当任务处理完成之后,该线程被重新放回到线程池中,供其他 ...

  9. jQuery包装

    1. jQuery包装多个选择器的click事件 // "告警等级"选择 $("#filter_level_1, #filter_level_2, #filter_lev ...

  10. interrupt 停止线程

    该方法只是给线程设置了一个停止的标记 并不是真正的立即停止线程 interrupted() 测试当前线程是否已经中断 isInterrupted() 测试线程是否已经中断 停止线程的方法: .异常法 ...