一.DOM操作之查找标签
//前缀关键字>>>:docment
// 基本查找（核心）
document.getElementById // 根据id获取一个标签
document.getElementsByClassName //根据class属性获取
document.getElementsByTagName //根据标签属性查找
//如果我们的js代码需要页面上某个标签加载完毕
那么该js代码应该写在body内部最下方或者引入外部js文件//
//间接查找（重要）
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素
二.节点操作
innerText
//不加赋值符号是获取内部文本
//加了赋值符号是设置内置文本
# 不可以识别HTML标签
innerHTML
//不加赋值符号是获取内部标签+文本
//加了赋值符号是设置内置标签+文本
//可以识别HTML标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">我是div标签</div>
<p class="c1">我是p标签</p>
<script>
var aELe = document.createElement('a') //创建a标签
aELe.setAttribute('href','https://www.baidu.com') //设置属性
aELe.innerText = '点我有你好看！！！' //设置文本内容
document.getElementsByTagName('p')[0].append(aELe) //动态添加
imgEle.getAttribute('title')
</script>
</body>
</html>
四.获取值操作
// 普通的文本数据获取
标签对象.value
// 特殊的文件数据获取
标签对象.value '''仅仅获取一个文件地址而已'''
标签对象.files[0] '''获取单个文件数据'''
标签对象.files '''获取所有文件数据'''
五.class操作
classList 查看所有的类
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
六.样式操作
标签对象.style.属性名 = 属性值
七.绑定事件的两种方法
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="d1">点我</button>
<script>
var divEle = document.getElementById('d1')
divEle.onclick = function (){
alert('欢迎登录修车网')
}
</script>
</body>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func()">点我</button>
<script>
function func() {
alert(123)
}
</script>
</body>
</html>
八.内置参数this
//this指代的就是当前被操作对象本身
在事件的函数体代码内部使用
btnEle.onclick = function () {
alert(456)
console.log(this)
}
九.事件练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="d2">查看</button>
<button id="d3">停止</button>
<script>
//获取数据
var btnEle = document.getElementById('d2')
var btnEle1 = document.getElementById('d3')
var t=null
function showtime() {
//获取当地事件
var localtime = new Date().toLocaleString()
//给
var tELe = document.getElementById('d1')
tELe.value = localtime
}
//绑定点击事件
btnEle.onclick = function (){
if(!t) {
t = setInterval(showtime, 1000)
}
}
//绑定点击事件
btnEle1.onclick = function (){
clearInterval(t)
t=null
}
</script>
</body>
</html>
