一 、什么是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()">