JavaScript——DOM（基础）
我们如何通过CSS样式给标签添加样式？
答：通过选择器（class、id、标签）来添加样式
通过什么可以动态修改网页内容、样式和结构，以及响应用户交互？
答：DOM:文档对象模型，表示所有的标签元素。可以通过DOM动态修改网页内容、样式和结构，以及响应用户交互.
那么如何操作DOM元素呢？
答：
先假设我们初始的结构是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:red;
}
</style>
</head>
<body>
<div>你好</div>
</body>
</html>
得到的结果是这样的：
第一步：获取对应的DOM元素
1、get获取
通过id获取
document.getElementById("id选择器")
返回值为单个元素节点
通过class获取
let doms=document.getElementsByClassName("class选择器");
返回值为一个类数组组成数据结构[第一个类名元素节点，第二个类名元素]
通过标签获取
document.getElementsByTagName("标签名");
返回值为一个类数组组成数据结构[第一个标签名元素节点，第二个标签名元素]
特殊标签获取：
document.documentElement
document.head
document.body
document.title
2、query获取
document.querySelector("选择器名称")
注意：这里的选择器名称的形式要与style标签中的写法一致，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app{
font-size: 45px;
color: #C8A2C8;
}
#app1{
font-size: 45px;
color: #C8A2C8;
}
.box{
font-size: 70px;
color: #F0E68C;
}
p{
font-size: 50px;
}
#app1 .colo{
color: #98FB98;
}
</style>
</head>
<body>
<div id="app">你好</div>
<div class="box">box1</div>
<div class="box">box2</div>
<p>p小气泡</p>
<div id="app1">
hello
<p>世界</p>
<span class="colo">私密马赛</span>
</div>
<script>
let dom=document.querySelector("#app");
console.log(dom);
let colo=document.querySelector("#app1 .colo");
console.log(colo);
let box=document.querySelector(".box");
console.log(box);
</script>
</body>
</html>
以上例子中都只是获取了单个，如果想要获取多个，可以用以下形式：
let boxs=document.querySelectorAll(".box");
console.log(boxs);
第二步：操作DOM元素的内容获样式或结构
1、获取元素节点包裹的文本内容
let txt=dom.innerText;
console.log(txt);
重新设置元素节点包裹的文本内容
dom.innerText="hello";
这两张图片就是设置前后的变化，可以看出第一行的文本内容被重新设置
注意的是，class和标签获取时的返回值是数组，故在进行文本修改的时候，需要加下标，如下：
let pt=dom1.getElementsByTagName("p");/*获取的pt是一个类数组，数组中才是对应的元素节点*/
pt[0].innerText="js";
2、获取元素节点包裹的所有内容：
let dom=document.querySelector("#app1")
console.log(dom.innerHTML);
dom.innerHTML='<p>嘻嘻嘻嘻</p>'
innerText与innerHTML的区别：
innerHTML：可以解析字符串的标签，生效于页面中。如下（第一个是HTML，第二个是Text）
3、设置元素节点的style属性：用于设置标签样式
元素.style.样式名=‘值’
let colo=document.querySelector("#app1 .colo");
colo.style.color="red";
注意：元素样式请使用小驼峰写法，就是中间字母大写
colo.style.fonSize="100px";
4、改变元素属性：
给app元素添加一个class类名为qqq
let app=document.querySelector("#app");
console.dir(app);
app.setAttribute("class","qqq");
添加上句后的前后对比是这样的：
设置行内样式：
app.setAttribute("style","background-color:pink");
得到结果：
获取属性：
console.log(app.getAttribute("style"))
控制台输出结果：
删除属性：
app.removeAttribute("class")
5、DOM事件（行为）：鼠标、键盘、用户输入行为
通过监听元素的行为来完成对应的操作
元素绑定事件：通过事件完成对应操作 on是绑定
元素绑定事件=== 监听元素的对应事件，事件触发后执行函数（事件不触发，函数不执行）
元素.on+事件名=function（）{
}
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" class="qqq">hello666</div>
<button class="but">点击一下，字体变红,字体变大</button>
<input type="text">
<script>
let app=document.querySelector("#app");
let but=document.querySelector(".but");
//设置字体初始值
let num=16;
//监听元素点击事件，不点击就不会触发事件函数
but.onclick=function(){
num++;
console.log(num);
app.style.color="red";
app.style.fonSize=num+"px";
}
</script>
</body>
</html>
事件演示：
鼠标事件：
onclick 鼠标左键单击
ondblclick 左键双击
onmouseover onmouseenter 鼠标移入
onmouseout onmouseleave 鼠标移出
onmousedown 鼠标按下
onmouseup 鼠标按下
onmousemove 鼠标按下
oncontextmenu 右键单击
键盘事件：
onkeydown 键按下
onkeyup 键抬起
系统事件：
onload 加载完成后
onerror加载出错后
onresize 调整窗口大小
onscroll 滚动时
表单事件：
onfocus 焦点后
onblur 失去焦点后
onchange 改变内容后
onselect 选择后
6、id与类名设置
设置类名：
className 或者setAttribute("class","类名")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: #98FB98;
}
p{
color: #F0E68C;
}
.ap{
color: #FFB6C1;
background-color: #cccccc;
}
.ap1{
font-size: 45px;
}
</style>
</head>
<body>
<div class="box"></div>
<p>你好</p>
<script>
let boxs=document.querySelector(".box")
let p=document.querySelector("p")
boxs.onclick=function(){
p.className="ap ap1"
//或者另一种写法:p.setAttribute("class","ap")
}
</script>
</body>
</html>
点击前后，类选择器改变：
设置id名：
元素.id 或者setAttribute("id","id名")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 300px;
background-color: #98FB98;
}
p{
color: #F0E68C;
}
#app{
color: #87CEFA;
background-color: blue;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<p>你好</p>
<script>
let boxs=document.querySelector(".box")
let p=document.querySelector("p")
boxs.onclick=function(){
p.id="app"
//或者另一种写法:p.setAttribute("id","app")
}
</script>
</body>
</html>
得到结果：
今日份学习就到这里啦！see you~~~~
更多推荐
17
0- 0
已为社区贡献2条内容
所有评论(0)