js中Attribute属性常见操作函数整理

最新推荐文章于 2024-01-04 17:30:20 发布

原创最新推荐文章于 2024-01-04 17:30:20 发布 · 818 阅读

0 ·

CC 4.0 BY-SA版权

Html 同时被 2 个专栏收录

262 篇文章

订阅专栏

Javascript

243 篇文章

订阅专栏

本文主要介绍了JavaScript中Attribute的相关函数，包括attributes、getAttribute、setAttribute、createAttribute、removeAttribute、getAttributeNode、setAttributeNode和removeAttributeNode的使用方法和注意事项，特别强调了在不同浏览器中的兼容性问题。

js中Attribute属性常见操作函数整理

Attribute常见函数简介

Attribute是属性的意思，文章仅对部分兼容IE和FF的Attribute相关的介绍。
attributes：获取一个属性作为对象
getAttribute：获取某一个属性的值
setAttribute：建立一个属性，并同时给属性捆绑一个值
createAttribute：仅建立一个属性
removeAttribute：删除一个属性
getAttributeNode：获取一个节点作为对象
setAttributeNode：建立一个节点
removeAttributeNode：删除一个节点
attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]”，IE在这里可以使用“()”，考虑到兼容性的问题，要使用“[]”。关于attributes属性的使用方式上，IE和FF有巨大的分歧，在此不多介绍。

attributes的使用方法：（IE和FF通用）

<body>
<input id="input" type="text" name="qipa250" value="奇葩天地网" style="width: 200px">

<script>
    var d = document.getElementById("input").attributes["value"];
    document.write(d.name);
    document.write(d.value);
</script>
</body>

在这里插入图片描述

getAttribute的使用方法

<body>
<input id="qipa250" type="text" name="qipa250" value="奇葩天地网" style="width: 200px">

<script>
    var d = document.getElementById("qipa250").getAttribute("value");
    document.write(d);
</script>
</body>

在这里插入图片描述

setAttribute的使用方法

<body>
<input type="button" value="按钮" id="btn">
<div id="qipa250">www.qipa250.com</div>
<script>
   var d = document.getElementById("qipa250").setAttribute("url", "www.qipa250.com");
</script>
</body>

发现多了一个名为url的属性www.qipa250.com
在这里插入图片描述

createAttribute的使用方法

<!DOCTYPE html>
<html>
<body>
<ul id="box"></ul>
<script>
    window.onload = function (){
        var oBox = document.getElementById('box');
        alert( document.body.innerHTML );
        oBox.setAttribute('value','name');
        alert( document.body.innerHTML );
        attr = document.createAttribute('hallo');
        alert( document.body.innerHTML );/*同上*/
        attr.nodeValue = 'world';/*对自定义属性进行编辑*/
        alert( document.body.innerHTML );/*同上*/
        oBox.setAttributeNode(attr);/*对标签插入自定义属性*/
        alert( document.body.innerHTML );/*改变*/
    };
</script>
</body>
</html>

在这里插入图片描述

removeAttribute的使用方法

<!DOCTYPE html>
<html>
<body>
<input id="qipa250" type="text" name="qipa250" value="奇葩天地网" style="width: 200px">
<script>
    var d = document.getElementById("qipa250").removeAttribute("name");
</script>
</body>
</html>

在这里插入图片描述

Attribute属性总结

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

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

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

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

getAttributeNode的使用方法

<!DOCTYPE html>
<html>
<body>
<input id="qipa250" type="text" name="qipa250" value="奇葩天地网" style="width: 200px">
<script>
    var d = document.getElementById("qipa250").getAttributeNode("value");
    document.write(d.name);
    document.write(d.value);
</script>
</body>
</html>

在这里插入图片描述

setAttributeNode的使用方法

<!DOCTYPE html>
<html>
<body>
<input id="qipa250" type="text" name="qipa250" value="奇葩天地网" style="width: 200px">
<script>
    var d = document.createAttribute("url");
    document.getElementById("qipa250").setAttributeNode(d);
</script>
</body>
</html>

在这里插入图片描述

removeAttributeNode的使用方法

<!DOCTYPE html>
<html>
<body>
<input id="qipa250" type="text" name="qipa250" value="奇葩天地网" style="width: 200px">
<script>
    var d = document.getElementById("qipa250").getAttributeNode("value")
    document.getElementById("qipa250").removeAttributeNode(d);
</script>
</body>
</html>