发布于 

练习案例

节点关系获取元素

演示

使用元素的一些关系属性获取元素。

准备的素材:一个有id的无序列表。通过children找出第2个li,然后据此演示使用其他一些关系以获取元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul id="list">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
<script>
var ul = document.getElementByid('list');
var li = document.getElementsByTagName('li');
var iu = li[0].parentNode;
var op = ul.children;
var ki = ul.firstElementChild;
var hi = ul.lastElementChild;
console.log(iu);
console.log(op);
console.log(ki);
console.log(hi);
</script>



根据特征信息获取元素

演示

使用get系列方法和query系列方法获取元素。

准备的素材:一个设定了id和class的div。

1
2
3
4
5
6
<div id="box1" class="msg">sha</div>
<script>
var box1 = document.getElementById('box1');
var msg = document.getElementsByClassName('.msg');
console.log('msg')
</script>

开关灯案例

案例3(介绍开关思想)

网页上有一按钮,点击按钮,使整个页面能够在“关灯/开灯”之间切换。

所谓关灯/开灯,就是让网页的整体背景为黑色和白色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<input type="button" value="开关" id="op">
<script>
var body = document.body;
var yi = true;
var op = document.querySelector('#op');
op.onclick = function () {
if (yi == true) {
body.style.backgroundColor = 'black';
op.value = '关灯';
yi = false;
} else {

body.style.backgroundColor = 'white';
op.value = '开灯';
yi = true;
}

}

</script>

添加元素案例(一)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button id="ll">点一下</button>

<ul id="po"></ul>

<script>
var bon = document.querySelector('#ll');
var ul = document.querySelector('#po');

// var bon = document.getElementsByTagName('button');
// var ul = document.getElementsByTagName('ul');这个不显示
bon.onclick = function () {
var ki = document.createElement('li');
ul.appendChild(ki);
}
</script>

添加元素案例(二)

在一个无序列表中实现如下需求:

1,点击按钮1,创建一个div放入第一个li中,

2,点击按钮2,克隆第一个li,并放到该列表的倒数第2个的位置(即最后一个的前面),,

3,点击按钮3,将最后一个li替换为一个新创建的li。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<body>
<button id="btn1">添加一个div到第1个li</button>
<button id="btn2">克隆第1个li并放入倒数第2个位置</button>
<button id="btn3">替换最后1个li</button>
<button id="btn4">删除最后一个li</button>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<script>
var btn1 = document.querySelector('#btn1');
var ul = document.querySelector('ul');
btn1.onclick = function () {
var div = document.createElement('div');
var fist = ul.children[0];
fist.appendChild(div);
}
var btn2 = document.querySelector('#btn2');
btn2.onclick = function () {
var li = ul.children[0].cloneNode(true);
var kj = ul.lastElementChild;
ul.insertBefore(li, kj)
}
var btn3 = document.querySelector('#btn3');
btn3.onclick = function () {
var li = document.createElement('li')
var kl = ul.lastElementChild;
ul.replaceChild(li, kl)
}
var btn4 = document.querySelector('#btn4')
btn4.onclick = function () {
// var yi =ul.children[3];
var li = ul.lastElementChild;
ul.removeChild(li);

}
</script>

修改原生的HTML属性案例(一)

案例1

页面上有两个按钮,一张图片。每点击一次按钮1,使图片变大20像素,每点击一次按钮2,使图片变小20像素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<button id="btn1">放大</button>
<button id="btn2">缩小</button>
<br>
<img src="gl.jpg" alt="" width="100">
<script>
var btn1 = document.querySelector('#btn1');
var img = document.querySelector('img');
var fn = img.width;
btn1.onclick = function () {
fn += 20;
img.width = fn;
}
var btn2 = document.querySelector('#btn2');
btn2.onclick = function () {
fn -= 20;
img.width = fn;

}


</script>

修改原生的HTML属性案例(二)

案例2

购买数量的增减操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<body>
<style>
div {
width: 80px;
}

input[type="text"] {
width: 50px;
height: 44px;
outline: none;
border: 1px solid #ccc;
text-align: center;
}

input[type="button"] {
height: 24px;
width: 22px;
}

input {
float: left;
}
</style>
<div>
<input type="text" id="total" value="1" readonly>
<input type="button" value="+" id="add">
<input type="button" value="-" id="reduce" disabled>
</div>
<script>
var ddf = document.querySelector('#total');
var add = document.querySelector('#add');
var naa = document.querySelector('#reduce');
add.onclick = function () {
var ui = ddf.value;
ui++;
ddf.value = ui;
naa.disabled = false;
}
naa.onclick = function () {
var ul = ddf.value;
ul--;
if (ul <= 0) {
ul = 1;
naa.disabled = true;
}
ddf.value = ul;

}
</script>

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.