Javascript dom 的那点常识(2012.02.26)

最新推荐文章于 2024-09-17 21:49:02 发布

iteye_20503

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量93

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_20503/article/details/82282545

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

[b]1.获取元素的属性[/b]
DomElement.getAttribute(AttrName,AttrValue);
[b]2.设置、添加元素的属性(可自定义:data-Attributes)[/b]
DomElement.setAttribute(attrName,AttrValue);// IE下不支持设置 class 与 style
[b]3.元素绑定事件(3.1:W3C标准,3.2:仅兼容IE)[/b]
3.1. DomElement.addEventListener(evtn,fn,boole);//evtn:click,dblclick..
3.2. DomElement.attachEvent(evtn,fn);//evtn:onclick,ondblclick...


<!DOCTYPE HTML>
<html debug="true">
<head>
<meta charset="utf-8">
<title>javascript</title>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<!---Firebug Lite--->
<script type="text/javascript">
dom = {
	id:function(id){
		return document.getElementById(id);
	},
	name:function(name){
		return document.getElementsByName(name);
	},
	tagName:function(tname){
		return document.getElementsByTagName(tname);
	}
}
demo1 = function(){
	str = '绑定元素事件';
	if(!isIE)
		str+='[W3C标准]';
	else
		str+='[仅IE支持]';
	alert(str);
}
isIE = navigator.userAgent.match(/msie/i);
init = function(){
	/*
	 	@设置元素属性  DomElement.setAttribute(AttrName,AttrValue);[PS:IE下无法设置class,style属性]
		@获取元素属性  DomElement.getAttribute(AttrName);
		[各浏览器均符合W3C标准]
	*/
	div = dom.tagName('div')[0];
	div.setAttribute('data-div','thisDiv');//设置属性
	div.setAttribute('id','div');
	if(!isIE)
		console.log(div.dataset.div);//HTML5下获取data-attribute的方法 目前只支持Chrome 和 opera
	else
		console.log(div.getAttribute('data-div'));//获取属性

	/*
		@元素绑定事件 
		W3C标准 DomElement.addEventListener(evtn,fn,boole);
		// arg1[String]:事件名称,arg2[Function]:调用方法名称,arg3[boole]:false代表支持浏览器事件捕获功能，true代表支持浏览事件冒泡功能．
		IE DomElement.attachEvent(evtn,fn); 
		// 注意 evtn: on + eventName
	*/
	divByID = dom.id('div');
	if(!isIE)
		divByID.addEventListener('click',demo1,false);
	else
		divByID.attachEvent('onclick',demo1);

}
window.onload = init;
</script>
<style type="text/css">
.red{
	color:#F00;
}
</style>
</head>

<body>
	<div>HTML DivElement</div>
</body>
</html>