DOM文档对象模型通过id来访问HTML元素

最新推荐文章于 2024-04-21 11:00:35 发布

lx__angel

最新推荐文章于 2024-04-21 11:00:35 发布

阅读量1.2k

点赞数

文章标签： html 文档 dom 对象 id

本文链接：https://blog.csdn.net/lx__angel/article/details/78737047

版权

Document Object Model文档对象模型

DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：

元素节点：<p>、<ul>

文本节点:被包含在原始节点内部

属性节点：修饰元素节点

<a title="JS" href="http://www.iotek.com.cn">海通科技</a> 元素节点 属性节点 文本节点

DOM主要提供了两种方式来访问HTML元素

1、根据id访问，通过document对象调用getElementById()方法来查找具有唯一id属性值得元素。

2、利用节点关系访问html元素。

<html>
	<head>
		<title>使用getElementById方法查找元素</title>
		<script type="text/javascript" charset="utf-8">
			function showContent(){
				//var myDiv=document.getElementById("myDiv");
				//var textName=document.getElementById("textName");
				//var content=document.getElementById("btn_show");
				
				var myDiv,textName,content;
				with(document){
					myDiv=getElementById("myDiv");
					textName=getElementById("textName");
					content=getElementById("content");
				}
				
				alert(myDiv.innerHTML+"\n"+textName.value+"\n"+content.value);
				
			}
		
		</script>
	</head>
	<body>
		<div id="myDiv">我的div快</div>
		<textarea id="content" rows="3" cols="25">好好学习，天天向上</textarea><br/>
		<input type="text" id="textName" value="huzhenhua"/><br/><br/>
		<input type="button" id="btn_show" value="访问3个元素的内容" οnclick="showContent()"/>
	</body>

</html>

lx__angel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM文档对象模型通过id来访问HTML元素

Document Object Model文档对象模型DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：元素节点：、文本节点:被包含在原始节点内部属性节点：修饰元素节点海通科技元素节点属性节点文本节点DOM主要提供了两种方式来访问HTML元素1、根据id访问，通过document对象调用getElementById()方法来查找具有
复制链接

扫一扫