js原生DOM操作

啦两个啦

2023-10-22 帮助1人

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.parentElement
	console.log(result)
	
	// 2）获取所有的子节点：节点对象.children
	var result = div2.children
	console.log(result)
	
	// 3)获取第一个子节点:节点对象.firstElementChild
	var result =div2.firstElementChild
	console.log(result)
	
	// 4)获取最后一个子节点:节点对象.lastElementChild
	var result = div2.lastElementChild
	console.log(result)
</script>

二、创建添加和删除

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

<!-------------------- 1.创建和添加 --------------------->
<script>
	// 1.创建节点:document.createElement('标签名')
	// 创建一个div标签
	div1 = document.createElement('div')
	
	// 创建一个a标签
	a1 = document.createElement('a')
	
	// 2.添加标签
	// 1)节点对象1.appendChild(节点对象2)  -   在节点1中的最后添加节点2，节点1是节点2的父标签
	// document.getElementsByTagName('body')  // 得到的是一个容器
	body = document.getElementsByTagName('body')[0]
	box1 = document.getElementById('box1')
	box2 = document.getElementById('box2')
	
	body.appendChild(div1)
	box2.appendChild(a1) //只能在一个地方添加，再添加到其他地方，之前添加的位置变无效
	 
	// 2)节点对象1.box2.insertBefore(节点对象2，节点对象3) -  将节点2插入到节点1中节点3的前面（1和2是父子关系，2和3是兄弟关系）
	box2.insertBefore(a1,box2.firstElementChild)
	box2.insertBefore(div1,box2.laseElementChild)
</script>


<!----------------- 2.删除标签 ---------------------->
<script>
	// 删除原则：找到需要删除的标签，执行删除操作
	// 节点.remove()  -  删除指定节点
	var p1 = box1.firstElementChild
	p1.remove()
</script>

三、操作节点内容和节点属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>我是段落1 <b>加粗的段落</b> </p>
		<img src="img/小柯基(1).png" alt="">
		<input type="text" value="张三">
		<a href="https://www.百度.com">百度</a>
		<div id="box1"></div>
	</body>
</html>


<script>
    
	// 1.获取和修改双标签的标签内容
	// 1）获取标签内容
	// 节点.innerText  -   获取标签的标签内容（只获取内容部分的纯文字内容）
	// 节点.innerHTML  -   获取标签的标签内容（所有内容）
	var p1 = document.getElementsByTagName('p')[0]
	console.log(p1.innerText)
	console.log(p1.innerHTML)
	// 2）修改标签内容
	p1.innerText = 'hello world!<b>加粗的段落</b>'    //得到hello world!<b>加粗的段落</b>
	// p1.innerHTML = 'hello world!<b>加粗的段落</b>' //得到hello world!加粗的段落
	
    
    
	// 2.获取和修改标签属性
	// 1)获取属性：节点.html属性名
	// 2)修改属性：节点.html属性名 = 属性值
	var a1 = document.getElementsByTagName('a')[0]
	console.log(a1.href)
	
	var i1 = document.getElementsByTagName('input')[0]
	console.log(i1.type,i1.value)
	
	a1.innerText='京东'
	a1.href='https://www.jd.com'
	i1.value='哈哈'
	
    
    
	// 3.修改标签的样式
	// 设置文字颜色为红色，字体大小为20像素
	// a1.style= 'color:red; font-size:20px;'
	
	a1.style.fontSize='20px'
	a1.style.color='red'
	
	p1.style.border='1px solid blue'
	p1.style.backgroundColor='rgb(107,107,107)'
</script>



<!-- 案例:创建添加的实际应用 -->
<script>
	var box1=document.getElementById('box1')
	
	// 创建p标签
	var p1 =document.createElement('p')
	// 添加标签内容和属性
	p1.innerText='你好'
	p1.className='c1'
	// 修改样式
	// p1.style.width='100px'
	// p1.style.height='200px'
	// p1.style.backgroundColor='yellow'
	// p1.style.color='pink'
	p1.style='width: 200px;height: 60px;background-color: yellow;color: blue;font-size:20px;4'
	box1.appendChild(p1)
</script>

四、按钮点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box"></div>
		<hr>
		<input type="text">
		<button onclick="addTag()">添加</button>
		<button onclick="delTag()">删除</button>
	</body>
</html>


<script>
	var p1=document.getElementById('box')
	var i1 =document.getElementsByTagName('input')[0]

	// 封装固定写法 addTag是自己根据代码功能起的名字，需要和按钮onclick的值一致
	// 这个里面的代码就是每次点击按钮的时候会执行的代码
	function addTag(){
	var p1=document.createElement('p')
	p1.innerText=i1.value
	box.append(p1)
	}    //功能：每点击一次添加输入内容
    
	function delTag(){
	p2=box.lastElementChild
	p2.remove()
	}  //功能：每点击一次，删除最后一行的数据
</script>

五、窗口基本操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="addNewWindow()">打开新的窗口</button>
		<button onclick="closeWindow()">关闭窗口</button>
		
		<hr>
		<button onclick="popOut1()">弹框1</button>
		<button onclick="popOut2()">弹框2</button>
		<button onclick="popOut3()">弹框3</button>
	</body>
</html>

<!----------------- 窗口相关操作 ------------------->
<script>
	// 1.打开新的窗口
	// open() -  创建一个新的空白窗口，返回一个窗口对象
	// open(地址) -  创建一个新的窗口，打开指定的页面，返回一个窗口对象
	// open(地址,'','width=?,height=?')  -  创建一个新的窗口，窗口大小是指定大小
	function addNewWindow(){
		// w1=open()
		// w2=open('https://www.百度.com')
		w3=open('https://www.百度.com','','width=500,height=400')
		
		// 单独设置过大小的窗口可以移动
		w3.moveTo(100, 100)
	}
	
    
	// 2.关闭窗口
	function closeWindow(){
		// 1）关闭指定窗口：窗口对象.close()
		w3.close()
		// 2)关闭当前窗口
		// close()
	}
</script>



<!------------------- 弹框相关操作 -------------------->
<script>
	// 1.只有提示信息和确定按钮的弹框
	// alert(提示信息) 
	function popOut1(){
		alert('登录成功')
	}
    
	// 2.一个问题加确定和取消按钮的弹框
	// confirm('提示信息') - 如果用户点击的是确定按钮，返回true；否则返回false
	function popOut2(){
		var result = confirm('是否确定要删除这个商品？')
		// console.log(result)
		if(result==true){
			// 确定的时候要执行的操作
		}else{
			// 取消时候要执行的操作
		}
	}
	
	// 3.带一个提示信息，一个确定按钮，一个取消按钮和一个输入框
	// prompt(提示信息，输入框默认内容) -  如果用户点击的是取消按钮，返回null，如果点确定返回输入框内容
	function popOut3(){
		var result=prompt('请输入水果名称','苹果')
		console.log(result)
		if(result == null){
			// 取消对应的代码
		}else{
			// 确定对应的代码
		}
	}
</script>

这篇好文章是转载于：学新通技术网

js原生DOM操作

js原生DOM操作

一、获取节点

二、创建添加和删除

三、操作节点内容和节点属性

四、按钮点击事件

五、窗口基本操作

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开