JavaScript与DOM——HTML操作大法！！
文章目录
JavaScript通过对DOM操作实现对HTML的控制。
Document的部分API
由于程序自上而下执行，暂时想对dom操作就要写在目标代码之后。
<body>
<div id="d1">dasdas</div>
<div id="d2"></div>
<div class="div03">class获取到的div</div>
<input type="text" name="input" id="" value="input标签" />
<input type="text" name="input" id="" value="3309" />
<input type="text" name="input" id="" value="4406" />
</body>
<script type="text/javascript">
//1.通过id/name/class或tarName获取js对象
var idObj = document.getElementById("d1");
//输出idObj对象
console.log(idObj);
var nameObjs = document.getElementsByName("input");
for(var index=0; index<nameObjs.length; ++index) {//遍历数组
//输出对象的value
console.log(nameObjs[index].value);
}
var classNameObjs = document.getElementsByClassName("div03");
//获取div标签内部的值
console.log(classNameObjs[0].textContent);
var tarNameObjs = document.getElementsByTagName("div");
for(var index=0; index<nameObjs.length; ++index) {//遍历数组
//输出对象
console.log(tarNameObjs[index]);
}
var d2Obj = document.getElementById("d2");
//2.创建标签
var aObj = document.createElement("a");
//3.创建属性
var aStyle = document.createAttribute("href");
//给属性赋值
aStyle.value = "https://baidu.com";
//4.创建节点
var textNode = document.createTextNode("跳转百度");
//将属性与js对象连接
aObj.setAttributeNode(aStyle);
//为aObj对象添加节点
aObj.append(textNode);
//为d2Obj添加子节点
d2Obj.appendChild(aObj);
</script>
js对DOM进行操作
js代码通过对DOM操作达到控制HTML的效果。（例子内含有API）
<body>
<div>前一个div节点</div><ul id="list" >
<li>菜单1</li>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
</ul>
</ul><div>div节点</div>
</body>
<script type="text/javascript">
//1.获取id为list的ul列表
var listObj = document.getElementById("list");
//2.获取所有的孩子节点
var childs = listObj.childNodes;
console.log(childs);
for(var i=0; i<childs.length; i++) {
var node = childs[i];
if(node.nodeType != 3) {
console.log("ul子标签节点名：" + node.tagName);
}
}
//3.获取父节点
var parent = listObj.parentNode;
//4.获取标签名
console.log(parent.tagName);
//5.获取第一个子节点
console.log(listObj.firstChild);
//6.获取最后一个子节点
console.log(listObj.lastChild);
//7.获取下一个兄弟节点
console.log("下一个兄弟节点：" , listObj.nextSibling);
//8.获取上一个兄弟节点
console.log("上一个兄弟节点：" , listObj.previousSibling);
//9.移除指定的孩子节点
listObj.removeChild(listObj.childNodes[1]);
//10.添加孩子节点 appendChild添加到最后一个子节点
var li = document.createElement("li");
var txt = document.createTextNode("主菜单2");
li.appendChild(txt);
listObj.insertBefore(li,listObj.childNodes[1]);
// listObj.appendChild(li);
</script>
JavaScript对事件的操作
仅仅是通过事件函数对css进行调控。
<title>菜单简单实现</title>
<style type="text/css">
body{ font-size: 16px; color: #ccc; }
li{
list-style: none;
background-color: brown;
width: 120px;
height: 40px;
margin-left: 10px;
text-align: center;
line-height: 40px;
cursor: pointer;
float: left;
}
.menu_item{
border: 1px solid #fff;
width: 200px;
height: 300px;
background-color: #ccc;
margin-left: 10px;
margin-top: 40px;
}
.menu_item_hidden{
display: none;
}
.menu{
float: left;
width: 200px;
}
</style>
<script type="text/javascript">
//鼠标进入事件
function display(ev) {
//1.获取事件源的对象
var target = ev.target;
var menuItemObj;
if(target.tagName == "LI") {
//2.获取id
var id = target.id;
//3.获取对应子菜单的id对象
menuItemObj = document.getElementById(id + "_menu");
}else if(target.tagName == "DIV") {
//2.获取id
var id = target.id;
menuItemObj = document.getElementById(id);
}
//4.修改其样式
menuItemObj.className = "menu_item";
}
//鼠标移出事件
function hidd(ev) {
//1.获取事件源的对象
var target = ev.target;
var menuItemObj;
if(target.tagName == "LI") {
//2.获取id
var id = target.id;
//3.获取对应子菜单的id对象
menuItemObj = document.getElementById(id + "_menu");
}else if(target.tagName == "DIV") {
//2.获取id
var id = target.id;
menuItemObj = document.getElementById(id);
}
//4.修改其样式
menuItemObj.className = "menu_item menu_item_hidden";
}
</script>
</head>
<body>
<div id="">
<div class="menu">
<li id="tech" onm ousemove="display(event);" onm ousemove="display(event);" onm ouseout="hidd(event);">科技类书籍</li>
<div id="tech_menu" onm ousemove="display(event);" onm ousemove="display(event);" onm ouseout="hidd(event);">
</div>
</div>
<div class="menu">
<li id="book" onm ousemove="display(event);" onm ousemove="display(event);" onm ouseout="hidd(event);">文史类书籍</li>
<div id="book_menu" onm ousemove="display(event);" onm ousemove="display(event);" onm ouseout="hidd(event);">
</div>
</div>
<div class="menu">
<li id="enc" onm ousemove="display(event);" onm ousemove="display(event);" onm ouseout="hidd(event);">经济类书籍</li>
<div id="enc_menu" onm ousemove="display(event);" onm ousemove="display(event);" onm ouseout="hidd(event);">
</div>
</div>
</div>
</body>
操作DOM的实例
通过员工id实现删除事件。
<style type="text/css">
tr{
text-align: center;
height: 30px;
}
</style>
<script type="text/javascript">
var i = 0;
function over(obj) {
obj.style.backgroundColor="blue";
}
function out(obj) {
obj.style.backgroundColor="";
}
function delEmp(id) {
var trObj = document.getElementById(id);
var tbodyObj = document.getElementById("emps");
tbodyObj.removeChild(trObj);
}
function addEmployee() {
//1.获取所有input框内容
var inputObjs = document.getElementsByTagName("input");
//2.获取员工的id
var id = inputObjs[0].value;
var name = inputObjs[1].value;
var salary = inputObjs[2].value;
//3.获取tbody对象
var tbodyObj = document.getElementById("emps");
//4.清空里面内容
// tbodyObj.remove();
//5.创建tr对象
var trObj = document.createElement("tr");
trObj.setAttribute("id",id);
trObj.setAttribute("onmouseover",'over(this)');
trObj.setAttribute("onmouseout",'out(this)');
//6.创建id name salary
var idTd = document.createElement("td");
var idText = document.createTextNode(id);
var nameTd = document.createElement("td");
var nameText = document.createTextNode(name);
var salaryTd = document.createElement("td");
var salaryText = document.createTextNode(salary);
var numTd = document.createElement("td");
var numText = document.createTextNode(++i);
numTd.appendChild(numText);
idTd.appendChild(idText);
nameTd.appendChild(nameText);
salaryTd.appendChild(salaryText);
//7.创建一个button
var btnTd = document.createElement("td");
var button = document.createElement("button");
button.setAttribute("type","button");
button.setAttribute("onclick","delEmp('"+id+"');");
var txtButton = document.createTextNode("删除");
button.appendChild(txtButton);
btnTd.appendChild(button);
//8.将所有的td加入tr对象中
trObj.appendChild(numTd);
trObj.appendChild(idTd);
trObj.appendChild(nameTd);
trObj.appendChild(salaryTd);
trObj.appendChild(btnTd);
//9.将所有的tr加入tbodyObj中
tbodyObj.appendChild(trObj);
}
</script>
</head>
<body>
员工id:<input type="text" name="id"/> <br>
员工姓名:<input type="text" name="ename"/> <br>
员工薪水:<input type="text" name="salary"/> <br>
<button type="button" onclick="addEmployee(this)">提交</button>
<table border="1" cellspacing="0" cellpadding="0" align="center" width="500px">
<thead align="center">
<td>序号</td>
<td>员工编号</td>
<td>姓名</td>
<td>薪水</td>
<td>操作方式</td>
</thead>
<tbody id="emps">
</tbody>
</table>
</body>