目录
DOM
DOM简介
- DOM ,全称 Document Object Model文档对象模型。
- JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。
- 文档： 文档表示的就是整个的HTML网页文档
- 对象： 对象表示将网页中的每一个 部分都转换为了一个对象。
-
模型： 使用模型来表示对象之间的关系,这样方便我们获取对象。
节点
- 节点Node ,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。
- 比如: html标签、属性、文本、注释、整个文档等都是一个节点。
- 虽然都是节点，但是实际上他们的具体类型是不同的。
- 比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
- 节点的类型不同，属性和方法也都不尽相同
- 常用节点分位为四类：
- 文档节点: 整个HTML文档
- 元素节点: HTML文档中的HTML标签
- 属性节点: 元素的属性
- 文本节点: HTML标签中的文本内容
| 节点的属性 | |||
|---|---|---|---|
| nodeName | nodeType | nodeValue | |
| *文档节点 | #document | 9 | null |
| *元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
DOM简单小练习
- 想用js修改html页面元素的内容时
- 使用document获取元素
- 使用
元素.innerHTML修改内容
<!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>DOM简介</title>
</head>
<body>
<button id = "btn"> 我是一个按钮</button>
<script>
/*
浏览器已经为我们提供文档节点对象这个对象是window属性
可以在页面中直接使用，文档节点代表的是整个网页
document 文档，代表整个网页页面，通过它我们可以获取网页中的任意一个对象
*/
// console.log(document);
//获取到button对象
//获取id为btn 的元素
var btn = document.getElementById("btn");
// console.log(btn);
//修改按钮中的文字
// console.log(btn.innerHTML);
btn.innerHTML = "I'm Button";
</script>
</body>
</html>事件
- 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
- JavaScript与HTML之间的交互是通过事件实现的。
- 对于Web应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。
事件的两种绑定方式
- 直接在标签内通过属性来绑定
- 我们通过在事件对应的属性中添加一些js代码，这样当事件被触发时，这些代码将会执行
- 这种此写法我们称为叫做结构和行为耦合，不方便维护，不推荐使用
- 例如：
-
<button id = "btn" onclick = "alert('别点我！')">我是一个按钮</button>
-
- 获取对象，通过对对象的指定属性去绑定回调函数
- 获取按钮对象
- 绑定一个单击的事件
- 像这种为单击事件绑定的函数，我们称为单击响应函数
- 例：
var btn = document.getElementById("btn");btn.onclick = function(){alert("你还点啥啊！！")};
<!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>
</head>
<body>
<!--
我们可以在事件对应的属性中添加一些js代码，
这样当事件被触发时，这些代码将会执行
这种写法我们称为叫做结构和行为耦合，不方便维护，不推荐使用
-->
<!--
-1- 绑定法一
-->
<!-- <button id = "btn" onclick = "alert("别点！！")"> 我是一个按钮</button> -->
<button id = "btn" > 我是一个按钮</button>
<script>
/*
事件，就是用户和浏览器之间的交互行为
比如：顶级按钮，鼠标移动，关闭窗口。。。
*/
/*
-2- 绑定法二
*/
//1-获取按钮对象
// var btn = document.getElementById("btn");
/*
可以为按钮的对应事件绑定处理函数的形式来处理事件
这样当事件被触发时，其对应的函数将会被调用
*/
//2-绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数
// btn.onclick = function(){
// alert("你还点啥啊！！")
// };
// btn.onmousemove = function(){
// alert("别移动这个哦！")
// };
btn.ondblclick = function(){
alert("又开始了是吗！！")
};
</script>
</body>
</html>文档的加载
- 浏览器在加载页面的时候，一般是按照自上而下的顺序加载的
- 读取到一行就运行一行，如果将script代码写到页面的上边
- 在执行代码时，页面还没有加载出来，
- 所以一般会将script代码写在页面的下部（body内部的下方位置），就是为了可以在页面加载完毕以后再执行js代码
- onload方法
- 如果想仍然将script代码写在上部（head部分或者body内部上方的话，我们可以考虑用这个方法），使在页面加载后立即执行JS代码
- onload最常用于<body>元素中，用于在网页加载所有内容后执行脚本
- onload事件会在整个页面加载完成之后才触发
-
练习版代码
<!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 > /* onload事件会在整个页面加载完成之后才触发 */ function myFunction(){ // var btn = document.getElementById("btn"); var btn = document.getElementById("btn"); //获取id为btn的按钮 //为按钮绑定一个单击响应函数 btn.onclick = function(){ alert("hello"); } } </script> </head> <body onload="myFunction()"> <!--引入到支持onload的html对象中--> <!-- 创建一个按钮 --> <button id = "btn">点我一下</button> <!-- <script> /* 浏览器在加载一个页面时，是按照自上而下的顺序加载的 读取到一行就运行一行，如果将script代码写到页面的上边 在执行代码时，页面还没有加载 */ /* 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码 */ //获取id为btn的按钮 var btn = document.getElementById("btn"); //为按钮绑定一个单击响应函数 btn.onclick = function(){ alert("hello"); } </script> --> </body> </html> - 支持该事件（onload）的JavaScript对象：
- image
- layer
- window
-
练习1
<!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>练习1</title> <script > /* onload事件会在整个页面加载完成之后才触发 为window绑定一个onload 该事件对应的响应函数将会在页面加载完成之后执行 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了 */ window.onload = function (){ var btn = document.getElementById("btn"); btn.onclick = function(){ alert("hello"); } } </script> </head> <body> <button id = "btn">点我一下</button> </body> </html>
DOM查询
获取元素节点
- 通过document对象调用
- getElementById()
- 通过id属性获取一个元素节点对象
- getElementsByTagName()
- 通过标签名获取一组元素节点对象
- getElementsByName()
- 通过name属性获取一组元素节点对象
获取元素节点的子节点
-
通过具体的元素节点调用
- getElementsByTagName()
- 方法, 返回当前节点的指定标签名后代节点
- childNodes
- 属性, 表示当前节点的所有子节点
- firstChild
- 属性, 表示当前节点的第一个子节点
- lastChild
- 属性, 表示当前节点的最后一个子节点
获取父节点和兄弟节点
-
通过具体的节点调用
- parentNode
- 属性, 表示当前节点的父节点
- previousSibling
- 属性,表示当前节点的前一个兄弟节点
- nextSibling
- 属性,表示当前节点的后-个兄弟节点
html代码
<!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>DOM查询</title>
<link rel="stylesheet" href="./04-DOM.css">
<script>
/*
定义一个函数，专门用来为指定元素绑定单击响应函数
c参数：
idStr 要绑定单击响应函数的对象的id属性值
fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
/*
-1- 查找#bj节点
*/
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
}
/*
-2- 查找所有li节点
*/
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementByTagName() 可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
var lis = document.getElementsByTagName("li");
//打印lis
// alert(lis.length);
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
/*
-3-查找name = gender的所有节点
*/
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name = gender的所有节点
var inputs =document.getElementsByName("gender");
alert(inputs);
alert(inputs.length);
for(var i= 0;i<inputs.length;i++){
/*
innerHTML用于获取元素内部的HTML代码
对于自结束标签，这个属性没有意义
*/
// alert(inputs[i].innerHTML);
/*
如果需要读取元素节点属性，
直接使用元素.属性名
例子：元素.id 元素.name 元素.value
注意：class属性不能采用这种方式
读取class属性时需要使用 元素.className
*/
alert(inputs[i].value);
}
}
/*
-4- 查找#city下所有Ii节点
*/
//为id欸btn04的按钮绑定一个但积极响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//获取id 为city的元素
var city = document.getElementById("city");
var lis = city.getElementsByTagName("li");
for(var i = 0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
}
/*
-5- 返回#city的所有子节点
*/
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
var city = document.getElementById("city");
/*
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标准，标签之间的空白也会当成文本节点
注意: 在IE8及以下的浏览器中，不会将空白文档当成子节点，
所以该属性在IE8中会返回4个子元素，而其它浏览器是9个
*/
var child = city.childNodes;
for(var i = 0;i<child.length;i++){
alert(child[i]);
}
// alert(child);
/*
children属性可以获取 抢钱元素的所有子元素
*/
var child2 = city.children;
alert(child2.length);
}
/*
-6- 返回#phone的第一个子节点
*/
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
var phone = document.getElementById("phone");
//firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
var firstchild =phone.firsttChild;
/*
firstElementChild不支持IE8及以下的浏览器，
如果需要兼容他们尽量不要使用
*/
//firstElementChil d获取当前元素的第一个子元素（不包括空白文本节点）
// var firstchild =phone.firstElementChild;
alert(firstchild.innerHTML);
}
/*
-7- 返回#bj的父节点
*/
myClick("btn07",function(){
var bj = document.getElementById("bj");
var ph = bj.parentNode;
alert(ph.innerHTML);
/*
innerText
- 该属性可以获取到元素内部的文本内容
- 它和innerHTML类似，不同的是它会自动将html去除
*/
// alert(ph.innerText);
});
/*
-8- 返回# android的前一个兄弟节点
*/
myClick("btn08",function(){
var and = document.getElementById("android");
//返回前一个兄弟节点（也可能获取到空白的文本）
var ps = and.previousSibling;
var pe = and.previousElementSibling;
alert(ps.innerHTML);
alert(pe.innerHTML);
});
myClick("btn09",function(){
});
myClick("btn10",function(){
});
myClick("btn11",function(){
//获取文本节点
var bj = document.getElementById("bj");
var fc = bj.firstChild;
alert(fc.nodeValue);
});
}
</script>
</head>
<body>
<div id = "all">
<div id = "zuo">
<div class = "on">
<p>你喜欢哪个城市？</p>
<ul id ="city">
<li id = "bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<p>你喜欢哪款单机游戏？</p>
<ul id = "youxi">
<li>红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<p>你手机的操作系统是？</p>
<ul id = "phone">
<li>IOS</li>
<li id = "android">Android</li>
<li>Windows Phone</li>
</ul>
</div>
<div class = "down">
<label >gender:
<input type="radio" name ="gender" value="male">Male
<input type="radio" name = "gender" value="female"> Female
</label><br>
<label>name:
<input type="text" name ="name" value="abcde">
</label>
</div>
</div>
<span id = "you">
<button id = "btn01">查找#bj节点</button>
<button id = "btn02">查找所有Ii节点</button>
<button id = "btn03">查找name=gender的所有节点</button>
<button id = "btn04">查找#city下所有Ii节点</button>
<button id = "btn05">返回#city的所有子节点</button>
<button id = "btn06">返回#phone的第一个子节点</button>
<button id = "btn07">返回#bj的父节点</button>
<button id = "btn08">返回# android的前一个兄弟节点</button>
<button id = "btn09">返回#username的value属性值</button>
<button id = "btn010">设置#username的value属性值</button>
<button id = "btn011">返回#bj的文本值</button>
</span>
</div>
</body>
</html>css代码
#zuo {
width: 400px;
height: 400px;
margin-left: 300px;
float:left;
}
.on {
width: 400px;
height: 300px;
}
.on p {
width: 400px;
line-height: 15px;
background-color: #fff;
padding-left: 10px;
}
.on ul{
padding-top: 3px;
width: 400px;
height: 50px;
}
.on li{
height: 25px;
list-style-type: none;
display: block;
background-color: rgb(124, 228, 129);
border: 1px solid #000;
margin-left: 5px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
.down {
width: 400px;
height: 80px;
margin-top: 10px;
}
.down label {
margin-top: 10px;
height: 8px;
display: block;
padding-left: 20px;
}
.on,.down {
border: 1px solid #000;
float:left;
}
#you {
width: 400px;
height: 390px;
float: left;
}
#you button {
float:left;
margin-top: 10px;
height:25px;
width: 300px;
border-radius: 5px;
}图片切换练习
<!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>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 400px;
margin:50px auto;
background-color: #ccc;
padding:10px;
text-align: center;
}
img {
width: 400px;
}
.img {
width: 400px;
height: 300px;
overflow: hidden;
}
</style>
<script>
window.onload = function(){
/*
点击按钮切换图片
*/
//分别获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
/*
要切换图片，就是要修改img标签的src属性
*/
//修改img标签的属性，首先就是要获取img标签
var img = document.getElementsByTagName("img")[0];//返回的是一个数组，即使只有一个元素返回的也是数组
// alert(img);
//创建一个数组，用来保存图片的路径
var imgArr = ["./05_img/1.jpg","./05_img/2.jpg","./05_img/3.jpg","./05_img/4.jpg","./05_img/5.jpg","./05_img/6.jpg","./05_img/7.jpg","./05_img/8.jpg"];
//创建一个变量，用来存储当前正在显示的图片的索引
var index = 0;
//获取id为info 的P元素
var info = document.getElementById("info");
//设置提示文字
info.innerHTML = "一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
prev.onclick = function(){
// alert("上一张");
index--;
//判断index是否小于0
//如果小于0，则让其等于0
if(index<0){
// index = 0;
//循环图片
index = imgArr.length-1;
}
img.src = imgArr[index];
//当点击按钮以后，重新设置题是文字信息
info.innerHTML = "一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
}
next.onclick = function(){
// alert("下一张");
//切换图片就是修改img的src属性
//要修改一个元素的属性 元素.属性 = 属性值
// img.src = "./05_img/2.jpg";
index++;
//判断index有没有超过数组长度
if(index>imgArr.length-1){
// index = imgArr.length-1;
//循环图片
index = 0;
}
img.src = imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
}
}
</script>
</head>
<body>
<div id="outer">
<p id = "info"></p>
<div class ="img"><img src="./05_img/1.jpg" alt="文轩伞"></div>
<button id = "prev">上一张</button>
<button id = "next">下一张</button>
</div>
</body>
</html>全选练习
<!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>
window.onload = function(){
//获取四个多选框items
var items = document.getElementsByName("items");
//获取全选/全不选 的多选框
var checkedAllBox = document.getElementById("checkedAllBox");
/*
-1- 全选按钮
*/
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
//遍历items
for(var i = 0;i<items.length;i++){
//设置四个多溴铵狂编程选中状态
//通过多选框的checked属性可以来获取或者设置多选框的选中状态
items[i].checked = true;
}
//将全选全不选按钮设置为选中
checkedAllBox.checked = true;
}
/*
-2- 全不选按钮
*/
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
//获取四个多选框items
//遍历items
for(var i = 0;i<items.length;i++){
//设置四个多溴铵狂编程选中状态
//通过多选框的checked属性可以来获取或者设置多选框的选中状态
items[i].checked = false;
}
//将全选/全不选按钮设置为不选中
checkedAllBox.checked = false;
}
/*
-3- 反选按钮
*/
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
//将checkeeAllBox中设置为选中该状态
checkedAllBox.checked = true;
//获取四个多选框items
//遍历items
for(var i = 0;i<items.length;i++){
// if(items[i].checked){
// items[i].checked = false;
// }else {
// items[i].checked = true;
// }
items[i].checked = !items[i].checked;
//再反选时也需要判断四个按钮是否全部选中
if(!items[i].checked){
//一旦进入判断，则证明不是全选状态
//将checkdeAllBox设置为没选中状态
checkedAllBox.checked = false;
}
}
}
/*
-4- 提交按钮
*/
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
for(var i = 0;i<items.length;i++){
//判断单选框是否选中
if(items[i].checked){
alert(items[i].value);
}
}
}
/*
-5- 全选/全不选 多选框
- 当它选中时，其他的也选中，当他取消是其他的也取消
在事件的响应函数中，响应函数最后是谁绑定的this就是谁的
*/
checkedAllBox.onclick = function(){
for(var i = 0;i<items.length;i++){
items[i].checked = checkedAllBox.checked;
// items[i].checked = this.checked;
}
}
/*
-6- 完善 items
*/
//为四个多选框绑定单击响应函数
for(var i = 0;i<items.length;i++){
items[i].onclick = function(){
//将checkeeAllBox中设置为选中该状态
checkedAllBox.checked = true;
for(var j = 0;j<items.length;j++){
//判断四个多选框是否全选
//只要有一个没选中，则证明不是全选状态
if(!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkdeAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，早已经得出结果，不用再继续进行循环
break;
}
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id = "checkedAllBox"/>全选/全不选
<br>
<input type="checkbox" name = "items" value = "足球">足球
<input type="checkbox" name = "items" value = "篮球">篮球
<input type="checkbox" name = "items" value = "羽毛球">羽毛球
<input type="checkbox" name = "items" value = "乒乓球">乒乓球
<br>
<input type="button" id = "checkedAllBtn" value="全 选">
<input type="button" id = "checkedNoBtn" value="全不选">
<input type="button" id = "checkedRevBtn" value="反 选">
<input type="button" id = "sendBtn" value="提 交">
</form>
</body>
</html>DOM查询的剩余方法
- 在document中有一个属性body，他保存的是body的引用
- document.body;
- document.documentElement; 保存的是html根标签
- document.all; 代表页面中所有的元素
- 根据元素的class属性值查询一组元素节点对象
- getElementByClassName(); 可以根据class属性值获取一组元素节点对象
- document.querySelector();
- 需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
- 虽然IE8中没有 getElementsByClassName( ) 但是可以使用 querySelector( ) 代替
- 查所有满足条件的元素
- document.querySelectorAll()
- 该方法和 querySelector() 用法类似，不同的是，它会将复合条件的元素封装到一个数组内，然后返回。
- 即使符合条件的元素只有一个，他也会返回数组
<!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>dom查询的剩余方法</title>
<script>
window.onload = function(){
//获取body标签
// var body = document.getElementsByTagName("body")[0];
/*
-1- 在document中有一个属性body，他保存的是body的引用
*/
var body = document.body;
// alert(body);
/*
-2- document.documentElement保存的是html根标签
*/
var html = document.documentElement;
// alert(html);
/*
-3- document.all; 代表页面中所有的元素
与document.getElementByTagName("*"); 作用一样
*/
var all = document.all;
// console.log(all);
for(var i = 0;i<all.length;i++){
// console.log(all[i]);
}
/*
-4- 根据元素的class属性值查询一组元素节点对象
getElementByClassName()可以根据class属性值获取一组元素节点对象，
但是该方法不支持IE8及以下的浏览器
*/
var box1 = document.getElementsByClassName("box1");
// console.log(box1.length);
//获取页面中所有的div
//var divs = document.getElementsByTagName("div");
//获取calss为box1中的所有的div
//.box1 div
/*
document.querySelector()
- 需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
- 虽然IE8中没有getElementsByClassName( )但是可以使用querySelector( )代替
- 使用该方法总会返回唯一的一个元素，如果满足条件的有多个，那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
alert(div);
/*
查所有满足条件的元素
document.querySelectorAll()
- 该方法和querySelector()用法类似，不同的是，它会将复合条件的元素封装到一个数组内，然后返回。
- 即使符合条件的元素只有一个，他也会返回数组
*/
var box1 = document.querySelectorAll(".box1");
console.log(box1.length);
}
</script>
</head>
<body>
<div class="box1">
<div></div>
<div></div>
</div>
<div class="box1">
<div></div>
<div></div>
</div>
<div class="box1">
<div></div>
<div></div>
</div>
<div></div>
<div></div>
</body>
</html>
DOM增删改
创建
document.createElement()
- 可以用于创建一个元素节点对象
- 它需要-一个标签名作为参数，将会根据该标签名创建元素节点对象，
- 并将创建好的对象作为返回值返回
document.createTextNode()
- 可以用来创建一个文本节点对象，
-
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
添加
appendChild( )
- 向一个父节点中添加一个新的子节点
- 用法:
- 父节点.appendChild(子节点) ;
插入
insertBefore( )
- 可以在指定的子节点前插入新的子节点
- 语法:
- 父节点.insertBefore(新节点,旧节点);
替换
replaceChild( )
- 可以使用指定的子节点替换已有的子节点
- 语法:
- 父节点.replaceChild(新节点，旧节点);
删除
removeChild( )
- 可以删除一个子节点
- 语法:
- 父节点.removeChild(子节点)
- 当不知道bj节点的父元素是谁时，可以用下面的方法来删除 bj 节点
bj.parentNode.removeChild(bj);
使用innerHTML也可以完成DOM的增删改的相关操作
- 一般我们会两种方式结合使用
- 例：
-
var li = document.createElement("li"); li.innerHTML = "广州"; //将li添加到city中 city.appendChild(li);
html代码
<!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>DOM增删改</title>
<link rel="stylesheet" href="./04-DOM.css">
<script>
window.onload = function(){
// (1) 创建一个"广州"节点，添加到#city下
myClick("btn01",function(){
//创建一个广州节点<li>广州</li>
//创建li元素节点
/*
-1-
document.createElement()
可以用于创建一个元素节点对象
它需要-一个标签名作为参数，将会根据该标签名创建元素节点对象，
并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建广州文本节点
/*
-2-
document.createTextNode()
可以用来创建一个文本节点对象，
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var gzText = document.createTextNode("广州");
//将gzText设置为li的子节点
/*
-3-
appendChild( )
向一个父节点中添加一个新的子节点
用法:父节点.appendChild(子节点) ;
*/
li.appendChild(gzText);
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
})
// (2) 将"广州"节点插入到#bj前面
myClick("btn02",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
/*
insertBefore( )
可以在指定的子节点前插入新的子节点
语法:
父节点.insertBefore(新节点,旧节点);
*/
//获取id为city的节点
var city = document.getElementById("city");
city.insertBefore(li,bj);
})
// (3) 使用"广州"节点替换#bj 节点
myClick("btn03",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
/*
replaceChild( )
可以使用指定的子节点替换已有的子节点
语法:父节点.replaceChild(新节点，旧节点);
*/
//获取id为city的节点
var city = document.getElementById("city");
city.replaceChild(li,bj);
})
// (4) 删除#bj 节点
myClick("btn04",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
/*
removeChild( )
- 可以删除一个子节点
- 语法:父节点.removeChild(子节点)
*/
//获取id为city的节点
var city = document.getElementById("city");
city.removeChild(bj);
// 当不知道bj节点的父元素是谁时，可以用下面的方法来删除bj节点
// bj.parentNode.removeChild(bj);
})
// (5) 读取#city 内的HTML 代码
myClick("btn05",function(){
//获取id为city的节点
var city = document.getElementById("city");
alert(city.innerHTML);
})
// (6) 设置#bj 内的HTML代码
myClick("btn06",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
})
// (7) 创建一个"广州"节点，添加到#city下
myClick("btn07",function(){
//向city中添加广州
//获取id为city的节点
var city = document.getElementById("city");
// city.innerHTML += "<li>昌平</li>";//这种方法工程太大
/*
使用innerHTML也可以完成DOM的增删改的相关操作
一般我们会两种方式结合使用
*/
var li = document.createElement("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 = "all">
<div id = "zuo">
<div class = "on">
<p>你喜欢哪个城市？</p>
<ul id ="city">
<li id = "bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<span id = "you">
<button id = "btn01">创建一个"广州"节点，添加到#city下</button>
<button id = "btn02">将"广州"节点插入到#bj 前面</button>
<button id = "btn03">使用"广州"节点替换#bj 节点</button>
<button id = "btn04">删除#bj 节点</button>
<button id = "btn05">读取#city 内的HTML 代码</button>
<button id = "btn06">设置#bj 内的HTML代码</button>
<button id = "btn07">创建一个"广州"节点，添加到#city下</button>
</span>
</div>
</body>
</html>css样式
#zuo {
width: 400px;
height: 400px;
margin-left: 300px;
float:left;
}
.on {
width: 400px;
height: 300px;
}
.on p {
width: 400px;
line-height: 15px;
background-color: #fff;
padding-left: 10px;
}
.on ul{
padding-top: 3px;
width: 400px;
height: 50px;
}
.on li{
height: 25px;
list-style-type: none;
display: block;
background-color: rgb(124, 228, 129);
border: 1px solid #000;
margin-left: 5px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
float:left;
}
.down {
width: 400px;
height: 80px;
margin-top: 10px;
}
.down label {
margin-top: 10px;
height: 8px;
display: block;
padding-left: 20px;
}
.on,.down {
border: 1px solid #000;
float:left;
}
#you {
width: 400px;
height: 390px;
float: left;
}
#you button {
float:left;
margin-top: 10px;
height:25px;
width: 300px;
border-radius: 5px;
}添加删除记录练习
confirm()
- 用于弹出一个带有确定和取消按钮的提示框
- 需要一个字符串作为参数，该字符串会作为提示文字显示出来
- 如果用户点击确认则会返回true,如果点击取消则会返回false
删除
html代码
<!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>
<!-- <link rel="stylesheet" href="./01.css"> -->
<style>
table {
border: 1px solid #000;
margin: auto;
border-collapse: collapse;
}
th,td {
border: 1px solid #000;
}
#formDiv{
margin: auto;
width: 400px;
height: 200px;
border: 1px solid #000;
}
#formDiv td,table{
border: none;
}
</style>
<script>
window.onload = function(){
/*
点击超链接以后，删除一个员工的信息，
*/
//获取所有的超链接
var allA = document.getElementsByTagName("a");
for(var i = 0;i<allA.length;i++){
allA[i].onclick = function(){
//点击超链接之后需要删除超链接所在的那一行
//这里我们点击哪个超链接，this就是谁
//获取当前的tr
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//取第一个td里面的文本
var name = tr.getElementsByTagName("td")[0].innerHTML;
//或者
// var name = tr.children[0].innerHTML;
//删除之前弹出界面确定是否删除
/*
confirm()用于弹出一个带有确定和取消按钮的提示框
需要一个字符串作为参数，该字符串会作为提示文字显示出来
如果用户点击确认则会返回true,如果点击取消则会返回false
*/
var flag = confirm("确定删除"+name+"吗？")
if(flag){
//删除当前tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后，超链接会跳转页面，这个是，超链接的默认行为
但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Selary</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="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="javascript:;">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">selary:</td>
<td class="inp">
<input type="text" name = "selary" id ="selary">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>添加
<!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>
<!-- <link rel="stylesheet" href="./01.css"> -->
<style>
table {
border: 1px solid #000;
margin: auto;
border-collapse: collapse;
}
th,td {
border: 1px solid #000;
}
#formDiv{
margin: auto;
width: 400px;
height: 200px;
border: 1px solid #000;
}
#formDiv td,table{
border: none;
}
</style>
<script>
/*
删除tr的响应函数
*/
function delA(){
//点击超链接之后需要删除超链接所在的那一行
//这里我们点击哪个超链接，this就是谁
//获取当前的tr
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//取第一个td里面的文本
var name = tr.getElementsByTagName("td")[0].innerHTML;
//或者
// var name = tr.children[0].innerHTML;
//删除之前弹出界面确定是否删除
/*
confirm()用于弹出一个带有确定和取消按钮的提示框
需要一个字符串作为参数，该字符串会作为提示文字显示出来
如果用户点击确认则会返回true,如果点击取消则会返回false
*/
var flag = confirm("确定删除"+name+"吗？")
if(flag){
//删除当前tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后，超链接会跳转页面，这个是，超链接的默认行为
但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
}
window.onload = function(){
/*
——删除——
点击超链接以后，删除一个员工的信息，
*/
//获取所有的超链接
// -1-
var allA = document.getElementsByTagName("a");
for(var i = 0;i<allA.length;i++){
// -2-
allA[i].onclick =delA;
}
/*
——添加——
添加员工的功能
- 点击按钮之后，将员工的信息添加到表格中
*/
//为提交按钮绑定一个单击响应函数
var sub = document.getElementById("addEmpButton");
sub.onclick = function(){
//获取用户添加的员工信息
//1-获取员工的名字
//文本框中填写的内容就是Input的value值
var name = document.getElementById("empName").value;
//2- 获取员工的eemail
var email = document.getElementById("email").value;
//3-获取员工的工资
var salary = document.getElementById("salary").value;
/*
需要将获取到的信息添加到一个tr里面
*/
//1- 创建一个tr
var tr = document.createElement("tr");
//2- 创建四个td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
//3- 创建一个a元素
var a = document.createElement("a");
//4- 创建文本节点
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var delText = document.createTextNode("Delete");
//5- 将文本添加到td中
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
//6- 向a中添加文本
a.appendChild(delText);
//6-2 给a添加href属性
a.href = "javascript:;";
//6-3 为新添加的a再绑定一次删除的单及相应函数
a.onclick =delA;
//7- 将a添加到td中
aTd.appendChild(a);
//8- 将td元素添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
//9- 获取table
var employeeTable = document.getElementById("employeeTable")
//10- 将tr添加到table中
// employeeTable.appendChild(tr);
//由于浏览器会自动给table添加一个tbody元素，而之前的tr都放在tbody中，
//所以为了避免一些隐患的发生，我们选择将创建的tr也放在tbody中
//11- 获取table中tbody元素
var tbody = employeeTable.getElementsByTagName("tbody")[0];
// alert(tbody);
// //12- 将tr添加到employeeTable下的tbody中
tbody.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Selary</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="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="javascript:;">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>添加删除练习修改
<!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>
<!-- <link rel="stylesheet" href="./01.css"> -->
<style>
table {
border: 1px solid #000;
margin: auto;
border-collapse: collapse;
}
th,td {
border: 1px solid #000;
}
#formDiv{
margin: auto;
width: 400px;
height: 200px;
border: 1px solid #000;
}
#formDiv td,table{
border: none;
}
</style>
<script>
/*
删除tr的响应函数
*/
function delA(){
//点击超链接之后需要删除超链接所在的那一行
//这里我们点击哪个超链接，this就是谁
//获取当前的tr
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//取第一个td里面的文本
var name = tr.getElementsByTagName("td")[0].innerHTML;
//或者
// var name = tr.children[0].innerHTML;
//删除之前弹出界面确定是否删除
/*
confirm()用于弹出一个带有确定和取消按钮的提示框
需要一个字符串作为参数，该字符串会作为提示文字显示出来
如果用户点击确认则会返回true,如果点击取消则会返回false
*/
var flag = confirm("确定删除"+name+"吗？")
if(flag){
//删除当前tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后，超链接会跳转页面，这个是，超链接的默认行为
但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
}
window.onload = function(){
/*
——删除——
点击超链接以后，删除一个员工的信息，
*/
//获取所有的超链接
// -1-
var allA = document.getElementsByTagName("a");
for(var i = 0;i<allA.length;i++){
// -2-
allA[i].onclick =delA;
}
/*
——添加——
添加员工的功能
- 点击按钮之后，将员工的信息添加到表格中
*/
//为提交按钮绑定一个单击响应函数
var sub = document.getElementById("addEmpButton");
sub.onclick = function(){
//获取用户添加的员工信息
//1-获取员工的名字
//文本框中填写的内容就是Input的value值
var name = document.getElementById("empName").value;
//2- 获取员工的eemail
var email = document.getElementById("email").value;
//3-获取员工的工资
var salary = document.getElementById("salary").value;
/*
需要将获取到的信息添加到一个tr里面
*/
//1- 创建一个tr
var tr = document.createElement("tr");
//2- 设置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;
//9- 获取table
var employeeTable = document.getElementById("employeeTable")
//11- 获取table中tbody元素
var tbody = employeeTable.getElementsByTagName("tbody")[0];
// //12- 将tr添加到employeeTable下的tbody中
tbody.appendChild(tr);
}
}
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Selary</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="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="javascript:;">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>a的索引问题
-
执行流程
<!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>
<!--<link rel="stylesheet" href="./01.css">-->
<style>
table {
border: 1px solid #000;
margin: auto;
border-collapse: collapse;
}
th,td {
border: 1px solid #000;
}
#formDiv{
margin: auto;
width: 400px;
height: 200px;
border: 1px solid #000;
}
#formDiv td,table{
border: none;
}
</style>
<script>
/*
删除tr的响应函数
*/
function delA(){
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//取第一个td里面的文本
var name = tr.getElementsByTagName("td")[0].innerHTML;
var flag = confirm("确定删除"+name+"吗？")
if(flag){
//删除当前tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后，超链接会跳转页面，这个是，超链接的默认行为
但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
}
window.onload = function(){
/*
——删除——
点击超链接以后，删除一个员工的信息，
*/
//获取所有的超链接
// -1-
var allA = document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for(var i = 0;i<allA.length;i++){
/*
for循环会在页面加载完成之后立即执行
而响应函数会在超链接被点击时才执行
当响应函数执行时，for循环早已执行完毕
所以一般不用allA[i]去获取元素
*/
alert("for循环正在执行"+i);
allA[i].onclick =function(){
alert("响应函数执行ing"+i);
return false;
}
}
}
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Selary</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="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="javascript:;">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>
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
