传统获取方式
传统方式元素获取方式
<body class="mybody">
<input type="button" value="点击" id="btn">
<div id="dv1" name="mydiv" class="cls">
<p>111</p>
<p>222</p>
</div>
<div id="dv2" name="mydiv" class="cls">
<p>333</p>
<p>444</p>
</div>
<div id="dv3">
<p>555</p>
<p>666</p>
</div>
<script>
//1-根据id获取元素
let brn = document.getElementById("btn")
console.log(btn);
console.dir(btn);
btn.value = "确定";
//2-根据标签名获取元素
let newDivs = document.getElementsByTagName("div");
for (let newDiv of newDivs) {
newDiv.style.background = "red";
}
//3-根据name获取元素
let ediv = document.getElementsByName("mydiv")
for (let i = 0; i < ediv.length; i++) {
ediv[i].style.background = "pink"
}
//4-根据类名获取元素
document.getElementsByClassName("mybody")[0].style.background = "green"
</script>
根据CSS获取元素
HTML代码元素
<style>
.mybody {
background-color: aliceblue;
}
.cls {
font-size: small;
}
</style>
</head>
<body class="mybody">
<input type="button" value="点击" id="btn">
<div id="dv1" name="mydiv" class="cls">
<p>111</p>
<p>222</p>
</div>
<div id="dv2" name="mydiv" class="cls">
<p>333</p>
<p>444</p>
</div>
<div id="dv3">
<p>555</p>
<p>666</p>
</div>
<div id="dv4">
<a>链接1</a>
<a>链接2</a>
<p>
<a>链接3</a>
</p>
</div>
<div id="dv5">
<ul>
<li>张无忌</li>
<li>张三丰</li>
<li>牛魔王</li>
<li>郭靖</li>
</ul>
</div>
id选择器
let btn = document.querySelector("#btn")
btn.value = "确定"
标签选择器
for (let ele of document.querySelectorAll("div")) {
ele.style.background = "red"
}
类选择器
for (let ele of document.querySelectorAll(".cls")) {
ele.style.fontSize = "x-large"
}
后代选择器
for (let ele of document.getElementById("dv3").getElementsByTagName("p")) {
ele.style.background = "yellow";
}
for (let ele of document.querySelectorAll("#dv3 p")) {
ele.style.background = "blue"
}
子代选择器
for (let ele of document.querySelectorAll("#dv4>a")) {
ele.style.color = "green"
}
结构选择器
document.querySelector("#dv5 ul li:first-child").innerHTML = "hi"
document.querySelectorAll("#dv5 ul li:first-child")[0].innerHTML = "hello"
document.querySelector("#dv5 li:nth-child(3)").innerHTML = "ch"
事件
常用事件
点击事件
<input type="button" value="控制台打印数组数据" id="btn">
<script>
let arr = ["jack", "tom"];
document.querySelector("#btn").onclick = function () {
console.log(this);
for (let i = 0; i < arr.length; i++) {
console.log(i + " " + arr[i]);
}
}
</script>
鼠标事件
<ul>
<li>小花</li>
<li>小白</li>
<li>小黑</li>
</ul>
<script>
for (let eleli of document.querySelectorAll("li")) {
eleli.onmouseover = function () {
console.log("被触发了");
eleli.style.background = "red";
}
eleli.onmouseout = function () {
eleli.style.background = ""
}
}
焦点事件
<input type="text" value="请输入搜索内容" id="txtSearch" />
<script>
let txtSearch = document.querySelector("#txtSearch");
txtSearch.onfocus = function () {
if (this.value == "请输入搜索内容") {
this.value = ""
this.style.color = "black"
}
}
txtSearch.oblur = function () {
this.value = "请输入搜索内容" // 清空文本
this.style.color = "gray"
}
多事件注册
多事件注册
<input type="button" value="绑定事件" id="btnAddEvent">
<input type="button" value="解绑第一个事件" id="btnRemoveEvent">
<script>
function f1() {
console.log("第一个事件");
}
function f2() {
console.log("第二个事件");
}
let btnAddEvent = document.querySelector("#btnAddEvent");
btnAddEvent.addEventListener("click", f1)
btnAddEvent.addEventListener("click", f2)
btnAddEvent.addEventListener("click", function () {
console.log("第三个事件");
})
document.querySelector("#btnRemoveEvent").onclick = function () {
btnAddEvent.removeEventListener("click", f1) // 解绑事件
}
</script>
事件参数e
<input type="button" value="事件参数e" id="btnEvent" />
<script>
//为同一个元素绑定多个不同的事件,指向相同的事件处理函数
let btnEvent = document.querySelector("#btnEvent");
btnEvent.onclick = f1;
btnEvent.onmouseover = f1;
btnEvent.onmouseout = f1;
function f1(e) {
console.log(e.type);
switch (e.type) {
case "click":
alert("点击")
break;
case "mouseover":
btnEvent.style.background = "red"
break;
}
}
</script>
事件冒泡
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
document.querySelector("#dv1").onclick = function () {
console.log(this.id);
};
document.querySelector("#dv2").onclick = function () {
console.log(this.id);
};
document.querySelector("#dv3").onclick = function (/* e */) {
// e.stopPropagation();
window.event.cancelBubble = true;
console.log(this.id);
};
</script>
