JavaScript积累——DOM操作
DOM操作
三个按钮的点击变色功能及对应信息框显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap div{
display : none;
width: 200px;
height: 200px;
border: solid red 2px;
}
</style>
</head>
<body>
<div class="wrap">
<button class="active">No.1</button>
<button class="active">No.2</button>
<button class="active">No.3</button>
<div class="words">文本1</div>
<div class="words">文本2</div>
<div class="words">文本3</div>
</div>
<script>
// 获取按钮和文字框的类数组对象
var btn = document.getElementsByTagName('button');
var div = document.getElementsByClassName('words');
// 循环定义所有的按钮的“点击监听事件”
for(var i = 0; i < btn.length; i++){
// 通过立即执行函数来将循环的i转化为固定的值传入div[j]中，
// 以保持按钮与信息框的对应。再利用闭包原理将监听事件保存下来
(function (j) {
btn[j].onclick = function (){
// 此处的功能为，被点击的按钮底色变黄，其他按钮颜色清除
for(var n = 0; n < btn.length; n++){
// 1、先清除掉所有的按钮的底色
btn[n].style.backgroundColor = '';
div[n].style.display = 'none';
}
// 2、在此处添加被点击的按钮的底色
this.style.backgroundColor = 'yellow';
// 添加信息框的显示功能
div[j].style.display = 'block';
}
}(i))
}
</script>
</body>
</html>
查看键盘点击事件的编号
// 查看打印出来的e中的which 即可知道，点击此按键时的事件编号
document.onkeydown = function(e){
console.log(e);
}
如（chrome）：方向键： 左、上、右、下—— 37、38、39、40
实现键盘方向键控制div的移动
<script>
var div = document.createElement('div'); // 创建一个document的div对象
document.body.appendChild(div); // 向document.body中插入一个div
div.style.width = '100px'; // 设置div的宽高
div.style.height = '100px';
div.style.backgroundColor = 'red'; // 设置div的填充颜色
div.style.position = 'absolute'; // 设置div的浮动，以实现其自由移动
div.style.left = '0'; // 设置div的初始位置
div.style.top = '0';
// 设置网页的键盘点击监控事件
document.onkeydown = function(e){
// 当4个方向的每次点击步进相同的时候，设置一个变量来统一修改
var moveStep = 10;
// 当点击键盘左时，方块向左移动moveStep个单位
if(e.which == 37){
div.style.left = parseInt(div.style.left) - moveStep + 'px';
}else if(e.which == 38){
div.style.top = parseInt(div.style.top) - moveStep + 'px';
}else if(e.which == 39){
div.style.left = parseInt(div.style.left) + moveStep +'px';
}else if(e.which == 40){
div.style.top = parseInt(div.style.top) + moveStep + 'px';
}
}
</script>
此处将if else if 改为switch更加方便以后添加东西
<script>
var div = document.createElement('div'); // 创建一个document的div对象
document.body.appendChild(div); // 向document.body中插入一个div
div.style.width = '100px'; // 设置div的宽高
div.style.height = '100px';
div.style.backgroundColor = 'red'; // 设置div的填充颜色
div.style.position = 'absolute'; // 设置div的浮动，以实现其自由移动
div.style.left = '0'; // 设置div的初始位置
div.style.top = '0';
// 设置网页的键盘点击监控事件
document.onkeydown = function(e){
// 当4个方向的每次点击步进相同的时候，设置一个变量来统一修改
var moveStep = 10;
// 当点击键盘左时，方块向左移动moveStep个单位
switch(e.which){
case 37:
div.style.left = parseInt(div.style.left) - moveStep + 'px';
break;
case 38:
div.style.top = parseInt(div.style.top) - moveStep + 'px';
break;
case 39:
div.style.left = parseInt(div.style.left) + moveStep +'px';
break;
case 40:
div.style.top = parseInt(div.style.top) + moveStep + 'px';
break;
}
}
</script>
实现某标签内部子标签由现在顺序改变为逆序排列
<body>
<div>
<a>this is a
<ul>
<li 1=""></li>
<li 2=""></li>
<li 3=""></li>
<li 4=""></li>
<li 5=""></li>
</ul>
</a>
<em>this is em</em>
<b>this is b</b>
<strong>this is strong</strong>
<address>this is address</address>
</div>
<script>
// 将上面的div逆序
function tagReverse(tag) {
var childNodes = tag.children;
var n = tag.children.length;
while(n){
// 倒序选出每一个元素子节点，再将其用parentNode.appendChild()方法插入到父节点的末尾处
tag.appendChild(childNodes[n-1])
n -= 1;
}
return tag;
}
var div = document.getElementsByTagName('div')[0];
var res = tagReverse(div);
console.log(res);
</script>
</body>
实现 parentNode.insertAfter(a, b)，在b之后插入a
// 实现 parentNode.insertBefore(a,b) 的类似函数 .inserAfter(a,b)
Element.prototype.inserAfter = function (a,b) {
var beforeNode = afterNode.nextElementSibling;
if(beforeNode == null){
this.appendChild(a);
}else{
this.insertBefore(targetNode, beforeNode);
}
}
实现页面自动滚动
<div style="width: 100px;
height:100px;
background-color: orange;
color: #fff;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 100px;
position: fixed;
bottom: 200px;
right: 50px;
border-radius: 50%;
opacity: 0.5;">start</div>
<div style="width: 100px;
height:100px;
background-color: green;
color: #fff;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 100px;
position: fixed;
bottom: 50px;
right: 50px;
border-radius: 50%;
opacity: 0.5;">stop</div>
<!-- 自动滚动的小说阅读器 -->
<script>
// 开启按钮
var start = document.getElementsByTagName('div')[0];
// 结束按钮
var stop = document.getElementsByTagName('div')[1];
// 给timer一个初始值，以免一开始就点击结束时候抛出异常
var timer = 0;
// 加锁式的编程思维，以免多次点击开始时候 滚动速度越来越快
var key = true;
// 添加对“开始”按钮的点击事件
start.onclick = function () {
// 判断key是否为true，避免多次点击触发加速且无法停止
if(key){
timer = setInterval(function (){
window.scrollBy(0, 10);// 若要修改滚动速度，可以修改此处的x,y
},100);// 此处的100仅在第一次使用setInterval的时候有效，之后再更改是无效的，以第一次为准
key = false;
}
}
// 添加对“停止”按钮的点击事件
stop.onclick = function(){
clearInterval(timer);
// 点击停止之后将锁打开，允许再次点击开始
key = true;
}
</script>
浙公网安备 33010602011771号