DOM
DOM编程的基本概念
- Document Object Model 文档对象模型,用于操作网页中元素
DOM编程的作用
- 每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树,我们通过编写JS代码就可以访问这棵树上任何一个节点,并且对节点进行操作。通过 DOM模型,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。新创建的元素对象,要挂到DOM树上才可以在网页上显示出来。
dom树
查找节点的方法
-
-
document.querySelector("选择器")
根据选择器查询元素,返回一个元素
-
document.querySelectorAll("选择器")
根据选择器查询所有元素,返回一个数组
-
三个具事例学习DOM
示例一(全选,反选,结算)
-
- 知识点:复选框如果要选中,设置checked=true,取消设置checked=false。
- 全选:通过name属性得到上面所有的复选框对象,遍历集合,将每一个元素的checked设置为 true。
- 全不选:将所有元素的checked属性设置为false。
- 反选:原来选中的设置false,原来没选的设置为true。
- 结账:将所有选中的元素的value转成数字,再累加,将累加的结果显示在后面的span中。
-
方法 作用 document.createElement()
创建元素节点 document.createTextNode()
创建文本节点 元素对象. appendChild()
向节点的子节点列表末尾添加新的子节点 元素对象. removeChild()
删除子节点 元素对象. hasChildNodes()
返回元素是否拥有子节点 -
<body> <input type="checkbox" name="item" value="120"/>a <input type="checkbox" name="item" value="998"/>b <input type="checkbox" name="item" value="9.9"/>c <input type="checkbox" name="item" value="10.2"/>d <input type="checkbox" name="item" value="666"/>e <hr /> <input type="checkbox" id="all" onclick="checkAll()"/>全选/全不选 <button type="button" onclick="reverse()">反选</button> <button type="button" onclick="sum()">结算</button> <p>总计: <span id="price">0</span>元</p> <script> // 数组 var items = document.querySelectorAll("[name=item]"); // 全选/全不选 按钮 点击事件 function checkAll(){ // 全选框 var all = document.querySelector("#all"); // 迭代每一个元素 for(var i = 0; i< items.length; i++){ // 当前循环被迭代的元素 var cur = items[i]; cur.checked = all.checked; } } function reverse(){ // 迭代每一个元素 for(var i = 0; i< items.length; i++){ // 当前循环被迭代的元素 var cur = items[i]; // 设置 checked 属性值为其 当前值的取反 cur.checked = !cur.checked; // if(cur.checked){ // cur.checed = false; // }else{ // cur.checed = true; // } } } function sum(){ var sum = 0; // 迭代每一个元素 for(var i = 0; i< items.length; i++){ // 当前循环被迭代的元素 var cur = items[i]; // 如果被选中 if(cur.checked){ // sum = sum + parseFloat(cur.value); sum += parseFloat(cur.value); } } document.querySelector("#price").innerText = sum; } </script> </body>
示例二(点击图案消失)
-
<body> <script type="text/javascript"> // 获取 html 元素 var html = document.querySelector("html"); // 给 html 添加监听事件 html.addEventListener("click", heart, false); function heart(e){ // 定义字体大小 var fontSize = 16; // 鼠标的位置 e.clientX e.clientY // 根据鼠标位置 计算 元素出现的位置 var left = e.clientX - fontSize / 2; var top = e.clientY - fontSize / 2; // 创建一个 b 元素 var b = document.createElement("b"); // b 元素的内容 b.innerText = "❤"; // 设置属性. 字体大小, 颜色, 位置 randomColor() 返回 rgb(r,g,b); b.style="font-size: " + fontSize + "px;color:" + randomColor() + ";position:absolute;left:" + left + "px;top:" + top + "px;opacity:1;"; // 添加到 body 中 document.body.appendChild(b); // 定义一个 定时任务, 修改他的 style 属性 var timer = setInterval(function(){ // 去掉 top 值的 单位 px var top = b.style.top.replace("px", ""); // 调整位置 b.style.top = top - 1 + "px" ; // 隐藏 b.style.opacity -= 0.05; // 看不见时 if(b.style.opacity < 0){ // 移除元素 document.body.removeChild(b); // 清除定时器 clearInterval(timer); } }, 100); } // 随机 rgb 字符串 function randomColor(){ //~~的作用是去掉小数部分 return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"; } </script> </body>
示例三(点击表格变色)
-
<head> <meta charset="utf-8"> <title></title> <style> .bg{ background-color: #ccc; } </style> </head> <body> <button onclick="addClass()">添加样式</button> <table border="1" cellspacing="0" cellpadding="0" class="a" width="500px"> <tr> <th>序号</th> <th>姓名</th> <th>性别</th> </tr> <tr> <td>1</td> <td>张三</td> <td>男</td> </tr> </table> <script> // 获取到元素 var table = document.querySelector("table"); // 鼠标放到 元素上时 table.onmouseover = function(){ console.log("鼠标放到表格上了"); } // 鼠标移出 元素上时 table.onmouseout = function(){ console.log("鼠标移出表格了"); } function addClass(){ table.className = table.className + " bg"; console.log(table.className); } </script> </body>