1、常用的DOM操作方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回指定标签名称的所有元素（数组） |
| getElementsByClassName() | 返回所有标签中class="指定值"的元素。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
2、访问HTM与元素的方法
- 通过给HTML元素起id使用getElementById 方法来访问
<script>
document.getElementById("btn"); /*这样就获取到id=btn的元素了*/
</script>
-
通过给HTML元素的class=“名字” 使用getElementsByClassName() 来访问，这个获取的是一个数组
<script> let Parr = document.getElementsByClassName("Pname");/*获取所有class="Pname的元素"*/ </script> -
通过getElementsByTagName() 来获取HTML元素，这是通过标签的来获取的，也是一个数组
<script> let inputs = document.getElementById("main").etElementsByTagName("input");/*获取id=main下的所有input元素*/ </script><script> let inputs = document.etElementsByTagName("input");/*获取HTML中所有的input元素*/ </script>3、改变HTML的内容或样式
3.1改变内容
示例：当点击按钮时h1中的内容由 中国----->华夏
使用了事件 在按钮上添加事件，当点击按钮时触发，然后通过innerText 把h1中的内用改变。
同时innerText可以获取标签中的内容 用法：‘document.getElementById(“chain”).innerText’ 获取 id = chain的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> </head> <body> <h1 id = "chain">中国</h1> <button id = 'btn'>按钮</button> </body> </html> <script> document.getElementById("btn").onclick = function () { document.getElementById("chain").innerText = "华夏"; } </script>3.2改变样式
示例：当点击按钮时h1中的内容由中国---->华夏,黑色---->红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> </head> <body> <h1 id = "chain">中国</h1> <button id = 'btn'>按钮</button> </body> </html> <script> document.getElementById("btn").onclick = function () { document.getElementById("chain").innerText = "华夏"; document.getElementById("chain").style.color = "red"; } </script>4、元素
4.1添加元素
示例：在id= main下添加一个p
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> </head> <body> <div id = "main"> </div> <button id = 'btn'>添加</button> </body> </html> <style> #main{ width: 100%; } </style> <script> document.getElementById("btn").onclick = function () { let p = document.createElement("p"); p.innerText="从来就没有什么意外，也许你的故事并不是从快乐开始的，可这不能决定你的一生，你想要的变成什么样子，全看你自己的选择.\n"+ "你患得患失，太在意从前，又太担心将来，有句话说得好，昨天是段历史，明天是个谜团，\n" + " 而今天是天赐的礼物，像珍惜礼物那样珍惜今天，越想逃避宿命，越会在半道上跟宿命撞个正着，你的思绪\n" + " 就像这池水一样朋友，稍有外界触动，就很难清澄明朗，可如果让它静下来，答案顿时就变得清晰了。\n" + " 愿我们在这繁华的世间,找到自己的摆渡人,渡尽世间的苦难。"; p.style.fontSize = "18px"; p.style.color="red"; let div = document.getElementById("main"); div.appendChild(p); } </script>4.2删除元素
示例：删除id= “main” 中选中的p
在删除按钮上添加事件，获取id = "main"下的所有 p，然后在每一个p上添加事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> </head> <body> <div id = "main"> <p>123</p> <p>456</p> <p>789</p> <p>111</p> </div> <button id = 'btn'>删除</button> </body> </html> <style> #main{ width: 100%; } </style> <script> document.getElementById("btn").onclick = function () { let ps = document.getElementById("main").getElementsByTagName("p"); for (let i = 0; i < ps.length; i++){ let p = ps[i]; p.onclick = function () { let result = confirm("确定要删除\" "+p.innerText+"\"吗？"); if (result){ p.parentNode.removeChild(p); } } } } </script>5、综合示例
实现对表格数据的增加删除以及列表数据增加删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS测试</title> </head> <body> <ul> <li>中国</li> <li>日本</li> <li>韩国</li> </ul> <button id="btn1">给ul中的每个li添加事件</button> <br/><br/> 请输入国家：<input class="add" type="text"/> <button id="btn2">添加国家</button> <hr/> <br/> 姓名：<input class="tab" type="text"/><br/> 年龄：<input class="tab" type="text"/><br/> 性别：<select class="tab"><option>男</option><option>女</option></select><br/> <button id="btn3">保存</button> <table class="user"> <tr><td>姓名</td> <td>年龄</td> <td>性别</td> <td>是否删除</td> </tr> <tr><td>Tom</td> <td>18</td> <td>男</td> <td><a href="delete from 表名 where id = ?">删除</a></td> </tr> <tr><td>Amy</td> <td>18</td> <td>女</td> <td><a href="delete from 表名 where id = ?">删除</a></td> </tr> <tr><td>Jack</td> <td>19</td> <td>男</td> <td><a href="delete from 表名 where id = ?">删除</a></td> </tr> </table> </body> </html> <style> .user{ width: 50%; text-align: center; margin-left: 25%; } input{ width: 15%; } select{ width: 16%; } #btn3{ font-size: 15px; color: white; background-color: yellowgreen; } </style> <script> //删除li document.getElementById("btn1").onclick = function () { let lis = document.getElementsByTagName("li"); for (let i = 0; i < lis.length ; i++) { let li = lis[i]; li.onclick = function () { let result = confirm("确定要删除"+li.innerText + "吗?"); if (result){ document.getElementsByTagName("ul")[0].removeChild(li); } } } }; //添加li document.getElementById("btn2").onclick = function () { let val = document.getElementsByClassName("add")[0].value; let li = document.createElement("li"); li.innerText = val; document.getElementsByTagName("ul")[0].appendChild(li); }; // 点击提交吧元素天机进 表格里边 document.getElementById("btn3").onclick = function () { let inputs = document.getElementsByClassName("tab"); let tr = document.createElement("tr"); for (let i = 0; i < inputs.length; i++) { let td = document.createElement("td"); td.innerText = inputs[i].value; tr.appendChild(td); if (i == inputs.length - 1){ let td1 = document.createElement("td"); let a = document.createElement("a"); a.innerText = "删除"; a.setAttribute("href","delete from ' 表名' where id = ?"); td1.appendChild(a); tr.appendChild(td1); a.onclick = function () { let result = confirm("确定要删除"+inputs[0].value+"吗?"); if (result){ this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); } return false; } } } let table = document.getElementsByTagName("table")[0]; table.appendChild(tr); }; // 删除元素 let a = document.getElementsByTagName("a"); for (let i = 0; i < a.length; i++) { a[i].onclick = function () { let name = this.parentNode.parentNode.firstChild.innerText; let result = confirm("确定要删除"+name+"吗?"); if (result){ this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); } return false; } } </script>
写在最后
传送门：DOM操作教程
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
