js DOM操作
DOM操作
获取元素：
DOM传统获取元素有三种方式，getElementById、getElementsByTagName、getElementsByClassName。
<div class="box" id="timmer">box1</div>
//下面三种方式均可获取到该元素 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">box1</div> <div class="box">box2</div> <div id="nav"> <ol> <li>1</li> <li>2</li> <li>3</li> </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>
事件
事件三要素： 事件源 事件类型 事件处理程序。
<body>
<button>事件三要素</button>
<span>:</span>
</body>
<script type="text/javascript">
// 事件三要素： 事件源 事件类型 事件处理程序
var btn = document.querySelector("button");
var span = document.querySelector("span");
btn.onclick = function(){
console.log("事件源 事件类型 事件处理程序");
span.innerText = ":事件源 事件类型 事件处理程序";
}
function getCurrentDate(){
var date = new Date();
console.log(date);
return date;
}
</script>
点击前：
点击后：
元素属性
1. 修改普通元素内容用innerText、innerHTML。
<body> <p id="time">日期：2021</p> <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 = "<strong>日期：</strong>2021"; time.innerHTML= "<strong>日期：</strong>2021"; var div = document.querySelector("#div"); console.log(div.innerText); console.log(div.innerHTML); </script>
2. 表单属性
表单元素内容是value。input有很多种type。
<body> <button>btn</button> <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>div</div> </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>div</div> </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>9</li> <li>8</li> <li>7</li> <li>6</li> <li>5</li> <li>4</li> <li>3</li> <li>2</li> <li>1</li> </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>
