Javascript之DOM

最新推荐文章于 2024-09-16 08:47:17 发布

拖把湛屎，戳谁谁死

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量421

点赞数 4

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_70314704/article/details/139416314

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

DOM

document是整个文档的dom树

查找元素

可以通过id、class、name、tagName查找标签==id获取单个，其余获取的是数组==

//通过id查找 <p id="id">假设这是一个标签<p/>
var tag = document.getElementById("id")
tag.click = function(){
    this.innerText = "123"//修改文本内容
}

//通过class查找 <p class="class">假设这是一个标签<p/>
var clas = document.getElmentsByClass("class")[0]
clas.click = function(){
    this.innerText = "123"
}

//通过name查找 <input name="name" value="">假设这是一个标签<input/>
var name = document.getElmentsByName("name")[0]
name.value = "123123"

//通过标签名查找 <p>假设这是一个标签<p/>
var clas = document.getElmentsByTagName("p")[0]
clas.innerText = "12345"

获取、修改元素内容

通过document拿到某一个标签后，进而可以获得元素的内容，并加以修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="fun01()">获取属性 - innerText</button>
		<button onclick="fun02()">设置属性 - innerText</button>
		<h1>这是一个h1标签</h1>
		<button onclick="fun03()">获取属性 - innerHTML</button>
		<button onclick="fun04()">设置属性 - innerHTML</button>
		<h1>这是一个h1标签</h1>
		<h2></h2>
	</body>
	<script>
		
		var h1 = document.getElementsByTagName("h1")[0]
		var h2 = document.getElementsByTagName("h1")[1]
		function fun01(){
			console.log(h1.innerText)
		}
		
		function fun02(){
			h1.innerText = "这是一个修改后的h1标签"
		}
		
		function fun03(){
			console.log(h2.innerHTML)
		}
		
		function fun04(){
			h2.innerHTML = "<h2>这是一个修改后的h1标签</h2>"
		}
		
	</script>
</html>

获取、修改属性

通过document获取到的标签，不仅可以获取内容，还可以获取属性与样式并加以修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="fun01()">获取属性</button>
		<button onclick="fun02()">设置属性</button>
		<br />

		<img src="../img/hyg.jpg" width="100px" height="100px" />
		<br />
		<button onclick="fun03()">获取属性</button>
		<button onclick="fun04()">设置属性</button>
		<br />
		<img src="../img/avatar.jpg" width="100px" height="100px" />
		<h2></h2>
	</body>
	<script>
		var img1 = document.getElementsByTagName("img")[0]
		var img2 = document.getElementsByTagName("img")[1]

		function fun01() {
			console.log(img1.src)
			console.log(img1.width)
			console.log(img1.height)
		}

		function fun02() {
			img1.src = "../img/avatar.jpg"
			img1.width = "200"
			img1.height = "200"
		}

		function fun03() {
			console.log(img2.getAttribute("src"))
			console.log(img2.getAttribute("width"))
			console.log(img2.getAttribute("height"))
		}

		function fun04() {
			img2.setAttribute("src", "../img/hyg.jpg")
			img2.setAttribute("width", "100%")
			img2.setAttribute("height", "100%")
		}
	</script>
</html>

鼠标事件

鼠标有多种事件，包括点击、松开、移入、移出等四种常见事件，其中，移入和移出分别对应两种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img src="../img/hyg.jpg" alt="" 
		onmousedown="f1()"
		onmouseup="f2()"
		onmouseleave="f3()"
		onmouseover="f4()"
		onmouseenter="f5()"
		onmouseout="f6()"
		/>
	</body>
	<script>
		function f1(){console.log("mousedown")}//鼠标点击
		function f2(){console.log("mouseup")}//鼠标松开点击
		function f3(){console.log("mouseleave")}//鼠标离开
		function f4(){console.log("mouseover")}//鼠标在上方
		function f5(){console.log("mouseenter")}//鼠标鼠标进入
		function f6(){console.log("mouseout")}//鼠标不再上方
	</script>
</html>

键盘事件

键盘在输入时按照顺序会有三个事件：onkeydown、onkeypress、onkeyup

onkeypress只能监听字母和数字，不能监听ECS、ALT等按键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" onkeydown="f1()" onkeypress="f3()" onkeyup="f2()" />
	</body>
	<script>
		function f1() {
			console.log("keydown")
		}
		
		//onkeypress 事件只能监听字母和数字
		function f3() {
			console.log("keypress")
		} 
		
		function f2() {
			console.log("keyup")
		}
	</script>
</html>

页面加载事件

在一个HTML文件中，页面的加载顺序是从上往下加载，如果当需要加载某个标签时，js代码比标签更先加载，那么代码就会失效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = () => {
				var h1 = document.getElementsByTagName("h1")[0]
				h1.onclick = () => {
					h1.style.color = "red"
					console.log(h1.style.color)
				}
			}
		</script>
	</head>
	<body>
		<h1>这是一个h1标签</h1>
	</body>
</html>

焦点事件

焦点事件分为获得焦点事件和失去焦点事件，其主要目的就是关注点的变化（比如我需要输入信息。我的焦点就在输入框）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" placeholder="请输入..." onfocus="f1(this)" onblur="f2(this)"/>
	</body>
	<script>
		function f1(o){o.placeholder = ""}//获取焦点事件
		function f2(o){o.placeholder = "请输入..."}//失去焦点事件
	</script>
</html>

操作节点

这里的操作节点指的是新增一个标签，步骤分为：1、创建标签 2、为标签添加内容和属性 3、将标签插入到某个位置中

而删除标签则是由父标签直接操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="f1()">新建p标签</button>
		<button onclick="f2()">新建img标签</button>
		<button onclick="f3()">删除img标签</button>
		<div id="newAera"></div>
	</body>
	<script>
		function f1(){
			var p = document.createElement("p")
			var text = document.createTextNode("这是一个新建的文本")
			p.appendChild(text)
			newAera.appendChild(p)
		}
		function f2(){
			var img = document.createElement("img")
			img.setAttribute("src", "../img/hyg.jpg")
			img.setAttribute("width", "100px")
			img.setAttribute("height", "100px")
			newAera.appendChild(img)
		}
		function f3(){
			var img = document.getElementsByTagName("img")[0]
			newAera.removeChild(img)
		}
		
	</script>
</html>