js(DOM)基础：12、DOM查询3、DOM增删改、DOM删除列表、DOM添加列表、DOM操作遇到问题
javascript 的dom查询、dom增删改、dom列表的删除/添加、dom操作遇到的问题
- Ⅰ、DOM查询3：body、documentElement、querySelector()、querySelectorAll()
- 其一、代码为：
- 其二、结果为：
- Ⅱ、DOM的增删改操作：createElement、createTextNode、appendChild、insertBefore、replaceChild、removeChild
- 其一、css代码为：
- 其二、html代码为：
- 其三、结果为：
- Ⅲ、DOM删除列表操作：
- 其一、css代码为：
- 其二、html代码为：
- 其三、结果为：
- Ⅳ、DOM添加列表操作：
- 其一、css代码为：
- 其二、html代码为：
- 其三、结果为：
- Ⅴ、DOM操作遇到的问题：
- 其一、css代码为：
- 其二、html代码为：
- 其三、结果为：
- Ⅵ、小结：
Ⅰ、DOM查询3：body、documentElement、querySelector()、querySelectorAll()
其一、代码为：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//获取 body 标签(即：方式一)//var body = document.getElementsByTagName("body")[0];/** 在 document 中有一个属性 body，它保存的是 body 的引用(即：方式二)*/var body = document.body;/** document.documentElement 保存的是 html 根标签*/var html = document.documentElement;// console.log(html);// <html>...</html>(即：根标签，输出所有在 html 的元素值)/** document.all 代表页面中所有的元素*/var all = document.all;//(即：方式一)// console.log(all.length);// 17// for(var i=0 ; i<all.length ; i++){// console.log(all[i]);// 输出所有的 <head></head>、<meta charset="UTF-8">、<title></title>、<script>、<body>、<div>等元素值;// }// all = document.getElementsByTagName("*");//(即：方式二)// console.log(all.length);// 17/** 根据元素的 class 属性值查询一组元素节点对象* getElementsByClassName() 可以根据 class 属性值获取一组元素节点对象，* 但是该方法不支持 IE8 及以下的浏览器*/// var box1 = document.getElementsByClassName("box1");// console.log(box1.length);// 4//获取页面中的所有的 div//var divs = document.getElementsByTagName("div");//获取 class 为 box1 中的所有的 div//.box1 div/** document.querySelector()* - 需要一个选择器的字符串作为参数，可以根据一个 CSS 选择器来查询一个元素节点对象* - 虽然 IE8 中没有 getElementsByClassName() 但是可以使用 querySelector() 代替* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个*/var div = document.querySelector(".box1 div");var box1 = document.querySelector(".box1")// console.log(div.innerHTML);// 我是box1中的div(注意：在有多个满足条件的情况下，只会返回第一个)// console.log(box1.innerHTML);// 我是第一个box1 <div>我是box1中的div</div>(注意：在有多个满足条件的情况下，只会返回第一个)/** document.querySelectorAll()* - 该方法和 querySelector() 用法类似，不同的是它会将符合条件的元素封装到一个数组中返回* - 即使符合条件的元素只有一个，它也会返回数组*/box1 = document.querySelectorAll(".box1");var box2 = document.querySelectorAll("#box2");console.log(box1);// NodeList(4) [div.box1, div.box1, div.box1, div.box1]console.log(box2)// NodeList [div#box2]};</script></head><body><div id="box2"></div> <div class="box1">我是第一个box1 <div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div></div></body>
</html>其二、结果为：
// 一进入页面后的控制台：
Ⅱ、DOM的增删改操作：createElement、createTextNode、appendChild、insertBefore、replaceChild、removeChild
其一、css代码为：
@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;
}button {width: 300px;margin-bottom: 10px;
}#btnList {float:left;
}#total{width: 450px;float:left;
}ul{list-style-type: none;margin: 0px;padding: 0px;
}.inner li{border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float:left;
}.inner{width:400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;
}其二、html代码为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function() {//创建一个"广州"节点,添加到 #city 下myClick("btn01",function(){//创建广州节点 <li>广州</li>//创建 li 元素节点/** document.createElement()* 可以用于创建一个元素节点对象，* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，* 并将创建好的对象作为返回值返回*/var li = document.createElement("li");//创建广州文本节点/** document.createTextNode()* 可以用来创建一个文本节点对象* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回*/var gzText = document.createTextNode("广州");//将 gzText 设置 li 的子节点/** appendChild()* - 向一个父节点中添加一个新的子节点* - 用法：父节点.appendChild(子节点);*/li.appendChild(gzText);//获取 id 为 city 的节点var city = document.getElementById("city");//将广州添加到 city 下city.appendChild(li);});//将"广州"节点插入到 #bj 前面myClick("btn02",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取 id 为 bj 的节点var bj = document.getElementById("bj");//获取 cityvar city = document.getElementById("city");/** insertBefore()* - 可以在指定的子节点前插入新的子节点* - 语法：* 父节点.insertBefore(新节点,旧节点);*/city.insertBefore(li , bj);});//使用"广州"节点替换 #bj 节点myClick("btn03",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取 id 为 bj 的节点var bj = document.getElementById("bj");//获取 cityvar city = document.getElementById("city");/** replaceChild()* - 可以使用指定的子节点替换已有的子节点* - 语法：父节点.replaceChild(新节点,旧节点);*/city.replaceChild(li , bj);});//删除 #bj 节点myClick("btn04",function(){//获取 id 为 bj 的节点var bj = document.getElementById("bj");//获取 cityvar city = document.getElementById("city");/** removeChild()* - 可以删除一个子节点* - 语法：父节点.removeChild(子节点);* * 子节点.parentNode.removeChild(子节点);*///city.removeChild(bj);//(即：方案一)bj.parentNode.removeChild(bj);//(即：方案二)});//读取 #city 内的 HTML 代码myClick("btn05",function(){//获取 cityvar city = document.getElementById("city");// alert(city.innerHTML);console.log(city.innerHTML);// <li id="bj">北京</li>// <li>上海</li>// <li>东京</li>// <li>首尔</li>});//设置 #bj 内的 HTML 代码myClick("btn06" , function(){//获取 bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});myClick("btn07",function(){//向 city 中添加广州var city = document.getElementById("city");/** 使用 innerHTML 也可以完成 DOM 的增删改的相关操作* 一般我们会两种方式结合使用*///city.innerHTML += "<li>广州</li>";//因为删除和添加的元素太多了，因此一般也不采用这种方式处理增加操作;//创建一个 livar li = document.createElement("li");//向 li 中设置文本li.innerHTML = "广州";//将 li 添加到 city 中city.appendChild(li);});};// 集成的方法：function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul></div></div><div id="btnList"><div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div><div><button id="btn02">将"广州"节点插入到#bj前面</button></div><div><button id="btn03">使用"广州"节点替换#bj节点</button></div><div><button id="btn04">删除#bj节点</button></div><div><button id="btn05">读取#city内的HTML代码</button></div><div><button id="btn06">设置#bj内的HTML代码</button></div><div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div></div></body>
</html>其三、结果为：
// 一进入页面后：
// 点击 创建一个"广州"节点,添加到 #city 下 后的页面：
// 点击 将"广州"节点插入到 #bj 前面 后的页面：
// 点击 使用"广州"节点替换 #bj 节点 后的页面：
// 点击 删除 #bj 节点 后的页面：
// 点击 读取 #city 内的 HTML 代码 后的控制台：
// 点击 设置 #bj 内的 HTML 代码 后的页面：
// 点击 创建一个"广州"节点,添加到 #city 下 后的页面(另一种方式)：
Ⅲ、DOM删除列表操作：
其一、css代码为：
@CHARSET "UTF-8";
#total {width: 450px;margin-left: auto;margin-right: auto;
}ul {list-style-type: none;
}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;
}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;
}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;
}th,td {background-color: white;
}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;
}#formDiv input {width: 100%;
}.word {width: 40px;
}.inp {width: 200px;
}其二、html代码为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">window.onload = function(){/** 点击超链接以后，删除一个员工的信息*///获取所有的超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for(var i=0 ; i < allA.length ; i++){allA[i].onclick = function(){//点击超链接以后需要删除超链接所在的那行//这里我们点击那个超链接 this 就是谁//获取当前 trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字//var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//删除之前弹出一个提示框/** confirm() 用于弹出一个带有确认和取消按钮的提示框* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来* 如果用户点击确认则会返回 true，如果点击取消则返回 false*/var flag = confirm("确认删除"+name+"吗?");//如果用户点击确认if(flag){//删除 trtr.parentNode.removeChild(tr);}/** 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，* 但是此时我们不希望出现默认行为，可以通过在响应函数的最后 return false 来取消默认行为*/return false;};}};</script>
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td><!-- 注意：此时的 href="javascript:;" 是为了取消超链接的默认行为而设置的--></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div></body>
</html>其三、结果为：
// 一进入页面后：
// 删除操作：
// 删除结果：
Ⅳ、DOM添加列表操作：
其一、css代码为：
@CHARSET "UTF-8";
#total {width: 450px;margin-left: auto;margin-right: auto;
}ul {list-style-type: none;
}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;
}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;
}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;
}th,td {background-color: white;
}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;
}#formDiv input {width: 100%;
}.word {width: 40px;
}.inp {width: 200px;
}其二、html代码为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/** 删除 tr 的响应函数*/function delA() {//点击超链接以后需要删除超链接所在的那行//这里我们点击那个超链接 this 就是谁//获取当前 trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字//var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//删除之前弹出一个提示框/** confirm() 用于弹出一个带有确认和取消按钮的提示框* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来* 如果用户点击确认则会返回 true，如果点击取消则返回 false*/var flag = confirm("确认删除" + name + "吗?");//如果用户点击确认if(flag) {//删除trtr.parentNode.removeChild(tr);}/** 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，* 但是此时我们不希望出现默认行为，可以通过在响应函数的最后 return false 来取消默认行为*/return false;};window.onload = function() {/** 点击超链接以后，删除一个员工的信息*///获取所有额超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for(var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}/** 添加员工的功能* - 点击按钮以后，将员工的信息添加到表格中*///为提交按钮绑定一个单击响应函数var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick = function() {//获取用户添加的员工信息//获取员工的名字var name = document.getElementById("empName").value;//获取员工的 email 和 salaryvar email = document.getElementById("email").value;var salary = document.getElementById("salary").value;//alert(name+","+email+","+salary);/** <tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr>需要将获取到的信息保存到 tr 中*///创建一个 trvar tr = document.createElement("tr");//创建四个 tdvar nameTd = document.createElement("td");var emailTd = document.createElement("td");var salaryTd = document.createElement("td");var aTd = document.createElement("td");//创建一个 a 元素var a = document.createElement("a");//创建文本节点var nameText = document.createTextNode(name);var emailText = document.createTextNode(email);var salaryText = document.createTextNode(salary);var delText = document.createTextNode("Delete");//将文本条件到 td 中nameTd.appendChild(nameText);emailTd.appendChild(emailText);salaryTd.appendChild(salaryText);//向 a 中添加文本a.appendChild(delText);//将 a 添加到 td 中aTd.appendChild(a);//将 td 添加到 tr 中tr.appendChild(nameTd);tr.appendChild(emailTd);tr.appendChild(salaryTd);tr.appendChild(aTd);//向 a 中添加 href 属性a.href = "javascript:;";//为新添加的 a 再绑定一次单击响应函数(注意：若不绑定的话，那么后来添加的 a 标签就没有删除操作，因为原本删除的操作是一进入页面就绑定好了的)a.onclick = delA;//获取 tablevar employeeTable = document.getElementById("employeeTable");//获取 employeeTable 中的 tbodyvar tbody = employeeTable.getElementsByTagName("tbody")[0];//将 tr 添加到 tbody 中tbody.appendChild(tr);//如下方法不要使用原因： 1、性能不高(因为全部要重新添加); 2、存在隐患(因为重新添加后的 a 标签在页面加载后，需要重新触发，存在点击不生效的问题)/*tbody.innerHTML += "<tr>"+"<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>Delete</a></td>"+"</tr>";*/};};</script></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton">Submit</button></td></tr></table></div></body></html>其三、结果为：
// 一进入页面后：
// 添加操作及结果：
// 新添加的列可成功删除：
Ⅴ、DOM操作遇到的问题：
其一、css代码为：
@CHARSET "UTF-8";
#total {width: 450px;margin-left: auto;margin-right: auto;
}ul {list-style-type: none;
}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;
}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;
}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;
}th,td {background-color: white;
}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;
}#formDiv input {width: 100%;
}.word {width: 40px;
}.inp {width: 200px;
}其二、html代码为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">window.onload = function(){/** 点击超链接以后，删除一个员工的信息*///获取所有额超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for(var i=0 ; i < allA.length ; i++){/** for循环会在页面加载完成之后立即执行，* 而响应函数会在超链接被点击时才执行* 当响应函数执行时，for 循环早已执行完毕(即：涉及块级作用域的问题，此时将 var 换成 let 就行了)*/alert("for循环正在执行"+i);allA[i].onclick = function(){alert("响应函数正在执行"+i);//alert(allA[i]);return false;};}};</script>
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div></body>
</html>其三、结果为：
// 一进入页面后：
// 执行删除操作后：
// 发现：响应函数会在超链接被点击时才执行，涉及作用域问题，无论点击哪个 Delete 此时的 i 都为3；
Ⅵ、小结：
其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话，也可以多多关注这个专栏(Java)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482