在 DOM 特性和属性之间不仅会有一些非常细微的行为差别,在其他一些方面也会有很多 bug 以及跨浏览器问题。
但特性和属性都是很重要的概念:特性是 DOM 构建的一个组成部分,而属性是元素保持运行时信息的主要手段,并且通过属性可以访问这些运行时信息。看个例子。
- var img = document.getElementsByTagName('img')[0];
- var newSrc = 'img/thumb.jpg';
- image.src = newSrc;
在上述代码中,我们创建一个图像标签,获取他的引用,并将他的 src 属性修改为一个新值,这看起来非常简单,但是我们运行测试验证一下。
- img.src === newSrc;
- img.getAttribute('src') === 'img/goods.webp';
测试 src 属性的值就是我们新赋的值,毕竟如果我们赋值 x=213, 当然希望 x 的值就是 213,我们并没有改变其特性 (attribute),所以它应该保持不变,对吧?
但当我们两个测试都失败了,我们看到 src 属性的值不是我们所赋予的值,而是类似如下的值
- file: ///E:/code/bookShopin/img/thumb.jpg"
给一个属性赋值,难道不应该去往那个属性就是所赋予的值吗?更奇怪的是,即使我们并没有改变元素上的特性 (attribute), 失败的测试表明,src 的特性值已经变成如下内容了:
- "img/thumb.jpg"
到底发生了什么事情,我们将检查与元素属性和特性相关的所有浏览器难题,我们会研究为什么结果不是我们所预期的。这同样适用于 CSS 和元素样式,构造一个动态 web 应用程序时,我们会在设置或获取元素样式方面遇到很多的困难,我们讨论一下元素的样式处理知识。
DOM 特性和 DOM 属性
在访问元素的特性值时,有两种选择:使用传统的 DOM 方法叫 getAttribute 和 setAttribute, 或使用 DOM 对象上与之对应的属性。举例来说,一个元素保存在变量 e 中,要获取其 id 特性的话,我们可以使用如下方式,
- e.getAttribute('id');
- e.id
性能注意事项
总的来说,属性的访问速度比相应的 DOM 特性方法的访问速度要快,特别是在 IE 中,经过在多个浏览器上测试,属性的滑入和设置操作几乎总比 getAttribute() 和 setAttribute() 快。所以要提高性能,我们可能想要实现一个方法,在属性值存在的时候就访问属性值,属性值不存在的时候利用 DOM 方法作为后备,考虑如下代码。
- (function() {
- var translations = {
- 'for': 'htmlFor',
- 'class': 'className',
- readonly: 'readOnly',
- maxlength: 'maxLength',
- cellspacing: 'cellSpacing',
- rowspan: 'rowSpan',
- colspan: 'colSpan',
- tabindex: 'tabIndex',
- cellpadding: 'cellPadding',
- usemap: 'useMap',
- frameborder: 'frameBorder',
- contenteditable: 'contentEditable'
- };
- window.attr = function(element, name, value) {
- var property = translations[name] || name;
- var propertyExists = typeof element[property] !== 'undefined';
- if (typeof value !== 'undefined') {
- if (propertyExists) {
- element[property] = value;
- } else {
- element.setAttribute(name, value);
- }
- }
- return propertyExists ? element[property] : element.getAttribute(name);
- }
- })();
跨浏览器的 attribute 问题
五大浏览器都会将表单 input 元素的 id 和 name 特性作为元素的属性值进行引用,产生的这些属性,会主动覆盖 form 元素上已经存在的同名属性。
- <input type="text" for="sufubo" id="test">
- <form id="testForm" action="/">
- <input type="text" id="id" />
- <input type="text" name="action" />
- </form>
- <script type="text/javascript">
- var form = document.getElementById('testForm');
- form.id === <input type = "text"id = "id" / >form.action === <input type = "text"name = "action" / >
- </script>
URL 规范化
在所有的现代浏览器中,有一个违反最少意外原则的特性,在访问一个引用了 URL 的属性时,该 URL 值会自动将原始值转换成完成规范的 URL。
- <a href="package.json" id="testSubject">
- self
- </a>
- <script type="text/javascript">
- var link = document.getElementById('testSubject');
- var linkHref = link.getAttributeNode('href').nodeValue;
- link.href === 'package.json'
- </script>
通过 DOM 的原始节点找出该标签的原始值。我们要对该值进行验证,测试失败,因为该值被转为为规范的 URL 值了。
type 特性
另外还有一个 IE 特性,IE8 以及之前的版本对元素的 type 特性的影响,没有任何合理的解决方案,一旦元素被插入到文档,他的 type 特性就不能再改变了。如果修改,IE 就会抛出一个异常。
样式属性命名
我们编写一个简单的 api 自动将样式转化为驼峰格式
- //访问样式的简单方式function style(element, name, value) { name = name.replace(/-([a-z])/ig, function (all, letter) { return letter.toUpperCase(); }); if(typeof value !== 'undefined') { element.style[name] = value; } return element.style[name];}
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: