JavaScript中函数的文档对象模型（DOM）

最新推荐文章于 2024-05-21 14:15:14 发布

煎蛋zai冒泡

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量250

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_68266487/article/details/126997701

版权

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

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

Core DOM：定义任意结构文档的标准对象集合\n\n

XML DOM：定义了针对XML文件标准对象集合

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

DOM CSS：定义了在程序中操作ＣＳＳ样式的接口

DOM Ｅｖｅｎｔｓ：给ＤＯＭ对象添加事件处理

DOM（Document Object Model):文档对象模型

可以干什么？

(1)获取一个元素

(2)移除一个元素

(3)创建一个元素

(4)向页面里添加一个元素

(5)给元素绑定一些事件

(6)获取元素的属性

(7)给元素添加一些css样式

DOM的核心对象就是domcument对象

domcument对象是浏览器内置对象的一个对象，里面存储着专门用来操作元素的各种方法

文档结构：

获取节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName(节点名称）:

所包含的元素的标签名称永远都是大写的

元素节点的nodeName是标签名称

属性节点的nodeName是属性名称

文本节点的nodeName永远是#text

文档节点的nodeName永远是#document

获取节点信息：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.sp {
				color: blueviolet;
			}
		</style>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="点击" />
		<div id="div1">
			这是第一个div标签
		</div>
		<div id="div2">
			这是第二个div标签
		</div>
		<ul>
			<li>这是ul标签</li>
			<li>这是ul标签</li>
			<li>这是ul标签</li>
			<li>这是ul标签</li>
		</ul>
		<span class="sp">
			这是span标签
		</span>
		<p class="sp">
			这是sp标签
		</p>
		<script type="text/javascript">
			document.getElementById("btn").onclick = function() {
				//通过标签的id来获取元素
				var div1 = document.getElementById("div1")
				div1.innerHtML = "更改后的div"
				var div2 = document.getElementById("div2")
				div2.innerHtML = "更改后的div"
				//通过标签名获取标签
				var divs = document.getElementsByTagName("div")
				//console.log(divs)
				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)
				//获取所有属性class的值是sp的标签
				var cls = document.getElementsByClassName("sp")
				console.log(cls)
				//通过name属性来获取标签
				var uname = document.getElementsByName("uname")
				console.log(uname[0])
				//通过选择器名称来获取标签，只能获取第一个
				var a = document.querySelector(".sp")
				console.log(a)
				//通过选择器名称来获取所有满足条件的标签
				var a2 = document.querySelectorAll(".sp")
				console.log(a2)
				//通过标签的id属性的值获取标签
				console.log(div1)

				//
				console.log(document.body)

			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="添加节点" onclick="add()">&nbsp;
		<input type="button" value="删除节点" onclick="del()">&nbsp;
		<input type="button" value="修改节点" onclick="update()">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			var ul=document.querySelector("ul")
			//添加一个新的li标签
			function add(){
				//创建一个节点
				var li=document.createElement("li")
				li.innerHTML="新增加的节点"
				//appendChild向一个标签中增加子标签
				ul.appendChild(li)
			}
			function del(){
				//要删除第一个子元素
				//document.firstElementChild
				var li=document.querySelectorAll("li")[0]
				
				ul.removeChild(li)//删除的使标签中的指定的子元素
				ul.remove()//会将所有的子元素清空，包括元素本身
				
			}
			function update(){
				var li=document.querySelectorAll("li")[1]
				li.innerHTML="更新后的"
			}
		</script>
	</body>
</html>

煎蛋zai冒泡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中函数的文档对象模型（DOM）

它以树形结构表示文档（HTML,XML等），定义了便利，检查和修改各节点的属性和方法。Core DOM：定义任意结构文档的标准对象集合\n\n。DOM CSS：定义了在程序中操作ＣＳＳ样式的接口。文档节点的nodeName永远是#document。所包含的元素的标签名称永远都是大写的。元素节点的nodeName是标签名称。属性节点的nodeName是属性名称。HTML DOM:定义了针对HTML文件的标准对象集合。每个节点都拥有包含着关于节点某些信息的属性。(5)给元素绑定一些事件。(6)获取元素的属性。
复制链接

扫一扫