HTML——JS—文档对象document

最新推荐文章于 2024-04-12 08:57:44 发布

Jhinhua

最新推荐文章于 2024-04-12 08:57:44 发布

阅读量173

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104921764

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

文档对象document
获取元素节点

文档对象document

DOM --- Document Object Model
		文档对象模型
		
		在文档对象模型中  它是以节点的形式来操作文档的
			常用的节点的分类：
					元素节点 --- 标签
					属性节点 --- 标签的属性
					文本节点 --- 文本节点
				文本是嵌套在标签之间的  文本节点 是元素节点的子节点
				属性是跟标签是平级的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p class="dou">红豆生南国，春来发几枝。愿君多采撷，此物最相思。</p>
		<script>
			// 1.怎么获取p元素
			// 根据选择器获取 --- 在文档上获取信息就得使用文档对象
			var p_node = document.querySelector(".dou")
			// 获取标签上的文本 // 重新设置
			var text = p_node.innerText
			console.log(text)
			
			// 重置文本  在原来的基础上进行修改
			//p_node.innerText += "这是一首相思诗"
			//p_node.innerText = "相思"
			
			// 设置样式  style属性的值
			p_node.style.color = "red"
			p_node.style.border = "solid 1px blue"
			
		</script>
	</body>
</html>

获取元素节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/**在head中获取文档中的内容时 要等页面加载完成之后才可以操作
			 * 因为代码是从上向下执行的 在进行JS操作的时候 文档上的元素还没有加载 所以是获取不到的
			 * 想要获取的话  等页面加载完成的时候 才能获取
			 * onload ---- 页面加载完成的时候触发这个事件
			 */
			window.onload = function(){
				// 1.根据元素名称 获取元素节点集
				var p_nodes = document.getElementsByTagName("p")
				console.log(p_nodes)
				// 在节点集中根据索引获取其中的节点
				var p_node = p_nodes[0]
				console.log(p_node.innerText)
				
				// 2. 根据id名称获取对应的元素节点
				var p_id_node = document.getElementById("tree")
				// 设置该节点的样式
				p_id_node.style.color = "palevioletred"
				
				// 根据类名获取对应的元素节点集
				var p_class_nodes = document.getElementsByClassName("spring")
				// 集合的长度
				console.log(p_class_nodes.length)
				p_class_nodes[1].style.backgroundColor = "plum"
				// 根据选择器 获取 满足选择器条件的第一个元素节点
				var p_selector_node = document.querySelector(".spring")
				p_selector_node.style.border = "dotted 2px blue"
				// 根据选择器 获取 满足选择器的所有节点 --- 节点集
				var p_selector_nodes = document.querySelectorAll(".spring")
				console.log(p_selector_nodes.length)
			}
		</script>
	</head>
	<body>
		<p class="spring">
			岱宗夫如何？齐鲁青未了。
		</p>
		<p id="tree">造化钟神秀，阴阳割昏晓。</p>
		<p class="spring">
			荡胸生曾云，决眦入归鸟。会当凌绝顶，一览众山小。
		</p>
		
	</body>
</html>

Jhinhua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——JS—文档对象document

目录文档对象document 获取元素节点文档对象document DOM --- Document Object Model 文档对象模型在文档对象模型中它是以节点的形式来操作文档的常用的节点的分类：元素节点 --- 标签属性节点 --- 标签的属性文本节点 --- 文本节点文本是嵌套在标签之间的 ...
复制链接

扫一扫

专栏目录