初识JavaScript04

JavaScript
本文总阅读量:
  1. 1. window对象的属性
  2. 2. 事件冒泡
  3. 3. 动态添加元素
    1. 3.0.1. 动态设置style

window对象的属性

  • document.write()会覆盖原有的全部内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <body>
        你是谁<input type="button" id="btn" value="click" />
    </body>
    </html>
    <script>
        document.getElementById("btn").onclick = function () {
            document.write('<font size="7">luox78</font>');
        }
    </script>

  • document.getElementById(),getElementsByName(),`getElementsByTagName,

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
        <input type="text" name="txt" />
        <input type="text" name="txt" />
        <input type="text" name="txt"/>
    </body>
    <script>
        var inputs = document.getElementsByName("txt");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = "luox78";
        }
    </script>

    注意循环中使用this,javascript执行上下文

    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
    > 	<input type="button" name="btn" value="???????????" />
    >     <input type="button" name="btn" value="???????????" />
    >     <input type="button" name="btn" value="???????????" />
    >     <input type="button" name="btn" value="???????????" />
    >     <input type="button" name="btn" value="???????????" />
    >     <input type="button" name="btn" value="???????????" />
    >     <input type="button" name="btn" value="???????????" />
    > <script>
    >     //点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”
    >     var inputs = document.getElementsByName('btn');
    >     for (var i = 0; i < inputs.length; i++) {
    >         if (inputs[i].type == 'button') {
    >             inputs[i].onclick = function() {
    >                 for (var j = 0; j < inputs.length; j++) {
    >                     if (inputs[j].type == 'button') {
    >                         inputs[j].value = "哈哈";
    >                     }
    >                 }
    >                 this.value = "呜呜";
    >                 //inputs[i].value = "呜呜";  这样写不能达到预期的效果
    >             };
    >         }
    >     }
    > </script>
    >

事件冒泡

演示

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
<body>
    <div id="div1" style="height: 200px; background-color: aquamarine">
        <div id="div2" style="background-color: black; width: 600px;height: 200px;">
            <div id="div3" style="background-color: blue; height: 200px;width: 300px"></div>
        </div>
    </div>
</body>
</html>
<script>
    document.getElementById("div1").onclick= function() {
        console.log(this.id);
    }
    document.getElementById("div2").onclick = function () {
        console.log(this.id);
    }
    document.getElementById("div3").onclick = function () {
        console.log(this.id);
    }
</script>

结果（分别点击div1，div2，div3）：
 div1
 
 div2
 div1
 
 div3
 div2
 div1

将div3中console.log(this.id)改成console.log(window.event.srcElement.id)，效果一致，但window.event.srcElement.id为事件源

如何取消事件冒泡呢？使用window.event.cancelBubble=true，在div3 onclick中加入window.event.cancelBubble=true，console中只输出了div3

动态添加元素

演示点击按钮添加td

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <input id="txt" type="text" />
    <input id="btn2" type="button" value="add remark" />
    <br />
    <table>
        <thead>
        <th>评论</th>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
</body>
<script>
   document.getElementById("btn2").onclick = function () {
        var txt = document.getElementById("txt").value;
        var tbody = document.getElementById("tbody");
        if (txt != null && txt.length != 0) {
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            tr.appendChild(td);
            td.textContent = txt;
            tbody.appendChild(tr);
        }
    }
</script>

document.XXX方法：

createElement('element');创建一个节点

appendChild(node); 追加一个节点

removeChild(node);移除一个节点

replaceChild(new,old);替换一个节点

insertBefore(new,参照);把节点加到前面（插到某个节点前面）

属性：

firstChild

lastChild

动态设置style

document.getElementById("XXX").style或document.getElementById("XXX")下

jsfoundation
prev： next：