Javascript的对象（二）

最新推荐文章于 2024-05-17 13:52:13 发布

箫——

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量265

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_70647138/article/details/127029472

版权

文档对象模型

DOM - Document Object Model，它是W3C国际组织的一套Web标准。它以树形结构表示文档(HTML、XML等)，定义了遍历、检查和修改各节点的属性和方法。

· W3C组织将DOM分为以下几种不同版本:

√Core DOM:定义任意结构文档的标准对象集合

√ XML DOM:定义了针对XML文件的标准对象集合

√HTML DOM:定义了针对HTML文件的标准对象集合

√DOM CSS:定义了在程序中操作CSS样式的接口

√DOM Events:给DOM对象添加事件处理。

HTML DOM定义了访问和操作HTML文档的标准方法，它把HTML文档呈现为带有元素、属性和文本的树形结构，定义了访问HTML文档对象的属性、方法和事件。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button"  id="btn" value="" />
		<div id="div1">
			这是一个div标签
		</div>
		<div id="div2">
			这是一个div标签
		</div>
		<ul>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
		</ul>
		<span class="sp">
			这是一个span标签
		</span>
		<p class="sp"></p>
		<input type="text" name="uname"  value="" />
		<script type="text/javascript">
			document.getElementById("btn").onclick = function(){
				var divs = document.getElementsByTagName("div")
				for(var i =0;i<divs.length;i++){
					console.log(divs[i])
					divs[i].innerHTML="更改后的div"
				}
				var ul = document.getElementsByTagName("ul")[0]
				console.log(ul)
				var els = document.getElementsByTagName("sp")
				console.log(els)
				var uname=document.getElementsByTagName("uname")
				console.log(uname[0])
				var querys=document.querySelector(".sp")
				console.log(querys)
				//通过对应的选择器
				var queryAll = document.querySelectorAll(".sp")
				console.log(queryAll)
				//通过标签的id属性的值获取标签
				console.log(div1)
				//
				console.log(document.body)
			}
		</script>
	</body>
</html>

箫——

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript的对象（二）

它以树形结构表示文档(HTML、XML等)，定义了遍历、检查和修改各节点的属性和方法。HTML DOM定义了访问和操作HTML文档的标准方法，它把HTML文档呈现为带有元素、属性和文本的树形结构，定义了访问HTML文档对象的属性、方法和事件。√HTML DOM:定义了针对HTML文件的标准对象集合。√ XML DOM:定义了针对XML文件的标准对象集合。√DOM CSS:定义了在程序中操作CSS样式的接口。√Core DOM:定义任意结构文档的标准对象集合。
复制链接

扫一扫