DOM对象下的Node子元素document和Element

最新推荐文章于 2022-10-10 08:40:12 发布

北极猿

最新推荐文章于 2022-10-10 08:40:12 发布

阅读量780

点赞数

文章标签： js dom html5 javascript

本文链接：https://blog.csdn.net/weixin_45478041/article/details/104380610

版权

	## DOM对象下的Node子元素document和Element

作者：北极熊
    	时间：2020-02-18
    	描述：dom对象
    	
    	DOM操作（Docunment Object Model）文档对象模型
    	DOM树形结构中，根节点是Node，Node下有两个子元素，一个Document一个是Element
    	docunment我们可以理解成工具类，它代表当前文档网页，同多document可以操控页面中的任何标签
		前提是先根据docuemnt获取标签对应的dom对象
    	Element:任何dom对象都会继承Element：比如HTMLElement下游许多的标签HTMLInputlment
    	页面的好多标签 JS想操作标签 HTML和JS不是一个语言但是前端开发离不开JS语言，
    	于是商议每一个HTML每一个标签对应一个dom元素，所以JS可以操作标签的任何属性。
    	JS中定义了非常多的dom对象，JS操作标签的时候先获取dom对象然后根据dom对象来操控标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
				function TimeRun(){
					//时间  new Date是内置函数  获取当前的的时间
				var date =new Date();
				var year=date.getFullYear();
				var month=date.getMonth()+1;//从0开始的
				var day=date.getDate();//获取天
				var week=date.getDay();//星期几
				var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
				var hour=date.getHours();
				var minutes=date.getMinutes();
				var second=date.getSeconds();
				var timeStr=year+"年"+month+"月"+day+"日"+" "+arr[week]+hour+"时"+minutes+"分"+second+"秒";
				//把拼接好的字符串放在div元素中
				//获取div标签对应的dom对象
				var divObj=document.getElementById("time");
//				 document.getElementsByName()获取HTML元素的name属性值
//				document.getElementsByTagName()获取HTML元素的标签名					
				//alert(divObj);结果是Object HTMLdivElement  是HTML标签的div元素
				//操作dom的属性
				divObj.innerHTML=timeStr;
				}
			
			
			//第一个参数：是被调用的函数      第二个参数：是都就后被调用  单位是毫秒
			window.setInterval("TimeRun()",1000);
			//操作是一样的 但是只会被调用一次 
		//	window.setTimeout("TimeRun()",1000);
			
		
		</script>
		<script type="text/javascript">
			function queryTest(){
				//根据页面的元素获取id获取对应的dom对象
				var intputObj=document.getElementById("keyword");
				alert(intputObj.value+"=="+intputObj.id);
			}
			
		</script>
	</head>

	<body>
		<div id="time"> </div>
		
		请输入关键字：<input type="text" id="keyword">
		<input type="button" value="查询" onclick="queryTest()" />
	</body>
</html>

北极猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM对象下的Node子元素document和Element

## DOM对象下的Node子元素document和Element作者：北极熊时间：2020-02-18 描述：dom对象 DOM操作（Docunment Object Model）文档对象模型 DOM树形结构中，根节点是Node，Node下有两个子元素，一个Document一个是Element docunment我们可以理解成...
复制链接

扫一扫