今日内容概要
- DOM操作
- DOM操作之查找标签
- DOM操作之操作标签
内容详细
1.DOM操作
1. DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法
2. 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
3. HTML DOM 模型被构造为对象的树
# DOM标准规定HTML文档中的每个成分都是一个节点(node)：
文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
2.DOM操作之查找标签
# 1.直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
"""
如果我们的js代码需要页面上某个标签加载完毕
那么该js代码应该写在body内部最下方或者引入外部js文件
p.c$*3 一键写出三个类标签
<p class="c1"></p>
<p class="c2"></p>
<p class="c3"></p>
p#d$*3 一键写出三个id标签
<p id="d1"></p>
<p id="d2"></p>
<p id="d3"></p>
"""
# 2.间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1"></div>
<div id="d2">
<p id="d4">
<span></span>
</p>
<span id="d5"></span>
<a id="d6"></a>
</div>
<div id="d3"></div>
</body>
</html>
3.节点操作
# 创建节点
语法：createElement(标签名)
# 示例：
var aEle = document.createElement('a'); # 创建标签
aEle.setAttribute('href','https://www.mmzztt.com/') # 设置属性
aEle.innerText = '好不好看?' # 设置内容文本
document.getElementsByTagName('p')[0].appendChild(aEle) # 动态添加
"""一定要明确当前手上是什么对象"""
imgEle.getAttribute('title') # 获取标签属性
# 删除节点：
语法：获得要删除的元素，通过父元素调用该方法删除
somenode.removeChild(要删除的节点);
# 替换节点：
语法：somenode.replaceChild(newnode, 某个节点);
# 属性节点
获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML
设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"
"""
innerText
不加赋值符号是获取内部文本
加了赋值符号是设置内置文本
# 不可以识别HTML标签
innerHTML
不加赋值符号是获取内部标签+文本
加了赋值符号是设置内置标签+文本
# 可以识别HTML标签
"""
# attribute操作
变量名.getAttribute("属性")
获取属性值
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>今日不努力 明日变垃圾
<a href="#">只有靠自己</a>
<span>哈哈哈</span>
</p>
</body>
</html>
4.获取值操作
# 普通的文本数据获取
标签对象.value
# 特殊的文件数据获取
标签对象.value '''仅仅获取一个文件地址而已'''
标签对象.files[0] '''获取单个文件数据'''
标签对象.files '''获取所有文件数据'''
5.class操作
# class的操作
classList 查看所有的类
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
# 样式操作
标签对象.style.属性名 = 属性值
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 400px;
height: 400px;
border-radius: 50%;
}
.c2 {
background-color: red;
}
.c3 {
background-color: greenyellow;
}
</style>
</head>
<body>
<p>恍恍惚惚一个上午又过去了 是否有所收货</p>
<div id="d1" class="c1 c2 c3"></div>
</body>
</html>
6.事件
"""就是给HTML元素添加自定义的功能"""
# 绑定事件的方式1(不常用)
<button onclick="func()">点我</button>
<script>
function func() {
alert(123)
}
</script>
# 绑定事件的方式2
<button id="d1">选我</button>
<script>
// 1.先查找标签
var btnEle = document.getElementById('d1')
// 2.绑定事件
btnEle.onclick = function () {
alert(456)
}
</script>
# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- <button onclick="func()">点我</button>-->
<button id="d1">选我</button>
<script>
// function func() {
// alert(123)
// }
// 1.先查找标签
var btnEle = document.getElementById('d1')
// 2.绑定事件
btnEle.onclick = function () {
alert(456)
}
</script>
</body>
</html>
7.内置参数this
# this指代的就是当前被操作对象本身
// 在事件的函数体代码内部使用
var btnEle = document.getElementById('d1')
btnEle.onclick = function () {
alert(456)
console.log(this)
}
8.事件练习
onclick 单击事件
onfocus 聚焦事件
onblur 失去焦点事件
onchange 文本域变化事件
onload 等待...加载完毕后执行的事件
"""如果某个标签已经有事件了 那么绑定会冲突"""
# 定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d2">
<button id="d1">出来！</button>
<button id="d3">站住！</button>
<script>
// 1.先查找按钮标签
var btnEle = document.getElementById('d1')
var btn1Ele = document.getElementById('d3')
// 1.1定义一个存储定时器的全局变量
var t = null
// 1.2单独编写一个展示时间的函数
function showTime(){
// 1.3获取当前时间
var cTime = new Date().toLocaleString()
// 1.4将时间添加到input文本框中
var iEle = document.getElementById('d2')
iEle.value = cTime
}
// 2.绑定点击事件
btnEle.onclick = function () {
if(!t){
t = setInterval(showTime,1000)
}
}
// 3.绑定点击事件
btn1Ele.onclick = function () {
clearInterval(t)
// 把t清空
t = null
}
</script>
</body>
</html>
# 数据校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>username:
<input type="text" id="d1">
<span id="username" style="color: red"></span>
</p>
<p>password:
<input type="text" id="d2">
<span id="pwd" style="color: red"></span>
</p>
<button id="d3">登录</button>
</div>
<script>
// 1.查找按钮标签
var btnEle = document.getElementById('d3')
// 2.绑定事件
btnEle.onclick = function () {
// 3.获取input数据
var userNameEle = document.getElementById('d1').value
var passWordEle = document.getElementById('d2').value
// 4.判断数据是否合法
if (!userNameEle){
var sp1Ele = document.getElementById('username')
sp1Ele.innerText = '用户名不能为空'
}
if (!passWordEle){
var sp2Ele = document.getElementById('pwd')
sp2Ele.innerText = '密码不能为空'
}
}
</script>
</body>
</html>
# 省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>省:
<select name="" id="d1"></select>
</p>
<p>区:
<select name="" id="d2"></select>
</p>
<script>
var data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"], "安徽":["合肥","芜湖"]};
var se1Ele = document.getElementById('d1')
var se2Ele = document.getElementById('d2')
for (let pro in data){
var opEle = document.createElement('option')
opEle.innerText = pro
opEle.value = pro
se1Ele.appendChild(opEle)
}
se1Ele.onchange = function () {
var cutpro = this.value
cityList = data[cutpro]
se2Ele.innerHTML = ''
for (let i=0;i<cityList.length;i++){
var opEle = document.createElement('option')
opEle.innerText = cityList[i]
opEle.value = cityList[i]
se2Ele.appendChild(opEle)
}
}
</script>
</body>
</html>
