发布于 

练习案例

节点关系获取元素

演示：

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

准备的素材：一个有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>
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧

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