1.节点
常用节点分为四类：
- 文档节点：整额html文档
- 元素节点：html文档中的html标签
- 属性节点：元素的属性
- 文本节点：html标签中的文本内容
nodeType可以用来判断是什么节点
2.事件
两种方式绑定事件
<body>
<!--
我们可以在事件对应的属性中设置一些JS代码，
这样事件被触发时，这些代码将会执行
这种写法称为结构和行为耦合，不方便维护，不推荐使用
-->
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
/*
事件就是用户与浏览器之间的交互行为，
比如，点击按钮，鼠标移动，关闭窗口
*/
//获取按钮对象
var btn = document.getElementById("btn");
/*
可以为按钮的对应事件绑定处理函数的形式来响应事件
这样当事件被触发时，其对应的函数将会被调用
*/
//绑定一个单击事件
//像这种为单击事件绑定的函数，我们称之为单击响应函数
btn.onclick = function(){
alert("你还点～～");
};
</script>
</body>
3.dom查询
获取元素节点：
通过document对象调用
- document.getElementById()
- document.getELementsByTagName()
- document.getElementsByName()
获取元素节点的子节点
通过具体的元素节点调用
- getElementsByTagName()
-方法，返回当前节点的指定标签名后代节点 - childNodes
-属性，表示当前节点的所有子节点
-！！！会获取包括文本节点在内的所有节点
！！ 隐患：根据DOM标签间的空白也会当成文本节点
注意在ie8及以下的浏览器中，不会将空白当成子节点
所以该属性在IE8及以下的浏览器中会返回4个子元素而其它浏览器是9个
<ul id="city">
<li id="bj">北京</li>
<li id="bj">上海</li>
<li id="bj">东京</li>
<li id="bj">首尔</li>
</ul>
本应该是alert 4,但是输出9,因为DOM标签间的空白也会当成文本节点，
//获取id为city的节点
var city = document.getElementById("city");
//返回#city的所有子节点
var cns = city.childNodes;
alert(cns.length);//9
解决方式一：ul li放在一行
<ul id="city"><li id="bj">北京</li><li id="bj">上海</li> <li id="bj">东京</li><li id="bj">首尔</li>
解决方式二：可以用children属性获取当前元素的所有**子元素**,所有浏览器都兼容
```javascript
var city = document.getElementById("city");
//返回#city的所有子节点
var cns2 = city.children;
alert(cns2.length);//4
- firstChild
-属性，表示当前节点的第一个子节点。可以获取到当前元素的第一个子节点（包括空白文本节点） - firstElementChild
-获取当前元素的第一个子元素(不包括空白)
-！！不支持IE8及以下的浏览器
-如果需要兼容他们，尽量不要使用 - lastChild
-属性，表示当前节点的最后一个子节点
获取父节点和兄弟节点
通过具体的节点调用
1.parentNode
-属性，表示当前节点的父节点
2.previousSibling
-属性，表示当前节点的前一个兄弟节点（也可能获取到空白文本）
previousElementSibling（ie8不能用）
-获取前一个兄弟元素
3.nextSibling
-属性，表示当前节点的后一个兄弟节点
4.0518图片切换练习
5.
7.全选练习
8.dom元素选择与兼容
<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;
/*
document.all
document.getElementsByTagName("*")
代表页面中的所有元素
*/
var all = document.all;
//HTMLAllCollection(8) [html, head, meta, meta, meta, title, script, body, viewport: meta]
all = document.getElementsByTagName("*");
//HTMLCollection(8) [html, head, meta, meta, meta, title, script, body, viewport: meta]
/*
根据元素的class属性值查询一组元素节点对象
document.getElementsByClassName()可以根据class属性值获取一组元素节点对象，
但是该方法不支持IE8及以下的浏览器
*/
var box1 = document.getElementsByClassName("box1");
// 获取页面中的所有div
var divs = document.getElementsByTagName("div");
//获取class为box1中的所有的div
//.box1 div
/*
document.querySelector()
-需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
-虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
-使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
/*
document.querySelectorAll()
-该方法和document.querySelector()用法类似，不同的是它会将符合条件的元素封装到数组中
-即使符合条件的元素只有一个也会返回一个数组
*/
var box1 = document.querySelectorAll(".box1");
console.log(box1.length);
};
</script>
8.dom增删改
document.createElement();
document.createTextNode();
li.appendChild(gzText);
父节点.insertBefore(新节点，旧节点);
父节点.replaceChild(新节点，旧节点)；
父节点.removeChild(子节点);
结合innerHTML完成DOM增删改的操作，推荐两个方式结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
//创建一个“广州”节点，添加到#city下
myClick("btn01",function(){
//创建广州节点<li>广州</li>
//创建li元素节点 createElement()
/*
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("广州");
//将gzText设置为li的子节点
li.appendChild(gzText);
//获取id为bj的节点
var obj = document.getElementById("bj");
//获取#city
var 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 obj = document.getElementById("bj");
/*
replaceChild()替换子节点
- 可以使用指定的子节点替换已有的子节点
- 语法： 父节点.replaceChild(新节点，旧节点)
*/
var city = document.getElementById("city");
city.replaceChild(li,bj);
});
//删除#bj节点
myClick("btn04", function(){
//获取id为bj的节点
var obj = document.getElementById("bj");
var city = document.getElementById("city");
/*
removeChild()
- 可以删除一个子节点
- 语法：父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);
*/
bj.parentNode.removeChild(bj);
//city.removeChild(bj);
});
//读取#city内的HTML代码
myClick("btn05", function(){
var city = document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
//btn07 向city中添加广州
/*
使用innerHTML也可以完成DOM增删改的相关操作，但是动静太大，整个city部分都是新的元素
一般我们会两种方式结合使用(推荐使用)
*/
myClick("btn07",function(){
var city = document.getElementById("city");
//city.innerHTML += "<li>广州</li>"; //动静太大，整个city部分都是新的元素
//创建一个li
var 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>
9.添加删除记录练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加删除练习</title>
<script type="text/javascript">
//删除的单击响应函数
function delA() {
//点击超链接以后需要删除超链接所在的那行
//这里我们点击哪个超链接,this就是谁
//获取当前tr
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//var name = tr.getElementsByTagName("td")[0].innerText;
var name = tr.children[0].innerText;
//但是不能是tr.firstChild，因为有空格
//删除之前弹出提示框
/*
confirm()用于弹出一个带有确认和取消按钮的提示框
需要个字符串作为参数，该字符串将会作为提示文字显示
*/
var flag = confirm("确认删除"+name+"吗");
if(flag){
//删除tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
};
window.onload = function(){
//点击Delete超链接之后，删除一个员工的信息
//获取所有超链接
var allA = document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for(var i = 0; i < allA.length; i++){
/*
需要注意的问题！！！！！
for循环会在页面加载完成之后立即执行，
而响应函数会在超链接被点击时才执行
当响应函数执行时，for循环早已执行完毕
*/
allA[i].onclick = delA; //对象赋值所以不加括号
}
//点击submit将一个员工的信息添加到表格中
//为提交按钮#addEmpButton绑定单击响应函数
var submit = document.getElementById("addEmpButton");
submit.onclick = function(){
//获取用户添加的员工信息
//获取员工的名字,input文本框中的value属性就是文本框中用户输入的内容
var name = document.getElementById("empName").value;
//获取员工的email和salary
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
//需要将获取到的信息保存到tr中
/*
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
*/
//创建一个tr
var tr = document.createElement("tr");
//设置tr中的内容
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
//获取刚刚添加的a元素，并为其绑定单击响应函数
var a = tr.getElementsByTagName("a")[0];
a.onclick = delA;
//获取table #employeeTable
var table = document.getElementById(employeeTable);
//获取employeeTable中的tbody，内存中有
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到tbody中
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable" frame=box rules=all>
<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="deleteEmp?id=001">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 frame=box>
<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>
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
