《前端》JavaScript二轮基础复习（二）js控制DOM

1、动态创建网页新文本段落

创建元素：createElement

追加元素：appendChild()、append()；

插入元素：insertBefore()

<div id="id-div1" class="css-p"></div>
	<br>
	<div id="id-div2" class="css-p">
		<p>已经存在的文本段落.</p>
	</div>
	<br>
	<div id="id-div3" class="css-p">
		<p>第一段文本段落.</p>
		<p>第三段文本段落.</p>
	</div>
	<br>
	<input type="button" id="id-createEle-p-new" onclick="on_createEle_p_new();" value="动态创建文本段落" />
	<input type="button" id="id-createEle-p-append" onclick="on_createEle_p_append();" value="动态追加文本段落" />
	<input type="button" id="id-createEle-p-insert" onclick="on_createEle_p_insert();" value="动态插入文本段落" />
</body>
<script type="text/javascript">
    /**
	 * create p
     */
	function on_createEle_p_new() {
        var id_div1 = document.getElementById("id-div1");
        var p1 = document.createElement("p");//创建<p>元素
        p1.innerText = "动态创建的文本段落.";
        id_div1.appendChild(p1);
    }
    /**
     * create p append after p
     */
    function on_createEle_p_append() {
        var id_div2 = document.getElementById("id-div2");
        var p2_2 = document.createElement("p");
        p2_2.innerText = "动态追加(appendChild)的文本段落.";
        id_div2.appendChild(p2_2);
    }/**
     * create p insert into p & p
     */
    function on_createEle_p_insert() {
        var id_div3 = document.getElementById("id-div3");
        var child_p = id_div3.children;
        var p3_1 = child_p[0];
        var p3_3 = child_p[1];
        var p3_2 = document.createElement("p");
        p3_2.innerText = "动态插入(insertAfter)的文本段落.";
        id_div3.insertBefore(p3_2, p3_3);
    }
</script>

2、动态删除

remove()、removeChild()

3、动态替换

innerHTML、innerText

4、主动触发按钮单击事件

document.getElementById("id-btn-name").click();

5、动态修改元素属性值

<p>Modify Attributes:&nbsp;&nbsp;
    <input type="text" class="css" name="name" id="id-name" value="King"/>
</p>
<input type="button" id="id-get-attr" onclick="on_get_attr();" value="获取标签的全部属性"/>
<input type="button" id="id-modify-attr" onclick="on_modify_attr();" value="修改标签的全部属性"/>
</body>
<script type="text/javascript">
    /**
     * Func - get attributes
     */
    function on_get_attr() {
        var input = document.getElementsByTagName("input");
        var attrs = input[0].attributes;
        console.log("print input's all attributes --- ");
        for (var i = 0; i < attrs.length; i++) {
            console.log("attr name : " + attrs[i].name + ", value : " + attrs[i].value);
        }
    }
    /**
     * Func - modify attributes
     */
    function on_modify_attr() {
        var input = document.getElementsByTagName("input");
        var attrs = input[0].attributes;
        console.log("modify input's all attributes --- ");
        var new_attrs = ["password", "newCSS", "pwd", "id-pwd", "123456"];
        for (var i = 0; i < attrs.length; i++) {
            attrs[i].value = new_attrs[i];
        }
        for (var j = 0; j < attrs.length; j++) {
            console.log("attr name : " + attrs[j].name + ", value : " + attrs[j].value);
        }
    }
</script>

6、实现电话拨号键盘

<div class="css-div-button">
    <button>1</button>
    <button>2</button>
    <button>3</button><br>
    <button>4</button>
    <button>5</button>
    <button>6</button><br>
    <button>7</button>
    <button>8</button>
    <button>9</button><br>
    <button>*</button>
    <button>0</button>
    <button>#</button><br>
    <!-- 文本框（只读）用于显示电话号码 -->
    <input type="text" id="id-input-tel" readonly />
</div>
</body>
<script type="text/javascript">
    window.onload = function () {
        // 定义了键盘的数字和字母
        var arrTel = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "*", "0", "#"];
        // 获取了button所有集合
        var arrBtn = document.getElementsByTagName('button');
        var tel = document.getElementById("id-input-tel");
        for (var i = 0; i < arrBtn.length; i++) {
            arrBtn[i].index = i;//给button对象的index属性定义索引值
            arrBtn[i].onclick = function () {
                // 文本框中添加上键盘的数字和字母
                tel.value += arrTel[this.index];
            };
        }
    };
</script>