DOM-Element类型-创新互联

1         console.log(div.id) //myDiv2         console.log(div.my_special_attribute) //underfined(IE除外)

有两类特殊的特性，他们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。第一类就是style,在通过getAttribute()访问时，返回的是css文本，而通过属性来访问他则返回的是一个对象。第二类就是onclick这样的时间处理程序。通过getAttribute()访问时，返回的是相应代码的文本，而通过属性来访问时，则会返回一个JavaScript函数

由于存在这些差别，在通过JavaScript以编程方式操作DOM时，开发人员经常不使用getAttribute()而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用getAttribute()方法。

3、设置特性

setAttribute()接受两个参数：要设置的特姓名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在则创建改属性并设置相应的值

1         div.setAttribute('id','someOtherId');2         div.setAttribute('class','ft');

所有特性都是属性，所以可以直接给属性赋值：

1         div.id = 'someOtherId';

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

1         div.mycolor = "red";2         console.log(div.getAttribute('mycolor')); //null(IE除外)

removeAttribute()用于彻底删除元素的特性：

1         div.removeAttribute('class');

4、attribute属性

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

getNamedItem(name):返回nodeName属性等于name的节点；
removeNamedItem(name):从列表中移除nodeName属性等于name的节点
setNamedItem(node):向列表中添加节点，以节点的nodeName属性为索引
item(pos):返回位于数字pos位置处的节点

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

1         var id = element.attributes.getNamedItem("id").nodeValue;

以下是使用方括号语法的简写形式：

1         var id = element.attributes["id"].nodeValue = "someOtherId";

调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果一样：直接删除给定名称的特性。他们的唯一区别就是removeNamedItem()返回表示删除特性的Attr节点

以下代码展示了如何迭代元素的每个特性，然后将他们构造成name="value" name="value"这样的字符串格式

 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
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累解析这些代码，那么
元素会有3个节点，分别是3个
元素。但如果是在其他浏览器中。
元素都会有7个元素，包过3个
元素和4个文本节点（表示
元素之间的空白符）。
如果像下面这样将元素间的空白符删除，那么所有的浏览器都会返回相同的数目的子节点
        
Item 1
Item 2
Item 3

如果需要通过childNodes属性遍历子节点，那么通常都要先检查一下nodeType属性，如下：

1         for(var i=0;len=element.childNodes.length;i
如果像通过某个特定的标签名取得子节点或后代节点可以使用getElementsByTagName()方法。
1         var ul = documet.getElementById('myList');2         var items = ul.getElementsByTagName('li');
要注意的是，这里
的后代中只包含直接子元素。不过，如果它包含更多层次的后代元素，那么各个层次中包含的
元素也都会返回。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
            

            网页名称：DOM-Element类型-创新互联            

            URL分享：http://cdkjz.cn/article/dejhgj.html