做前端的，总是要跟兼容性打交道，CSS兼容性，JS兼容性，这里我总结了一些getAttribute(),setAttribute()在不同浏览器下兼容性以及如何解决这些问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>kingwell</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<div id="idHeader" class="class-header" title="kingwell" status="1"></div>
<label id="forUserName" for="userName" title="kingwell" status="1"></label>
</body>
</html>
var el = document.getElementById("idHeader");
alert(el.getAttribute("id"));
alert(el.id);
IE Firfox->idHeader
alert(el.getAttribute("class"));
//IE6,IE7 -> null IE8,IE9,Firefox ->class-header
alert(el.class);
//IE6,IE7,IE8->报错 IE9,Firefox->undefined
alert(el.getAttribute("className"));
//IE6,IE7->class-header ; IE8,IE9,Firefox -> undefined
alert(el.className);
//All -> class-header
var elfor = document.getElementById("forUserName");
alert(elfor.getAttribute("for"));
//IE6,IE7->undefined IE8,9,Firefox->forUseName
alert(elfor.for )
//IE6,IE7报错,其它为undefined
alert(elfor.title)
//全部输出kingwell
alert(elfor.status);
//IE6-8 -> 1 IE9,Firefox->undefined
alert(elfor.getAttribute("status"))
//全部输出 1
/*总结：
1:常规属性建议使用 node.XXXX。
2:自定义属性建议使用node.getAttribute("XXXX")。
3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX")，如label中的for。
4:当获取的目标是保留字,如：class,请使用className代替。
*/
这里是分析的是getAttribute(),setAttribute()同理。
如果觉得有用的话就顶一下 ^_^ ....
分享到：
相关推荐
然而，由于各个浏览器的实现差异，JavaScript在不同浏览器上的兼容性问题一直是开发者面临的一大挑战。本文将深入探讨如何解决JavaScript在Firefox（FF）和Internet Explorer（IE）等浏览器之间的兼容性问题。 首先...
JavaScript中的getAttribute和setAttribute是DOM操作中的重要方法，它们分别用于获取和设置HTML元素的属性值。在Web开发中，通过这两个方法，开发者可以灵活地读取和修改HTML标签的属性，进而实现各种动态交互的效果...
最佳实践应当是遵循DOM标准，使用 `setAttribute` 和 `getAttribute` 方法进行属性的获取和设置，这样能保证代码的可读性、可维护性，并确保与DOM操作的兼容性。 总结来说，`getAttribute` 和 `setAttribute` 是在...
本文实例分析了javascript中setAttribute兼容性用法。分享给大家供大家参考，具体如下： 1:常规属性建议使用 node.XXXX。 2:自定义属性建议使用node.getAttribute(“XXXX”)。 3:当获取的目标是JS里的关键字时建议...
以上就是解决Firefox和IE之间JavaScript兼容性问题的一些关键点。在实际开发中，还可以使用条件注释、库如jQuery或现代的Babel等工具来进一步简化兼容性工作，提高代码的可移植性和维护性。理解并掌握这些技巧，将有...
通过`getElementById()`获取到`mydiv`元素，然后调用`setAttribute()`，将`id`属性设置为`newid`。随后，使用`getAttribute()`函数验证了新设置的属性值。 第二个例子展示了如何为一个元素创建新的属性。在这种情况...
- `setAttribute()`方法：用于设置指定元素的指定属性值，接受两个参数——即要设置的属性名和属性值。例如：`element.setAttribute("class", "newClass")`将把该元素的class属性设置为"newClass"。 - `...
- **文本内容**：使用`textContent`属性获取节点的文本内容，`nodeValue`则获取纯文本值，不包含子节点的文本。 ```javascript var attrValue = node.getAttribute('attrName'); var textContent = node....
JavaScript中的属性操作是Web开发中不可或缺的部分，特别是对于DOM元素的操作。`JSAttribute`属性操作主要...此外，使用现代的JavaScript库如jQuery或React等可以简化这类操作，提供更一致的API和更好的浏览器兼容性。
同时，在操作属性时，应注意跨浏览器兼容性问题，尤其是在使用原生JavaScript方法时。 此外，现代Web开发推荐使用更加语义化的HTML5标准属性，如通过 `data-*` 属性来标记自定义数据，这有助于保持HTML代码的清晰和...
在JavaScript中，XML（eXtensible Markup Language）文件的...在实际应用中，可能还需要考虑错误处理、兼容性问题以及更复杂的逻辑操作。理解并熟练运用这些技术，可以帮助开发者在前端环境中有效地处理和操作XML数据。
- `getAttribute()`/`setAttribute()`：获取或设置属性值。 - `hasAttribute()`/`removeAttribute()`：检查属性是否存在或移除属性。 7. **文本内容操作**： - `textContent`：获取或设置元素的文本内容。 - `...
在实际开发中，选择哪种方法来操作元素属性，往往取决于具体的应用场景和浏览器兼容性需求。通常情况下，直接使用HTMLElement对象的属性是最方便的，但在处理自定义属性或者需要兼容老旧浏览器时，getAttribute()、...
DOM方法包括getAttribute()和setAttribute()，前者获取属性值，后者设置属性值。 4.6 操作元素 - 创建元素：使用`document.createElement('element')`创建新元素。 - 创建文本节点：`document.createTextNode('...
2. 兼容性问题：不同的浏览器对自定义属性的支持程度不同，需要通过特定方法来保证兼容性。 3. JavaScript操作DOM的方法：介绍了如何通过JavaScript访问和修改HTML元素的属性，包括直接访问、使用“attributes[]”...
同样，className属性在IE中用来设置和获取元素的样式类，而在Firefox中则使用class来代替className，因为class在Firefox中是关键字，必须通过setAttribute和getAttribute方法来操作。 对于JavaScript对象的操作，...