Element类型【2】

3. 设置特性

与getAttribute()对应的方法是setAttribute()&＃xff0c;这个方法接受两个参数&＃xff1a;要设置的特性名和值。如果特性已经存在&＃xff0c;setAttribute()会以指定的值替换现有的值&＃xff1b;如果特性不存在&＃xff0c;setAttribute()则创建该属性并设置相应的值。来看下面的例子&＃xff1a;

div.setAttribute("id", "someOtherId");

div.setAttribute("class", "ft");

div.setAttribute("title", "Some other text");

div.setAttribute("lang","fr");

div.setAttribute("dir", "rtl");

ElementAttributesExample01.htm

通过setAttribute()方法既可以操作HTML特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式&＃xff0c;即"ID"最终会变成"id"。

因为所有特性都是属性&＃xff0c;所以直接给属性赋值可以设置特性的值&＃xff0c;如下所示。

div.id &＃61; "someOtherId";

div.align &＃61; "left";

不过&＃xff0c;像下面这样为DOM元素添加一个自定义的属性&＃xff0c;该属性不会自动成为元素的特性。

div.mycolor &＃61; "red";

alert(div.getAttribute("mycolor")); //null&＃xff08;IE除外&＃xff09;

这个例子添加了一个名为mycolor的属性并将它的值设置为"red"。在大多数浏览器中&＃xff0c;这个属性都不会自动变成元素的特性&＃xff0c;因此想通过getAttribute()取得同名特性的值&＃xff0c;结果会返回null。可是&＃xff0c;自定义属性在IE中会被当作元素的特性&＃xff0c;反之亦然。

在IE7及以前版本中&＃xff0c;setAttribute()存在一些异常行为。通过这个方法设置class和style特性&＃xff0c;没有任何效果&＃xff0c;而使用这个方法设置事件处理程序特性时也一样。尽管到了IE8才解决这些问题&＃xff0c;但我们还是推荐通过属性来设置特性。

要介绍的最后一个方法是removeAttribute()&＃xff0c;这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值&＃xff0c;而且也会从元素中完全删除特性&＃xff0c;如下所示&＃xff1a;

div.removeAttribute("class");

这个方法并不常用&＃xff0c;但在序列化DOM元素时&＃xff0c;可以通过它来确切地指定要包含哪些特性。

IE6及以前版本不支持removeAttribute()。

4. attributes属性

Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap&＃xff0c;与NodeList类似&＃xff0c;也是一个“动态”的集合。元素的每一个特性都由一个Attr节点表示&＃xff0c;每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法。

getNamedItem_(name)_&＃xff1a;返回nodeName属性等于name的节点&＃xff1b;

removeNamedItem_(name)_&＃xff1a;从列表中移除nodeName属性等于name的节点&＃xff1b;

setNamedItem_(node)_&＃xff1a;向列表中添加节点&＃xff0c;以节点的nodeName属性为索引&＃xff1b;

item_(pos)_&＃xff1a;返回位于数字pos位置处的节点。

attributes属性中包含一系列节点&＃xff0c;每个节点的nodeName就是特性的名称&＃xff0c;而节点的nodeValue就是特性的值。要取得元素的id特性&＃xff0c;可以使用以下代码。

var id &＃61; element.attributes.getNamedItem("id").nodeValue;

以下是使用方括号语法通过特性名称访问节点的简写方式。

var id &＃61; element.attributes["id"].nodeValue;

也可以使用这种语法来设置特性的值&＃xff0c;即先取得特性节点&＃xff0c;然后再将其nodeValue设置为新值&＃xff0c;如下所示。

element.attributes["id"].nodeValue &＃61; "someOtherId";

调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果相同——直接删除具有给定名称的特性。下面的例子展示了两个方法间唯一的区别&＃xff0c;即removeNamedItem()返回表示被删除特性的Attr节点。

var oldAttr &＃61; element.attributes.removeNamedItem("id");

最后&＃xff0c;setNamedItem()是一个很不常用的方法&＃xff0c;通过这个方法可以为元素添加一个新特性&＃xff0c;为此需要为它传入一个特性节点&＃xff0c;如下所示。

element.attributes.setNamedItem(newAttr);

一般来说&＃xff0c;由于前面介绍的attributes的方法不够方便&＃xff0c;因此开发人员更多的会使用getAttribute()、removeAttribute()和setAttribute()方法。

不过&＃xff0c;如果想要遍历元素的特性&＃xff0c;attributes属性倒是可以派上用场。在需要将DOM结构序列化为XML或HTML字符串时&＃xff0c;多数都会涉及遍历元素特性。以下代码展示了如何迭代元素的每一个特性&＃xff0c;然后将它们构造成name&＃61;"value" name&＃61;"value"这样的字符串格式。

function outputAttributes(element){

var pairs &＃61; new Array(),

attrName,

attrValue,

i,

len;

for (i&＃61;0, len&＃61;element.attributes.length; i

attrName &＃61; element.attributes[i].nodeName;

attrValue &＃61; element.attributes[i].nodeValue;

pairs.push(attrName &＃43; "&＃61;\"" &＃43; attrValue &＃43; "\"");

}

return pairs.join(" ");

}

ElementAttributesExample03.htm

这个函数使用了一个数组来保存名值对&＃xff0c;最后再以空格为分隔符将它们拼接起来&＃xff08;这是序列化长字符串时的一种常用技巧&＃xff09;。通过attributes.length属性&＃xff0c;for循环会遍历每个特性&＃xff0c;将特性的名称和值输出为字符串。关于以上代码的运行结果&＃xff0c;以下是两点必要的说明。

针对attributes对象中的特性&＃xff0c;不同浏览器返回的顺序不同。这些特性在XML或HTML代码中出现的先后顺序&＃xff0c;不一定与它们出现在attributes对象中的顺序一致。

IE7及更早的版本会返回HTML元素中所有可能的特性&＃xff0c;包括没有指定的特性。换句话说&＃xff0c;返回100多个特性的情况会很常见。

针对IE7及更早版本中存在的问题&＃xff0c;可以对上面的函数加以改进&＃xff0c;让它只返回指定的特性。每个特性节点都有一个名为specified的属性&＃xff0c;这个属性的值如果为true&＃xff0c;则意味着要么是在HTML中指定了相应特性&＃xff0c;要么是通过setAttribute()方法设置了该特性。在IE中&＃xff0c;所有未设置过的特性的该属性值都为false&＃xff0c;而在其他浏览器中根本不会为这类特性生成对应的特性节点&＃xff08;因此&＃xff0c;在这些浏览器中&＃xff0c;任何特性节点的specified值始终为true&＃xff09;。改进后的代码如下所示。

function outputAttributes(element){

var pairs &＃61; new Array(),

attrName,

attrValue,

i,

len;

for (i&＃61;0, len&＃61;element.attributes.length; i

attrName &＃61; element.attributes[i].nodeName;

attrValue &＃61; element.attributes[i].nodeValue;

if (element.attributes[i].specified) {pairs.push(attrName &＃43; "&＃61;\"" &＃43; attrValue &＃43; "\"");}

}

return pairs.join(" ");

}

ElementAttributesExample04.htm

这个经过改进的函数可以确保即使在IE7及更早的版本中&＃xff0c;也会只返回指定的特性。

5. 创建元素

使用document.createElement()方法可以创建新元素。这个方法只接受一个参数&＃xff0c;即要创建元素的标签名。这个标签名在HTML文档中不区分大小写&＃xff0c;而在XML&＃xff08;包括XHTML&＃xff09;文档中&＃xff0c;则是区分大小写的。例如&＃xff0c;使用下面的代码可以创建一个

元素。

var div &＃61; document.createElement("div");

在使用createElement()方法创建新元素的同时&＃xff0c;也为新元素设置了ownerDocuemnt属性。此时&＃xff0c;还可以操作元素的特性&＃xff0c;为它添加更多子节点&＃xff0c;以及执行其他操作。来看下面的例子。

div.id &＃61; "myNewDiv";

div.className &＃61; "box";

在新元素上设置这些特性只是给它们赋予了相应的信息。由于新元素尚未被添加到文档树中&＃xff0c;因此设置这些特性不会影响浏览器的显示。要把新元素添加到文档树&＃xff0c;可以使用appendChild()、insertBefore()或replaceChild()方法。下面的代码会把新创建的元素添加到文档的元素中。

document.body.appendChild(div);

CreateElementExample01.htm

一旦将元素添加到文档树中&＃xff0c;浏览器就会立即呈现该元素。此后&＃xff0c;对这个元素所作的任何修改都会实时反映在浏览器中。

在IE中可以以另一种方式使用createElement()&＃xff0c;即为这个方法传入完整的元素标签&＃xff0c;也可以包含属性&＃xff0c;如下面的例子所示。

var div &＃61; document.createElement("

");

这种方式有助于避开在IE7及更早版本中动态创建元素的某些问题。下面是已知的一些这类问题。

不能设置动态创建的元素的name特性。

不能通过表单的reset()方法重设动态创建的元素&＃xff08;第13章将讨论reset()方法&＃xff09;。

动态创建的type特性值为"reset"的元素重设不了表单。

动态创建的一批name相同的单选按钮彼此毫无关系。name值相同的一组单选按钮本来应该用于表示同一选项的不同值&＃xff0c;但动态创建的一批这种单选按钮之间却没有这种关系。

上述所有问题都可以通过在createElement()中指定完整的HTML标签来解决&＃xff0c;如下面的例子所示。

if (client.browser.ie && client.browser.ie <&＃61;7){

//创建一个带name特性的iframe元素

var iframe &＃61; document.createElement("");

//创建input元素

var input &＃61; document.createElement("");

//创建button元素

var button &＃61; document.createElement("");

//创建单选按钮

var radio1 &＃61; document.createElement("

"value&＃61;\"1\">");

var radio2 &＃61; document.createElement("

"value&＃61;\"2\">");

}

与使用createElement()的惯常方式一样&＃xff0c;这样的用法也会返回一个DOM元素的引用。可以将这个引用添加到文档中&＃xff0c;也可以对其加以增强。但是&＃xff0c;由于这样的用法要求使用浏览器检测&＃xff0c;因此我们建议只在需要避开IE及更早版本中上述某个问题的情况下使用。其他浏览器都不支持这种用法。

6. 元素的子节点

元素可以有任意数目的子节点和后代节点&＃xff0c;因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点&＃xff0c;这些子节点有可能是元素、文本节点、注释或处理指令。不同浏览器在看待这些节点方面存在显著的不同&＃xff0c;以下面的代码为例。

Item 1

Item 2

Item 3

如果是IE来解析这些代码&＃xff0c;那么

元素会有3个子节点&＃xff0c;分别是3个

元素。但如果是在其他浏览器中&＃xff0c;

• 元素都会有7个元素&＃xff0c;包括3个
• 元素和4个文本节点&＃xff08;表示
• 元素之间的空白符&＃xff09;。如果像下面这样将元素间的空白符删除&＃xff0c;那么所有浏览器都会返回相同数目的子节点。

Item 1

Item 2

Item 3

对于这段代码&＃xff0c;

元素在任何浏览器中都会包含3个子节点。如果需要通过childNodes属性遍历子节点&＃xff0c;那么一定不要忘记浏览器间的这一差别。这意味着在执行某项操作以前&＃xff0c;通常都要先检查一下nodeTpye属性&＃xff0c;如下面的例子所示。

for (var i&＃61;0, len&＃61;element.childNodes.length; i

if (element.childNodes[i].nodeType &＃61;&＃61; 1){

//执行某些操作

}

}

这个例子会循环遍历特定元素的每一个子节点&＃xff0c;然后只在子节点的nodeType等于1&＃xff08;表示是元素节点&＃xff09;的情况下&＃xff0c;才会执行某些操作。

如果想通过某个特定的标签名取得子节点或后代节点该怎么办呢&＃xff1f;实际上&＃xff0c;元素也支持getElementsByTagName()方法。在通过元素调用这个方法时&＃xff0c;除了搜索起点是当前元素之外&＃xff0c;其他方面都跟通过document调用这个方法相同&＃xff0c;因此结果只会返回当前元素的后代。例如&＃xff0c;要想取得前面

元素中包含的所有

元素&＃xff0c;可以使用下列代码。

var ul &＃61; document.getElementById("myList");

var items &＃61; ul.getElementsByTagName("li");

要注意的是&＃xff0c;这里

的后代中只包含直接子元素。不过&＃xff0c;如果它包含更多层次的后代元素&＃xff0c;那么各个层次中包含的

元素也都会返回。

 想要了解更多Java基础知识&＃xff0c;可以点击评论区链接和小编一起学习java吧&＃xff0c;此视频教程为初学者而著&＃xff0c;零基础入门篇&＃xff01;给同学们带来全新的Java300集课程啦!java零基础小白自学Java必备优质教程_手把手图解学习Java&＃xff0c;让学习成为一种享受_哔哩哔哩_bilibili