js DOM操作
DOM操作
获取元素：
DOM传统获取元素有三种方式，getElementById、getElementsByTagName、getElementsByClassName。
class="box" id="timmer">box1
//下面三种方式均可获取到该元素 var timmer = document.getElementById("timmer"); var timmer = document.getElementsByTagName("div");
//类选择器是HTML5新增的 var timmer = document.getElementsByClassName("box"); console.log(timmer); // console.log 返回的是元素对象 console.log(typeof timmer); // console.dir() 打印返回的元素对象，更好的查看它的属性和方法 console.dir(timmer)
querySelector() 获取元素（只能获取第一个元素）：
//和上面三种方式获取元素一样，但早期ie不支持 var firstbox = document.querySelector(".box"); var firstbox = document.querySelector("div"); var firstbox = document.querySelector("#timmer");
querySelectorAll() 获取元素：
<body> <div class="box">box1div> <div class="box">box2div> <div id="nav"> <ol> <li>1li> <li>2li> <li>3li> ol> div> body> <script>// querySelector 也是HTML5新增的 // document.querySelector("选择器") 可以传所有的选择器类型,返回第一个元素对象 var firstbox = document.querySelector(".box"); console.log(firstbox); var nav = document.querySelector("#nav"); console.log(nav); var firstLi = document.querySelector("li"); console.log(firstLi); // document.querySelectorAll 获取所有元素对象 var allLi = document.querySelectorAll("li"); console.log(allLi); script>
获取特殊元素：
<script> // 1. 获取body var body = document.body; console.log(body); // 2. 获取html var html = document.documentElement; console.log(html); script>
事件
事件三要素： 事件源 事件类型 事件处理程序。
:
点击前：点击后：
元素属性
1. 修改普通元素内容用innerText、innerHTML。
<body> <p id="time">日期：2021p> <div id="div"> 我是第一行 <div> 我是第二行 div> div> body> <script type="text/javascript"> var time = document.querySelector("#time"); /** * innerText 不识别 html标签，非标准 * innerHTML识别 html标签,W3C标准 * innerText、innerHTML 都可以读取元素内容 * innerText 忽略所有标签、空格、换行 * innerHTML 识别标签、空格、换行 * */ // time.innerText = "日期：2021"; time.innerHTML= "日期：2021"; var div = document.querySelector("#div"); console.log(div.innerText); console.log(div.innerHTML); script>
2. 表单属性
表单元素内容是value。input有很多种type。
<body> <button>btnbutton> <input placeholder="我是input" title="input" /> body> <script type="text/javascript"> /** * 利用DOM可以操作表单的如下属性; * type, value, checked, selected, disabled * */ var btn = document.querySelector("button"); var input = document.querySelector("input"); btn.onclick = function() { // innerHTML是普通元素的，表单元素是value // input.innerHTML = "被点击了"; input.value = "被点击了"; // 下面两句等价 // this 指向事件函数的调用者 // btn.disabled = true; this.disabled = true; } script>
点击前： 点击后：
3. 样式属性
操作style样式时：a. 属性用驼峰命名法；b. DOM操作修改行内样式，行内样式权重更高。
<body> <div>div> body> <script> /** * 操作style样式时： * 1. 属性用驼峰命名法 * 2. DOM操作修改行内样式，行内样式权重更高 * */ var div = document.querySelector("div"); div.onclick = function() { div.style.backgroundColor = "red"; } script> <style> div { width: 100px; height: 100px; background-color: aqua; } style>
点击前：点击后：
点击修改class：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div>divdiv>
body>
<script type="text/javascript">
var div = document.querySelector("div");
div.onclick = function(){
/**
* class是关键字，所以用className改变类，并会覆盖原来的类名
* 如果想保留原来的类名，则用this.className = "firstClass change";
* */
// div.className = "change";
this.className = "change";
}
script>
<style type="text/css">
.change{
background-color: #008000;
font-size: large;
font-weight: 700;
color: white;
}
style>
html>
点击前：点击后：
4. 事件对象
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div>divdiv>
body>
<script type="text/javascript">
var div = document.querySelector("div");
div.onclick = function(event){
// 1. event就是一个事件对象，写到我们侦听函数的小括号里，当形参来看
// 2. 事件对象有了事件才会存在，是系统自动创建的，我们不需要自己传递参数
// 3. 事件对象 是我们事件的一系列相关数据的集合，跟事件相关的。
// 比如鼠标点击就包含了鼠标的相关信息，比如鼠标坐标
//键盘事件就包括了键盘事件的信息，比如判断用户按下了哪个键
// 4. 事件对象可以自己命名，如event, evt, e
console.log(event);
//event.target 点击了哪个元素，就返回哪个元素
//this 绑定了哪个元素，就返回哪个元素
console.log(event.target);
}
//这里和上面等价
// div.addEventListener("click",function(e){
// console.log(e);
// })
script>
html>
事件委托：巧妙利用事件冒泡。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<ul>
<li>9li>
<li>8li>
<li>7li>
<li>6li>
<li>5li>
<li>4li>
<li>3li>
<li>2li>
<li>1li>
ul>
body>
<script type="text/javascript">
/**
* 事件委托的核心：给父节点添加侦听器，利用事件冒泡影响每一个子节点
* addEventListener("name", function(){}, true/false)
* 第三个参数为false或者省略是冒泡阶段
* 第三个参数为true是捕获阶段
* */
var ul = document.querySelector("ul");
ul.addEventListener("click",function(e){
console.log(e);
console.log("我是li冒泡到ul的事件");
})
script>
<style type="text/css">
ul{
background-color: yellow;
padding: 20px;
}
li{
display: inline-block;
padding: 10px;
background-color: red;
}
style>
html>