js dom获取对象

最新推荐文章于 2024-09-10 10:22:59 发布

图图爱上壮壮妈

最新推荐文章于 2024-09-10 10:22:59 发布

阅读量127

点赞数

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

本文链接：https://blog.csdn.net/ChinaLibrary/article/details/123937225

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文档对象模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom</title>
	</head>
	<body>
		<ul id="city"><li id="bj">北京</li>
			<li id="sh">上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		DOM文档对象模型
		<button id="btn04" type="button" onclick="alert('点我')">按钮</button>
		<button id="btn" type="button"ondblclick="alert('点我')">双击按钮</button>
		<button id="btn" type="button"onmouseover="alert('点我')">鼠标移入</button>
		<button id="btn" type="button"onmousedown="alert('点我')">鼠标移出</button>
		<button id="btn" type="button"onkeydown="alert('点我')">键盘按下回车</button>
		<button id="btb" type="button">单击获取按钮</button>
		<button id="butn" type="button">绑定事间</button>
		<button id="btn07" type="button">btn07</button>
		<script type="text/javascript">
			//获取按钮对象
			var bbtn = document.getElementById('butn');
			var bbt = document.getElementById('btb'); 
			//为对象绑定事件
			bbt.onclick = function(){
				var bb = document.getElementById('btb');
				alert('绑定事间的按钮');
				alert(bb.innerHTML)//innerHtml可以获取对象里面的html代码
				
			}
			//onload事件，页面或图片加载完成触发，为window绑定一个onload事件
			window.onload = function(){
				alert('全部加载完毕');
			}
			
			//获取元素节点
			// document.getElementById()通过id属性获取一个元素节点对象
			// document.getElementsByName()通过标签名获取一组元素名 
			// document.getElementsByClassName()通过name属性获取一组元素节点
			
			
			
			//获取元素的子节点
			var btn04 = document.getElementById("btn04");
			btn04.onclick = function(){
				var city =document.getElementById('city');//获取id是city的元素
				var lis = city.getElementsByTagName('li');//查找#city下所有li节点
				var cns = city.childNodes;//childnode会返回包括主节点在内的所有节点
				alert(cns.length);
				for(var i=0;i<lis.length;i++){
					// alert(lis[i].innerHTML);//返回所有li子节点
				}
				
			};
			
			var cns2 = city.children;//获取当前元素的所有子元素
			alert(cns2.length);
			var all = document.getElementById('city');
			var fir = all.firstChild;//firstchild可以获取到当前元素的第一个子节点
			var last = all.lastChild;//lastchild可以获取当前元素的最好一个子元素
			alert(fir.innerHTML);
			
			
			
			//获取元素的父节点和兄弟节点
			/*parentNode父节点
			  previousSibling前一个兄弟节点
			  nextSibling后一个兄弟节点
			*/
		   //定义一个函数，专门用来为指定元素指定单击响应函数
		   // idstr要绑定单击响应函数的对象的id属性
		   // fun 事间的回调函数，当单击元素时，该函数将会被触发
		   function myClick(idstr,fun){
			   // var btn document.getElementById(idstr);
			   btn.onclick = fun;
		   }
		   myClick('btn07',function(){//为id是btn07的按钮
		   alert('提示')
			   var bj = document.getElementById('bj');
			   var pn = bj.parentNode;
			   alert(pn.innerText);//获取父元素的文本信息
		   });
		</script>
	</body>
</html>