DOM（一）一些属性方法介绍以及兼容性问题

最新推荐文章于 2022-04-02 11:20:26 发布

VIP文章茂树24

最新推荐文章于 2022-04-02 11:20:26 发布

阅读量5.7k

点赞数 1

分类专栏： javascript 文章标签： dom 兼容性 javascript

本文链接：https://blog.csdn.net/wmaoshu/article/details/51967146

版权

DOM中Element类型：（以下所有的属性仅仅是只读属性）

一、node.nodeType 以数字值返回指定节点的节点类型。

存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点(前三个为重要)：
这里写图片描述

if(ul.nodeType == Node.ELEMENT_NODE){
alert(‘Node is an element’);
}
上述代码，在标准浏览器下可以正常的运行，在非标准的浏览器（ie8之下）下不能正常的运行。
解决办法：
if(ul.nodeType ==1){ alert(‘Node is an element’); } 使用nodeType属性与数字比较。

二、nodeName值为元素类型的标签名比如ul、 p等。
nodeValue值为null。
parentNode可能是document或者Element，子节点可能。Element,Text,Comment,ProcessingInstruction, CDATASection, EntityReference。
操作特性

一、HTML元素属性的方式获得特性

所有HTML元素通过HTMLElement类型或者它的子类型（HTMLDivElement 、HTMLImageElement）表示，HTMLElement类型是继承自Element类型，只不过多加了一些特有的属性，切子类型也有自己特有的属性和方法，比如img有src，title等特有属性。特别注意的是由于class是js中的关键字，要使用className获得class 的值。

对于获取和设置方式以及注意地地方在二三中通过对比的方式表述。

二、element.getAttribute(attributename)返回指定属性名的属性值。

这个方法传入一个属性名的字符串，不区分大小写。
比如ul.getAttribute(‘class’);由于参数为字符串，所以可以使用class不必使用className。通过这个方法可以获得自定义属性，在一些含有非关键字中使用的字符的属性名，用这个方法获得属性的值特别方便，比如在HTML5规范中，自定义属性前应该加上data-前缀以方便验证，其中包含了非法字符‘-’,可以使用ul.getAttribute(‘data-index’);获得。

特别的，当attributename为style时这个方法在IE7之前的版本返回的是一个对象，其他版本的浏览器返回的是CSS文本。当attributename为onclick这样的事件处理程序时这个方法在IE7之前的版本返回的是一个方法或者null，其他版本的浏览器返回的是函数代码字符串。

通过HTML元素属性的方式获得特性与getAttribute（）差别比较大。
1、自定义属性访问上的差别：
解析html代码的时候，标准的浏览器不会将元素的自定义属性加入到DOM对象中，在js中通过属性的方式访问自定义属性是不存在的结果为undefined，非标准的浏览器会将这个自定义属性加入到DOM对象中，在js中会访问到结果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul id="ul1"  index="hehe">
			<li>11111111</li>
			<li>22222222</li>
			<li>33333333</li>
			<li>44444444</li>
		</ul>
		
		<script type="text/javascript">
			var ul = document.getElementById('ul1');
			alert(ul.id);     /*标准与非标准都是div1*/
			alert(ul.index);/*标准为undefined 非标准为hehe*/
		</script>
	</body>
</html>

2.当属性为style时，返回一个对象，当属性为处理事件时，返回被复制的函数。

综上所述，在操纵DOM对象属性的时候，一般情况下使用HTML元素属性的方式获得特性，只有在获得自定义属性的值和一些含有非法字符的属性名的值的时候使getAttribute方法。

三、element.setAttribute(attributename,attributevalue)添加指定的属性，并为其赋指定的值。

与HTML元素属性的方式设置特性的方式相比，这个方法可以添加一些没有的自定义属性并赋值，但通过HTML元素属性的方式设置特性不会被设置。同时这个方法在IE7之前的版本也存在异常，所以除了设置自定义属性外，其他方式通过HTML元素属性的方式设置特性。

四、RemoveAttribute()移除特性，但是不经常使用，IE6之前的版本不支持这个方法。
操作内容

一、childNodes：表示某个元素子节点的集合，返回NodeList 对象。
<

最低0.47元/天解锁文章

茂树24

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
DOM（一）一些属性方法介绍以及兼容性问题

一、nodeType：以数字值返回指定节点的节点类型。存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点：二、childNodes：只读属性，表示某个元素子节点的集合，返回NodeList 对象。在标准浏览器下：返回的子节点中包含文本类型、元素类型、注释类型等，特别的包含文本类型中空文本即所谓的换行。在非标准的浏览器子节点中不包含文本类型中空文本，同时与节点
复制链接

扫一扫