【DOM】Node类型之Element类型

最新推荐文章于 2025-07-31 16:14:31 发布

lianghaihsia

最新推荐文章于 2025-07-31 16:14:31 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： dom 文章标签： dom

本文链接：https://blog.youkuaiyun.com/lianghaihsia/article/details/58595181

dom 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了DOM中的Element类型，包括如何获取和设置元素属性、创建元素、管理子节点等。此外还探讨了不同浏览器处理空白符的方式及其对子节点数量的影响。

本文章所有代码及其内容来自《javascript高级程序设计》，感兴趣的朋友可以购买纸质图书。

Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特征的访问。

nodeType 的值为 1；
nodeName的值为元素的标签名；
nodeValue的值为null;
parentNode 可能是Document或Element。
子节点可能是Element、Text、comment、CDATASection、EntityReference、ProcessionInstruction。

访问标签名（nodeName、tagName）

var div = document.getElementById("div");
alert(div.nodeName == div.tagName);  //true

以上代码中div.tagName输出是“DIV”而不是“div”。在HTML中标签始终是大小，而XML中会与源代码中保持一致，如果不确定自己的脚本将会在HTML还是XML文档中执行，最好是比较值钱将标签名转换为相同的大小写形式。

if(element.tagName == "div"){
//代码
}
if(element.tagName.toLowerCase() == "div"){
//代码
}

所有HTML元素都由HTMLElement类型表示。HTMLElement类型直接继承自Element并添加了一些属性。

id,元素在文档中的唯一标识符
title，有关元素的附加说明信息
lang，元素内容的语言代码
dir，语言的方向，值为“ltr”(left-to-right从左至右)或”rtl”从右至左。
className，元素指定的css。

2 取得特性

var div = document.getElementById("div");
alert(div.getAttribute("id"));   //div

<div class="myDiv" my_attribute="hello">
var value = div.getAttribute("my_attribute");  //undefined (IE除外)

3 设置特性

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

//所有特性都是属性，所以直接给属性复制可以设置特性的值
div.id="someOtherID";
div.align = "left";
//下面这样为DOM元素添加一个自定义的属性，该属性不会自动成为元素的特性
div.mycolor = "red";
alert(div.getAttribute("mycolor"));  //null(IE除外)
//删除特性
div.removeAttribute("align");

4 attributes属性
Element属性是使用attributes属性的唯一一个DOM类型。attributes属性中包含一个NamedNodeMap。NamedNodeMap对象拥有下列方法。

getNamedItem(name) – 范围nodeName属性等于name节点
removeNamedItem(name) – 移除
setNamedItem(name) –向列表添加节点，以节点的nodeName属性为索引
item(pos) – 返回位于数字pos位置的节点

5 创建元素

//创建一个div元素
var div = document.createElement("div");
div.id="myDiv";
div.class="box";
//创建input元素
var input = document.createElement("<input type=\"checkbox\">);

document.body.appendChild(div);

6 元素的子节点

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

如果是IE解析的话，那么<ul>会有三个子节点。其它的浏览器中，<ul>会有7个元素，包括三个<li>元素和4个文本节点（表示<li>元素之间的空白符）。如果将元素间的空白符删除，那么所有浏览器都会返回相同数目的子节点。

<ul><li>item1</li><li>item2</li><li>item3</li></ul>

对于这段代码，<ul>元素在任何浏览器都会包含3个子节点。如果需要通过childNodes属性遍历子节点，那么不要忘记浏览器之间的区别。也就是执行某项操作至亲，通常都要先检查一下nodeType属性。

for(var i=0,len=element.childNodes.length; i<len; i++){
    if(element.childNodes[i].nodeType == 1){
    // 执行某项操作
}
}