发表于： 2020-04-15 09:29:12
1 1596
一、今天完成的事情
/*
* 获取body标签
* 在document中有一个属性叫做body，他保存的是body的引用
* */
// var body = document.getElementsByTagName("body")[0];
var body = document.body;
//获取html,document.documentElement;保存的是html标签
var html = document.documentElement;
//document.all 代表的是页面中所有的元素
var all = document.all;
//根据元素的属性值，查询一组元素节点对象
//getElementsByClassName("box");可以根据class属性值获取一组元素节点多像，但是该方法不支持IE8及以下的浏览器
var box = document.getElementsByClassName("box");
//获取页面中所有的div
var div = document.getElementsByTagName("div");
//获取class为box中的所有div
//.box div 选择器
/*
* document.querySelector()
* - 需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
* - 虽然IE8中没有getElementByClassName但是可以使用querySelector（）代替
* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么只会返回第一个
* */
var div1 = document.querySelector(".box div");
var box1 = document.querySelector(".box");
/*
* document.querySelectorAll("box2");
* - 该方法document.querySelectorAll() 和 document.querySelector()用法类似，不同的是，它会将符合条件的元素封装到一个数组中返回
* - 即使符合条件的元素只有一个，他也会返回类数组
* */
var box2 = document.querySelectorAll("box2");
练习一
<script>
/*
* for循环在页面加载完成之后执行
* 而响应函数会在超链接被点击时才执行
* 当响应函数执行时，for循环已经执行完毕
* */
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;
//获取要删除的员工的名字,方法一
// var name = tr.getElementsByTagName("td")[0].innerHTML;
//获取要删除员工的名字；方法二
var name =tr.children[0].innerHTML;
//删除之前弹出一个提示框
/*
* confirm（）用于弹出一个带有确认和取消按钮的提示框
* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
* 如果用户点击确认则返回true，如果点击取消则返回false
* */
var flag = confirm("确定要删除"+name+"吗?");
if (flag){
tr.parentNode.removeChild(tr);//删除tr
}
//删除tr
/*
* 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为
* 但是我们不希望出现默认行为，可以通过响应函数的最后return false来取消默认行为
* */
return false;
}
}
/*
* 添加员工的功能
* */
//为提交按钮绑定一个单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function () {
// alert("hello");
//获取用户填写的信息
//获取员工的名字
var name = document.getElementById("empName").value;
//获取员工的email和salary
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
var tr = document.createElement("tr");
//获取table
var employeeTable =document.getElementById("employeeTable");
//获取 employeeTable中的tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
//将tr添加到tbody中
tbody.appendChild(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");
a.onclick =delA;
// alert(name+email+salary);
/*
* <tr>
<td>Tom</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
*
* 需要
* */
}
}
</script>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</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>
练习二
<script>
window.onload = function () {
//创建一个“广州节点”，添加到#city下
myClick("btn01",function () {
//创建广州节点<li>广州<li/>
//创建li元素节点 document.createElement("li");
//用于创建一个元素节点对象，他需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
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);
var bj = document.getElementById("bj");
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);
var bj = document.getElementById("bj");
var city = document.getElementById("city");
/*
* replaceChild(li,bj)
* - 可以使用指定的子节点替换已有的子节点
* - 语法：父节点.replaceChild(新节点,旧节点)
* */
city.replaceChild(li,bj);
});
//删除#bj节点
myClick("btn04",function () {
var bj = document.getElementById("bj");
// var city = document.getElementById("city");
/*
* city.removeChild(bj);
* - 可以删除子节点
* - 语法：父节点.removeChild(bj);
* */
// city.removeChild(bj);
//语法：子节点.parentNode.removeChild(子节点);
bj.parentNode.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 ="昌平";
});
//添加广州
myClick("btn07",function () {
var city = document.getElementById("city");
// city.innerHTML += "<li>广州<li/>";
/*
* 使用innerHTML 也可以完成DOM的增删改的相关操作
* 一般我们会两种方式结合使用,
* 比上面的要简单
* */
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内的代码</button></div>
<div><button id="btn06">设置#bj内的代码</button></div>
<div><button id="btn07">添加广州</button></div>
</div>
</body>
js修改元素的内联样式
<style type="text/css">
#box1 {
width:100px;
height: 200px;
background-color: red;
}
</style>
<script>
/*
* 使用DOM操作css
* */
window.onload = function () {
/*
* 点击按钮以后 修改box1的大小
* */
//获取box1
var box1 = document.getElementById("box1");
//为按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
//修改box1的颜色
/*
* 通过JS 修改元素的样式
* 语法：
* 元素.style.样式名 = 样式值
*
* 注意，如果css样式名中含有 -
* 这种名称在JS中是不合法的，比如background-color
* 需要将这种样式名修改为驼峰命名法
* 去掉 - ，然后将 - 后的字母大写
*
* 我们通过style属性设置的样式都是内联样式
* 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
*
* 但是如果在样式中写了！important ，则此时样式会有最高的优先级，
* 即使通过JS也不能覆盖该样式，此时会导致JS修改样式失效
* 所以尽量不要为样式添加!important
*
* 通过style属性设置和读取的都是内联样式
* 无法读取样式表中的样式
* */
box1.style.backgroundColor = "green";//修改为绿色
};
//点击按钮2以后，读取该元素的样式
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
//读取box1的样式
var box1 = document.getElementById("box1");
/*
* 语法：元素.style.样式名
* */
alert(box1.style.height);
}
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<button id="btn02">点我一下222</button>
<div id="box1"></div>
</body>
<style>
#box1{
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
<script>
window.onload = function () {
//点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// alert(box1.style.width);
/*
* 获取元素当前显示的样式
* 语法：元素.currentStyle.样式名
* 它可以用来读取当前元素正在显示的样式
* 如果当前元素没有设置该样式，则获取它的默认值
* 这个方法只有IE支持，别的浏览器都不支持
* */
/*
* 在其他浏览器中，我们可以使用
* getComputedStyle（）这个方法来获取元素当前的样式
* 这个方法是window的方法，可以直接使用
* 需要两个参数
* 第一个，要获取样式的元素
* 第二个，可以传递一个伪元素，一般都传null
*
* 该方法会返回一个对象，对象中封装了当前元素对应的样式
* 可以通过 对象.（点）样式名 来读取样式
* 如果获取的样式没有设置，则会获取到真实的值，而不是默认值
* 比如，没有设置width，他不会获取到auto，而是一个具体的长度
*
* 但是该方法不支持IE8及以下的浏览器
*
*
* 通过currentStyle和getComputedStyle()读取的样式都是只读的
* 不能修改，如果要修改必须通过style属性
* */
//正常浏览器的方式
alert(getComputedStyle(box1,null).backgroundColor);
//IE8及以下浏览器的方式
// alert(box1.currentStyle.backgroundColor);
};
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj = 要获取样式的元素
* name 要获取的样式名
* */
function getStyle(obj,name) {
//正常浏览器的方式
return getComputedStyle(obj,null)[name];
//IE的方式
// return obj.currencyStyle[name];
// alert(getStyle(box1,"width"));
}
};
/*
* 其他样式相关的属性
* clientWidth
* clientHeight
* - 这两个属性可以获取元素的可见宽度和高度
* - 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
* - 会获取元素宽度和高度，包括内容区和内边距
* - 这些属性都是只读的，不能进行修改
* offsetWidth
* offsetHeight
* - 获取元素的整个的宽度和高度，包括内容区，内边距和边框
* - 也是只读的，不能修改
* offsetParent
* - 可以用来获取当前元素的定位父元素
* - 会获取到离当前元素最近的开启了定位的祖先元素
* 如果所有的祖先元素都没有开启定位，则返回body
* offsetLeft
* - 当前元素相对于其定位元素的水平偏移量
* offsetTop
* - 当前元素相对于其定位元素的垂直偏移量
* scrollWidth
* scrollHeight
* - 可以获取元素整个滚动区域的宽度和高度
* scrollLeft
* - 可以获取水平滚动条滚动的距离
* scrollTop
* - 可以获取垂直滚动条滚动的距离
* onscroll
* - 该事件会在元素的滚动条滚动时触发
*
* */
//当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了
//当满足scrollWidth - scrollLeft == clientWidth，说明水平滚动条滚动到底了
</script>
</head>
<br>
<button id="btn01">点我</button>
<br/><br/>
<div id="box1"></div>
</body>
<style>
#areaDiv{
width: 500px;
height: 100px;
border: 1px solid red;
}
#showMsg{
width: 500px;
height: 50px;
border: 1px solid red;
}
</style>
<script>
window.onload = function () {
/*
* 当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
* */
//获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/*
* onmousemove
* - 该事件将会在鼠标在元素中移动时被触发
*
* 事件对象
* - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
* 在事件对象中封装了当前事件相关的一切信息，
* 比如，鼠标的坐标，键盘的哪个按键被按下，鼠标滚轮滚动的方向
*
* */
areaDiv.onmousemove = function () {
/*
* 在IE8 中，响应函数被触发时，浏览器不会传递事件对象
* 在IE8 及以下的浏览器中，是将事件对象作为window对象的属性保存的
* */
/*
* clientX可以获取鼠标指针的水平坐标
* clientY可以获取鼠标指针的垂直夺标
* */
//在showMsg中显示鼠标的坐标
var x = window.event.clientX;
var y = window.event.clientY;
showMsg.innerHTML = "x = "+x+"y=" +y;
}
}
</script>
</head>
<body>
<div id="areaDiv"></div>
<br><br>
<div id="showMsg"></div>
</body>
二、明天要做的事情
继续学习
三、遇到的困难
无
四、收获
学习了新知识
返回列表
评论