DOM-Element类型

专注于为中小企业提供网站设计制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业赤壁免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

Element类型

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

nodeType的值为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode的值为Document或Element
其子节点可能是Element、Text、CDATASection、EntityReference、ProcessingInstruction或者Comment

要访问元素的标签名，可以使用nodeName属性、也可以使用tagName属性；这两个属性会返回相同的值

可以像下面这样取得这个元素以及标签名

1          var div = document.getElementById('myDiv');2          console.log(div.nodeName); //"DIV"3          console.log(div.tagName == div.nodeName); //true

div.tagName实际上输出的是大写形式，通常转换为小写形式

1         if (element.tagName.toLowerCase() == "div"){//这样最好2             //在此执行操作3         }

1、HTML元素

所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。每个HTML元素都存在下列标准特性：

id,元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向
className，与元素的class特性相对应

DOM-Element类型

2 3 var div = document.getElementById('myDiv');4 console.log(div.id); //myDiv5 console.log(div.className); //bd6 console.log(div.title); //BOdy text7 console.log(div.lang); //en8 console.log(div.dir); //ltr

DOM-Element类型

当然也可以给他们赋予新值

2、取得特性

操作特性的DOM方法主要有三个：getAttribute()、setAttribute()、removeAttribute()

1         var div = document.getElementById('myDiv');2         console.log(div.getAttribute('id'));//myDiv3         console.log(div.getAttribute('class')); //bd4         console.log(div.getAttribute('title')); //BOdy text5         console.log(div.getAttribute('lang')); //en6         console.log(div.getAttribute('dir'));//ltr

如果给定的名称特性不存在，则返回null;

通过getAttribute()方法也可以取得自定义特性，例如：

任何元素的所有特性，也都可以通过DOM元素本身的属性来访问。不过只有公认的特性才会以属性的形式添加到DOM对象中。

1 function outputAttributes(element){ 2 var pairs = new Array(), 3 attrName, 4 attrValue, 5 i, 6 ien; 7 8 for(i=0,len=element.attributes.length;i

DOM-Element类型

5、创建元素

使用document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。例如创建一个

元素。

1         var div = document.createElement("div");

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

1         div.id = "myNewDiv";2         dov.className = "box";

要把这些新元素添加到文档树中可以使用appendChild()、insetrBefore()或者replaceChild()方法。

6、元素的子节点

元素可以由任意数目的子节点和后代节点，不同浏览器在看待这些节点方面存在显著的不同，以下面的代码为例：

1         2             Item 1
3             Item 2
4             Item 3
5

如果是IE累解析这些代码，那么

元素。但如果是在其他浏览器中。
- 元素和4个文本节点（表示
- 元素之间的空白符）。
  如果像下面这样将元素间的空白符删除，那么所有的浏览器都会返回相同的数目的子节点
```
        Item 1
Item 2
Item 3
```

1 for(var i=0;len=element.childNodes.length;i

如果像通过某个特定的标签名取得子节点或后代节点可以使用getElementsByTagName()方法。

1         var ul = documet.getElementById('myList');2         var items = ul.getElementsByTagName('li');

要注意的是，这里

元素也都会返回。

网页题目：DOM-Element类型
当前路径：http://cqcxhl.com/article/geeiic.html

重庆分公司，新征程启航

DOM-Element类型

Element类型

其他资讯