js原生DOM操作

最新推荐文章于 2024-09-06 09:58:40 发布

啦两个啦

最新推荐文章于 2024-09-06 09:58:40 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/zyy446688/article/details/128191144

版权

js原生DOM操作

---------------获取节点

---------------创建添加和删除

---------------操作节点内容和节点属性

---------------按钮点击事件

----------------窗口基本操作

一、获取节点

<!-- 1.什么是节点 - js中所谓的节点就是html中的标签 -->
<!-- 2.获取节点 -  用js获取标签
 1）直接获取节点
 document.getElementById()：获取所有id值为指定值的标签
 document.getElementsByClassName('c1')：获取所有class值为指定值的标签
 var result2 = document.getElementsByTagName('a')：获取所有的指定标签
 注意：用js代码操作标签的时候，那么js代码必须要在需要操作的标签后面
 -->

<!--js中定义变量：
 全局：变量名 = 数据
 函数体：var 变量名 =  数据
 let 变量名 = 数据-->
 <!-- 获取标签需要掌握：根据id属性、class属性和标签获取标签；已经获取到一个标签以后，怎么通过这个已经拿到的标签获取它的父标签、所有的子标签、第一个子标签和最后一个子标签 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p class="c1">我是段落1</p>
		<div id="box1">
			<a href="" class="c1">我是超链接1</a>
			<p id="p1">我是段落2</p>
			<div id="box2">
				<p class="c1">我是段落3</p>
				<a href="">我是超链接2</a>
				<span>我是span1</span>
			</div>
		</div>
	</body>
</html>

<!--------------- 1.直接获取标签 ----------------->
<script>
	
	//1)获取网页中id属性为p1的标签
	p1=document.getElementById('p1')
	console.log(p1)
    
	//2) 获取所有class属性值为c1的标签，返回一个容器
	var result = document.getElementsByClassName('c1')
	console.log(result)
	// 获取容器中下标为0的元素
	// console是打印
	console.log(result[0])
	
	// 3)获取所有的a标签
	var result2 = document.getElementsByTagName('a')
	console.log(result2)
</script>



<!---------------- 2.获取父子节点 ------------------>
<script>
	var div2 = document.getElementById('box2')
	// 1)获取父节点：节点对象.parentElement
	var result = div2.par