`
kabike
  • 浏览: 609576 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

element节点的attribute和property初探

    博客分类:
  • html
阅读更多
最近在用jquery的时候,发现$('input[checked="checked"]')有时候不能正确的选择被勾选的checkbox.
所以调查了一下

在javascript里,任何一个obj都有property,并且可以任意添加
			var o=new Object();
			o.name='crap';
			alert(typeof(o.name));

显示是个string

对于element元素,有个readonly的property,叫做attributes,这是个NamedNodeMap.
http://www.w3schools.com/dom/prop_element_attributes.asp
http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-745549614
element元素可以通过getAttribute,setAttribute来操作attributes这个NamedNodeMap里的内容
以下内容是在火狐18.0.1演示的.

		<script type="text/javascript">
			function crap() {
				var item = document.getElementById("key");
				alert(item.type);
				alert(item.getAttribute('type'));
			}
		</script>
		<input type="text" id="key">
		<button onclick="crap()">button</button>

看到输出都是text,因为item.type这个属性是由它的html attributes暴露的
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-642250288

				var item = document.getElementById("key");
				alert(item.type);
				item.setAttribute('type','checkbox');
				alert(item.type);

输出分别是text,checkbox,因为item.setAttribute('type','checkbox')更改了item.type属性

把代码改成如下
		<script type="text/javascript">
			function crap() {
				var item = document.getElementById("key");
				alert(item.checked);
				alert(item.getAttribute('checked'));
			}
		</script>
		<input type="checkbox" id="key">
		<button onclick="crap()">button</button>

在checkbox没选中的情况下,输出分别为false,null
鼠标勾选以后,是true,null

IE7中分别是false,false
true,true

看来火狐没有进行setAttribute

我猜测这就是jquery中input[checked='checked'] selector有时候不能选中被勾选的元素的原因,
要用:checked这个选择器.

不过换句话说,一个checkbox元素e被勾选以后,它到底应该e.checked=true才对,
还是e.setAttribute('checked','checked')?

规范说
引用

The attributes are exposed as properties for compatibility with DOM Level 0.
This usage is deprecated because it can not be generalized to all possible attribute names for XML.
We recommend the use of generic methods on the core Element interface for setting, getting and removing attributes.

那岂不是火狐应该setAttribute('checked','checked')?
分享到:
评论

相关推荐

    javascript中attribute和property的区别详解

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密。很多新手朋友,也包括以前的我,经常会搞不清楚。attribute翻译成中文术语为“特性”,property翻译成中文术语为...

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

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

    Property和Attribute的区别

    "Property和Attribute的区别" 在面向对象编程(Object-Oriented Programming)中,Property和Attribute都是常用的概念,但是它们之间存在着本质的区别。Property是指类向外提供的数据区域,是智能的字段,其中有get...

    C#中Property和Attribute的区别实例详解

    本文实例分析了C#中Property和Attribute的区别。分享给大家供大家参考。具体分析如下: 在C#中有两个属性,分别为Property和Attribute,两个的中文意思都有特性、属性之间,但是用法上却不一样,为了区别,本文暂把...

    JS中DOM元素的attribute与property属性示例详解

    一、’表亲戚’:attribute和property 为什么称attribute和property为’表亲戚’呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 html 标签拥有的属性; property 是 dom 元素在 js 中作为...

    dom4j常用方法

    元素节点.attributeValue(“属性名” ) 获取指定节点指定属性的值 vi.父节点.elementText(“子节点名称”) 获取父节点指定子节点的值 vii.Student.elementText(“sage”)--&gt;拿到学生节点下面的年龄节点的值 viii....

    XmlDocument 节点遍历C#

    首先,我们需要了解XML文档的基本结构,XML文档由元素(Element)、属性(Attribute)、文本(Text)等节点组成。`XmlDocument`类提供了一种树形结构的方式来表示这些节点。以下是一段示例XML文档: ```xml ...

    得到XML节点的属性和文字

    当我们处理XML文档时,有时需要获取特定节点的属性和文本内容。本文将深入探讨如何在不同的编程环境中获取XML节点的属性和文字。 在Python中,我们可以使用`xml.etree.ElementTree`库来解析和操作XML。首先,我们...

    QT对XML增删查改读取,节点自定义,键值自定义

    通过QDomElement的firstChildElement和attribute方法,可以读取特定节点下的键值对。 ```cpp QDomElement childNode = ...; // 获取子节点 QString key = childNode.attribute("key"); QString value = childNode....

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

    不同的浏览器可能在处理`property`和`attribute`时存在差异,尤其是在早期版本的IE中,这需要开发者在编写代码时特别注意。 了解这些区别后,开发者在处理HTML元素时能够更准确地控制其行为。在操作元素的属性时,...

    C#读取XML 的节点,以及属性

    string attr1Value = element.Attribute("attr1")?.Value; Console.WriteLine(attr1Value); ``` 修改XML节点和属性: - 修改节点值:对于 `XmlDocument`,可以通过 `InnerText` 属性;对于 `XDocument`,使用 `...

    C#动态加载XML文件,并更改节点属性值

    `XDocument`提供了丰富的查询方法,如`Descendants()`和`Element()`,用于找到我们需要修改的节点。假设我们要找到一个特定ID的元素,可以这样做: ```csharp XElement element = doc.Descendants("nodeName")....

    propertyGrid 属性处理演示demo

    在.NET框架中,`PropertyGrid`控件是一个强大的工具,用于显示和编辑对象的属性。这个控件在设计时和运行时都非常有用,因为它能够自动生成一个用户界面,该界面可以展示任何对象的属性,并允许用户进行交互式编辑。...

    XML中dom根据属性检索节点(C#)

    XPath表达式`//elementName[@attributeName='attributeValue']`表示查找所有`elementName`元素,并且其`attributeName`属性值等于`attributeValue`的节点。 4. 遍历节点:如果需要查找的属性可能出现在多个节点上,...

    xml文件的读取,遍历每个子节点,已经节点中的数据设置。

    QString attrValue = element.attribute("attribute_name"); // 获取指定属性的值 QString textContent = element.text(); // 获取元素内的文本内容 ``` 4. **设置节点数据**:如果需要修改XML文件的内容,可以创建...

Global site tag (gtag.js) - Google Analytics