![1cae210c01023564e9cda6e8616d4e33.png](https://i-blog.csdnimg.cn/blog_migrate/a50a3084a834d5dcedf562f6111c1784.jpeg)
文中必有不正确or不恰当的地方,目前的水平仅如此,可以喷这篇文章,但请别喷作者谢谢。文中如有错误的地方,愿意的话请告知作者 感激不尽!
JS DOM 操作
目录:
1页 查找DOM元素
1、document.getElementById("") 2、document.getElementsByTagName("") 3、document.getElementClassName("") 4、document.querySelector("" )
2页 DOM事件
2.1 HTML事件 2.2 DOM0级事件
1页 查找DOM元素
如何找到DOM 元素呢?
目前所知命令:
1、document.getElementById("")
这个哥们呢!就比较轻松容易,但是呢缺陷也很大。就是他只能识别id属性,id缺陷很大的!而且只能识别一个!一个!一个!他直接返回的就是DOM对象!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">变大变粗变红色!</div>
<script>
// 创建一个类名来接收这个DOM对象。所以2个类名是不一样的!
var box = document.getElementById("box")
// 类名.style.效果 如果说是font-size!他没有 - 所以只能写成fontSize第二个字母大写
// .style 只能改变DOM对象!这句话非常的关键。
// 他是DOM对象的样式设置
// 变颜色
box.style.color = '#f00';
// 变字体大小
box.style.fontSize = '25px';
// 变字体粗细
box.style.fontWeight = '900';
</script>
</body>
</html>
![ba0a086416adb190fd70f074d9cbcc01.png](https://i-blog.csdnimg.cn/blog_migrate/cdd0f48e968105c30e54a77d364b6e18.png)
2、document.getElementsByTagName("")
英文拆解:document 当前文档,当前网页。 get 获取 Elements 元素的复数 by 额不知道哈哈! tag标签 name 名字!
这个哥们呢!有点复杂但是比较舒服!就是通过标签名来获取
。只不过啊,
他的缺陷是:不是直接返回DOM对象,而是数组对象!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="one">
<span>变红</span>
<span>变大</span>
<span>变粗</span>
</div>
<script>
// 这一步啊,是获取div这个元素,这个元素里面的Span标签,TagName 是获取标签,TagName呢获取的元素呢,又是一个数组对象!
// 所以呢不能直接修改样式!因为修改样式,一定得是一个DOM对象
// 那如何修改呢?使用遍历数组的方式来修改。
var box = document.getElementById('one').getElementsByTagName('span');
// 通过循环遍历数组,首先var i = 0 这句话是从下标0开始 var 新的类名 = TagName的类名.length; i < TagName的类名.length ; i++
// TagName.length,就是数组的个数,所以就明白为什么要 i < TagName的类名
for (var i = 0, len = box.length; i < len; i++) {
console.log(box[i]);
// 使用if else 判断 或者 switch 判断都行!;
switch (i) {
case 0:
box[i].style.color = '#f00';
break;
case 1:
box[i].style.fontSize = '30px';
break;
case 2:
box[i].style.fontWeight = '900';
break;
default:
box[i].style.color = '#000'
break;
}
}
</script>
</body>
</html>
![3ae1b8467eec498e6afaaa69397a8b6d.png](https://i-blog.csdnimg.cn/blog_migrate/1606f1d4c09a7099aa9283eb2eab3bfc.png)
3、document.getElementClassName("")
通过类名获取,用法和BYID一样。只不过就是统统都选,就是相同类都选就很头痛。
4、究极用法:document.querySelector query查询 Selector选择器
这个是通过真正的类来选择的!哈哈!但是嘞有坑,要注意!对要特别注意哦!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="one">皇上要雨露匀沾</div>
<div class="one">?</div>
<script>
// 这个方法()中是可以写 :nth-of-type() :nth-child() :nth-last-child()
var num = document.querySelector('.one:nth-of-type(1)');
// 这样我们就获取了雨露均沾!
console.log(num);
// 而且还是直接的DOM对象!哎呀咋怎么快乐呢?
// 变大
num.style.fontSize = '30px';
// 变红
num.style.color = 'red';
</script>
</body>
</html>
避免的坑2
特别注意这里有些坑 如果这些标签是兄弟关系的情况下,是从上往下数,不管他的类是不是相同的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>@</div>
<div>!</div>
<div class="one">皇上要雨露匀沾</div>
<div class="one">?</div>
<script>
// 这个方法()中是可以写 :nth-of-type() :nth-child() :nth-last-child()
// 现在看,雨露均沾前面有2个同级标签,所以他是第3个 不管前面2个是不是相同的类。
var num = document.querySelector('.one:nth-of-type(3)');
// 这样我们就获取了雨露均沾!
console.log(num);
// 而且还是直接的DOM对象!哎呀咋怎么快乐呢?
// 变大
num.style.fontSize = '30px';
// 变红
num.style.color = 'red';
</script>
</body>
</html>
避免的坑3
特别注意这里有些坑 如果这个标签是父子关系,那么直接写第一个就好了不用写>.one:nth-of-type()
不管有几层!只要不是兄弟关系就行,但是为了正确还是不要偷懒的好。
老老实实的写上去远离996,远离996从现在做起、从每一行代码做起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>@</div>
<div class="two">
<div class="there">
<div class="four">
<div class="one">皇上要雨露匀沾</div>
</div>
</div>
</div>
<div class="one">?</div>
<script>
// 这个方法()中是可以写 :nth-of-type() :nth-child() :nth-last-child()
var num = document.querySelector('.one:nth-of-type(1)');
// 这样我们就获取了雨露均沾!
console.log(num);
// 而且还是直接的DOM对象!哎呀咋怎么快乐呢?
// 变大
num.style.fontSize = '30px';
// 变红
num.style.color = 'red';
</script>
</body>
</html>
2页 DOM事件以及各种事件命令
鼠标事件命令:
- onload :页面加载时触发
- onclick :鼠标点击时触发
- onmouseover :鼠标滑过时触发
- onmouseout :鼠标离开时触发
- onfoucs :获得焦点时触发
- onblur :失去焦点时触发
- onchange :域的内容改变时发生
2.1 HTML事件 什么是HTML事件?直接在HTML元素标签内添加事件,执行脚本。不推荐使用,只是让你有个感觉,不至于会被轻易劝退。
语法:
<tag 事件= '执行脚本'></tag>
功能:
在HTML元素上绑定事件。
例子: 鼠标点击时触发!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="弹出" onclick="alert('我是按钮')">
</body>
</html>
鼠标点击事件
2.2 DOM0级事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.open {
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
background: #00f;
color: #fff;
font-size: 14px;
border-radius: 5px;
margin-top: 30px;
}
.close {
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
background: #666;
color: #ccc;
font-size: 14px;
border-radius: 5px;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- 引号里面的都是自己命名的类名
使用this指向 后面创建一个变量接收属性。-->
<div class="open" id="btn">解锁</div>
<div class="close" hidden="hidden"></div>
<script>
// 获取按钮
var btn = document.getElementById("btn")
// 给按钮绑定事件
// onclick 鼠标点击时触发事件
btn.onclick = function() {
// 通过类名来判断
// 这里的this 指向的是我们获取的DOM对象,btn。所以这个this指的就是btn 这个DOM对象
// 如何理解这个判断呢?是这样的,
// 假如我们点击的这个事件,他的类名等于open,那么点击他就会变成close这个类,并且
// 上面的内容会被替换成锁定。
// 假如我们点击的这个事件,他的类名不等于open,那么电吉他就会变成open这个类,并且
// 上面的内容会被替换成解锁
if (this.className == "open") {
// className获取这个类DOM对象
this.className = "close";
this.innerHTML = "锁定";
} else {
this.className = "open";
// innerHTML是获取对象文本
this.innerHTML = "解锁";
}
// 通过内容来判断
if (this.innerHTML == "解锁") {
this.className = "close";
this.innerHTML = "锁定";
} else {
this.className = "open";
// innerHTML是获取对象文本
this.innerHTML = "解锁";
}
}
</script>
</body>
</html>