`
opensuse
  • 浏览: 186453 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript中的Attribute相关内容介绍

阅读更多

转自:帮你实现梦想的CSDN博客

 

Attribute是属性的意思文章仅对部分兼容IE和FF的Attribute相关的介绍。

attributes:获取一个属性作为对象

getAttribute:获取某一个属性的值
setAttribute:建立一个属性,并同时给属性捆绑一个值
createAttribute:仅建立一个属性
removeAttribute:删除一个属性

getAttributeNode:获取一个节点作为对象
setAttributeNode:建立一个节点
removeAttributeNode:删除一个节点

attributes可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用“[]”,IE在这里可以使用“()”,考虑到兼容性的问题,要使用“[]”。关于attributes属性的使用方式上,IE和FF有巨大的分歧,在此不多介绍。

attributes的使用方法:(IE和FF通用)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body> 
<script>
var d = document.getElementById("sss").attributes["value"];
document.write(d.name);
document.write(d.value);
//显示value aaa
</script>

 

getAttribute,setAttribute,createAttribute,removeAttribute四兄弟的概念比较容易理解,使用方法也比较简单,唯一需要注意这几点:

1、createAttribute在使用的时候不需要基于对象的,document.createAttribute()就可以。

2、setAttribute,createAttribute在使用的时候如果是使用的时候不要使用name,type,value等单词,IE都FF的反应都奇怪的难以理解。

3、createAttribute在使用的时候如果只定义了名字,没有d.nodeValue = "hello";语句定义值,FF会认为是一个空字符串,IE认为是undefined,注意到这点就可以了。

getAttribute的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 <script>
var d = document.getElementById("sss").getAttribute("value");
document.write(d);
//显示 aaa
</script>
 

setAttribute的使用方法:(你会发现多了一个名为good的属性hello)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.getElementById("sss").setAttribute("good","hello");
alert(document.getElementById("t").innerHTML)
</script>
 

createAttribute的使用方法:(多了一个名为good的空属性)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.createAttribute("good");
document.getElementById("sss").setAttributeNode(d);
alert(document.getElementById("t").innerHTML)
</script>
 

removeAttribute的使用方法:(少了一个)

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.getElementById("sss").removeAttribute("value");
alert(document.getElementById("t").innerHTML)
</script>
 

getAttributeNode,setAttributeNode,removeAttributeNode三个方法的特点是都直接操作一个node(节点),removeAttributeNode在一开始的时候总会用错,但是充分理解了node的含义的时候,就能够应用自如了。

getAttributeNode的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.getElementById("sss").getAttributeNode("value"); 
document.write(d.name);
document.write(d.value);
//显示 value aaa
</script>
 setAttributeNode的使用方法:
<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.createAttribute("good");
document.getElementById("sss").setAttributeNode(d);
alert(document.getElementById("t").innerHTML);
</script>
 

removeAttributeNode的使用方法:

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
 
<script>
var d = document.getElementById("sss").getAttributeNode("value")
document.getElementById("sss").removeAttributeNode(d); 
alert(document.getElementById("t").innerHTML);
</script>
 
分享到:
评论

相关推荐

    shiyou00#knowledge#JavaScript中attribute和property的区别以及最佳实践1

    前言使用JavaScript操作DOM元素时往往涉及到两个概念:attribute 和 property。document.getElementById('te

    JavaScript中property和attribute的区别详细介绍

    主要介绍了JavaScript中property和attribute的区别详细介绍,本文总结了定义、相同这处、不同之处、浏览器兼容性上的差别等内容,并建议优先选择property,需要的朋友可以参考下

    javascript中attribute和property的区别详解

    在JavaScript中,`attribute` 和 `property` 是两个与DOM元素相关的概念,它们虽然有所关联,但具有明显的差异。理解这两个概念的区别对于JavaScript开发者来说至关重要,尤其是对于新手来说,混淆这两个概念是常见...

    JavaScript中的property和attribute介绍

    本文将详细介绍JavaScript中的property和attribute,并通过代码示例来展示两者之间的差异和用法。 首先,我们来了解一下property和attribute这两个单词的英文释义。在词典中,property主要有以下几种解释: 1. ...

    详解JS中的attribute属性

    在给定的文件信息中,介绍了部分兼容IE(Internet Explorer)和FF(Mozilla Firefox)浏览器的attribute属性的使用方法。由于技术原因,文档内容可能有OCR识别错误,但可以依据提供的内容进行知识点的详细解读。 ...

    JavaScript读取xml文件内容.zip

    在JavaScript中,读取XML文件内容是一个常见的任务,特别是在构建Web应用程序时,XML常用于存储结构化数据。本文将深入探讨如何使用JavaScript处理XML文件,包括解析XML、访问XML节点以及展示XML数据。 首先,我们...

    JavaScript DOM编程艺术【第2版&高清】.pdf

    但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...

    JavaScript中的 attribute 和 jQuery中的 attr 方法浅析

    在JavaScript和jQuery中,`attribute`和`attr`方法是用来操作HTML元素属性的重要工具。本文将深入探讨两者之间的异同以及它们的使用方法。 首先,`attribute`是JavaScript中的DOM对象上的一个属性,它用于访问和...

    javascript操作xml文件示例

    下面将详细介绍如何使用JavaScript进行XML文件的操作,主要包括增加、删除、修改和查询。 1. **加载XML文件** 在JavaScript中,我们可以使用`XMLHttpRequest`对象或者`fetch` API来加载XML文件。例如: ```...

    A Smarter Way to Learn JavaScript.pdf

    循环结构是编程中的另一大基础,书中介绍了for循环(for loops)及其相关的操作,包括使用标志(flags)、布尔值、数组长度和中断(Booleans, array length, and breaks),还讲解了嵌套for循环(for loops nested)...

    JavaScript DOM编程艺术(中文第2版)

    第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...

    精通JAVAScript+jQuery书中实例

    《精通JavaScript+jQuery》这本书是IT领域中关于前端开发的经典之作,主要涵盖了JavaScript语言和jQuery库的深入理解和实践应用。JavaScript作为Web开发的核心语言,负责网页的动态交互,而jQuery则是一个强大的...

    点击链接切换显示不同的图片javascript版纯Javascript 有注释

    在压缩包的文件名中,“02-dom-attribute-pic-change.html”很可能是一个示例页面,其中包含了实现图片切换的HTML结构和JavaScript代码。文件名中的“DOM-attribute”可能是指代码通过操作DOM元素的属性(如src)来...

    javascript读取XML文件方法

    本文将详细介绍如何使用JavaScript来读取XML文件,并进行相应的数据处理。 #### 二、JavaScript与XML的基本操作 ##### 1. 创建DOMDocument对象 在使用JavaScript处理XML之前,我们需要先创建一个`DOMDocument`对象...

    DOM Scripting Web Design with JavaScript and the Document Object Model

    9. JavaScript面向对象编程:介绍如何在JavaScript中实现面向对象的编程模式,包含继承、封装、多态等面向对象的基本概念。 10. AJAX和JSON:通过AJAX实现异步数据交换,以及如何使用JSON格式存储和传输数据。 11....

Global site tag (gtag.js) - Google Analytics