JavaScript DOM操作

一 、什么是DOM

DOM，指的是文档对象模型（Document Object Model）
是js对html元素的操作，可以使页面具有交互性
可以对HTML页面元素、样式进行 增加、改变、删除等操作

二、DOM对HTML元素的操作

2.1 获取元素

<div id="div1">
	<p class="p1" id="p1.1">这是p1.1</p>
	<p class="p1">这是p1.2</p>
	<p class="p1">这是p1.3</p>
</div>

		//通过getElementById获取一个id为"div1"的元素
		var div = document.getElementById("div1")
		console.log(div)
		//通过getElementsByClassName获取类名为"p1"的所有元素做成的数组
		var p1 = document.getElementsByClassName("p1")
		console.log(p1)
		//获取其中的一个元素
		console.log(p1[0])
		//获取其中一个元素的文本信息
		console.log(p1[0].innerHTML)

运行结果：

<div id="div1">

HTMLCollection { 0: p#p1.1.p1, 1: p.p1, 2: p.p1
, length: 3, … }

<p id="p1.1" class="p1">

这是p1.1 index.html:26:11

2.2 改变元素

改变元素的内容：

		//改变文本内容的方式
		var p1_1 = document.getElementById("p1.1")
		p1_1.innerHTML = "你好"

		//在元素中，添加元素的方法
		//还可以使用createElement("p")方法，创建一个新标签，添加到父标签中
		let text = document.createTextNode('这是一个文本元素')
		p1_1.appendChild(text)

改变元素的样式：

//只要是CSS可以进行的样式修改，在此处均可动态改变
p1_1.style.color = "red"
p1_1.style.backgroundColor = "yellow"

改变元素的属性：

//直接 属性 = "值" 的方法，就可以改变元素的属性
p1_1.className = "p2"

2.3 删除元素

//删除全部元素
div.remove()

var div = document.getElementById("div1")
var p1_1 = document.getElementById("p1.1")
//若想单独删除某个标签，需要先过去其父标签，和其本身
//调用父标签的removeChild方法，才能删除特定的标签
div.removeChild(p1_1)

三、事件监听

3.1 添加事件监听的方法

第一种：在标签中添加 onclick、onmouseover等属性触发函数

<p id="p1" onclick="f1()" onmouseover="f2()">这是p1</p>
		function f1(){
			console.log("点击成功")
		}
		function f2(){
			console.log('鼠标在p1上')
		}

第二种方法：

var p1 = document.getElementById("p1")
		p1.onclick = function(){
			console.log("点击成功")
		}
		p1.onmouseover = function(){
			console.log('鼠标在p1上')
		}

第三种方式：

p1.addEventListener("click",  function(){console.log("点击成功")}   )
p1.addEventListener("mouseover", function(){ console.log("鼠标在p1上")})

3.2 事件监听有哪些

当用户点击鼠标时
当网页加载后
当图像加载后
当鼠标移至元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户敲击按键时

四、表单操作

获取：

var forms = document.forms;
//获取某一个表单的方法
//forms的第n各元素
console.log(forms[0])
//forms的id
console.log(form1["form1"])

判断：

console.log(form1.username.value)
			console.log(form1.psd.value)
			//对值进行判断
			if(form1.username.value.length > 0 && form1.psd.value.length > 0 ){
				form1.submit();
			}else{
				alert("账号密码均不能为空")
			}

使用js对表单提交

var forms = document.forms;
var form1 = forms[0]
//提交表单的方法
form1.submit();

连接表单与js的方式：
方式一

<input type="button" onclick="f1()" value="提交" />

方法二：

<!-- return 不能去掉 并且，函数中需要提供return的true或false-->
<form id="form1" onsubmit="return f1()">