Python学习---day17

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

有较强的自我管理意识.

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

阅读量317

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/pyl3302795580/article/details/125771885

版权

DOM操作

DOM(document object model) 操作
js提供了一个document，指向的是HTML，在js中通过document对象可以直接或者间接获取页面对应内容得到标签
DOM操作具体内容 – 操作节点（节点就是标签）

DOM操作获取节点

1.直接获取节点

document.getElementById(id属性值) – 通过id属性值获取标签
document.getElementByClassName(class属性值)
document.getElementByTagName(标签名)

2.获取父节点

节点.parentElement – 获取指点节点的父节点

3.获取子节点

节点.childrenElement – 获取指定节点的所有子节点
节点.firstElementChild – 获取指定节点的第一个子节点
节点.lastelementChild – 获取指定节点的最后一个子节点

例：

<body>
		<div id="box1">
			<p id="p1">段落</p>
		</div>
		<div id="box2">
			<a href="">百度</a>
			<p id="p2">段落</p>
		</div>
		<div id="box3">
			<p id="p3">段落</p>
		</div>
		<script type="text/javascript">
			p1 = document.getElementById('p1')
			console.log(p1)
			p1.style.color = 'red'
			
			p2 = document.getElementsByTagName('p')
			console.log(p2)
			
			colors = ['blue', 'green', 'pink']
			for