从零开始学 Web 之 DOM(五)元素的创建

旧巷老猫 提交于 2020-03-25 19:45:38

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......
+------------------------------------------------------------
github:https://github.com/Daotin/Web
微信公众号:Web前端之巅
博客园:http://www.cnblogs.com/lvonve/
CSDN:https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、元素的创建

1、元素创建的三种方式

1.1、方式一

document.write("标签代码及内容");

示例:

<body>
    <input type="button" value="按钮" id="btn">
    
    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function() {
        	document.write("<p>这是一个p标签</p>");
        };
        // document.write("<p>这是一个p标签</p>");
    </script>
</body>

缺陷:如果是在页面加载完毕后,通过这种方式创建元素的话,页面上的除此创建元素之外的所有内容都会被清除。但是在页面加载的时候不会。

1.2、方式二

标签.innerHTML = "标签代码及内容";

示例:

<body>
  <script>
	<input type="button" value="按钮" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function() {
        	my$("dv").innerHTML = "lvonve";
        };
  </script>
</body>

使用 innerHTML,在页面加载完毕后,不会清除页面的内容。

案例:动态创建列表

// 方式一
<body>
    <input type="button" value="创建列表" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function() {
        	my$("dv").innerHTML = "<ul><li>列表一</li><li>列表二</li><li>列表三</li></ul>";
        };
    </script>
</body>

方式一的方式太过死板,li 标签的个数和内容都是固定的,如果增加 li 的个数需要修改源码。

// 方式二
<body>
    <input type="button" value="创建列表" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
    	var value = ["列表一", "列表二", "列表三", "列表四", "列表五"];
        my$("btn").onclick = function() {
            var str = "<ul style='list-style: none;cursor: pointer;'>"
            for(var i=0; i<value.length; i++) {
                str += "<li>"+value[i]+"</li>";
            }
            str += "</ul>";
        	my$("dv").innerHTML = str;
        };
    </script>
</body>

1.3、方式三

第一步:创建元素,返回值为一个对象元素

document.creatElement("标签的名字");

第二步:将元素追加到父元素中

父元素.appendChild(创建的对象);

示例:

<body>
    <input type="button" value="创建列表" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        my$("btn").onclick = function() {
            var pObj = document.createElement("p");
            setInnerText(pObj, "这是个p标签"); // 自己封装在 common.js 的方法
            my$("dv").appendChild(pObj);
        };
    </script>
</body>

案例:动态创建列表

<body>
    <input type="button" value="创建列表" id="btn">
    <div id="dv"></div>

    <script src="common.js"></script>
    <script>
    	var values = ["列表1","列表2","列表3","列表4","列表5","列表6"];
        my$("btn").onclick = function() {
            var ulObj = document.createElement("ul");
            my$("dv").appendChild(ulObj);

            for(var i=0; i<values.length; i++) {
                var liObj = document.createElement("li");
                liObj.innerHTML = values[i];
                ulObj.appendChild(liObj);
              
                // 鼠标进入事件
                liObj.onmouseover = onmouseoverHandle;
                // 鼠标离开事件
                liObj.onmouseout = onmouseoutHandle;
            }
            function onmouseoverHandle() {
                this.style.backgroundColor = "yellow";
            }
            function onmouseoutHandle() {
                this.style.backgroundColor = "";
            }
        };
    </script>
</body>

当在循环中添加事件的时候,建议不使用匿名函数,因为每个匿名函数都会占用一片内存空间,而使用函数调用的方式,不管循环多少次,都使用一份代码。

案例:动态创建表格

<body>
    <input type="button" value="创建列表" id="btn">
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
        var arr = [
            {name:"百度", href:"www.baidu.com"},
            {name:"谷歌", href:"www.baidu.com"},
            {name:"优酷", href:"www.baidu.com"},
            {name:"土豆", href:"www.baidu.com"},
            {name:"腾讯", href:"www.baidu.com"}
        ];

    	my$("btn").onclick = function() {
            // 创建table标签,并添加到div中
            var tableObj = document.createElement("table");
            tableObj.border = "1";
            tableObj.cellSpacing = "0";
            tableObj.cellPadding = "0";
            my$("dv").appendChild(tableObj);

            // 创建tr标签,添加到table中
            for(var i=0; i<arr.length; i++) {
                var trObj = document.createElement("tr");
                tableObj.appendChild(trObj);
                // 添加第一列
                var tdObj1 = document.createElement("td");
                tdObj1.innerHTML = arr[i].name;
                trObj.appendChild(tdObj1);
                // 添加第二列
                var tdObj2 = document.createElement("td");
                tdObj2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>";
                trObj.appendChild(tdObj2);
            }
        };
    </script>
</body>

tableObj.border = "1"; 不能使用 tableObj.style.border = "1px solid red"; 这样的话,只有table有边框,而 tr 没边框。所以 js 中,table 标签有自带的 border 属性可以设置边框,注意不需要 px。

2、其他操作元素的方法

<body>
    <input type="button" value="添加一个按钮1" id="btn1">
    <input type="button" value="添加一个按钮2" id="btn2">
    <input type="button" value="删除第一个按钮" id="btn3">
    <input type="button" value="删除所有按钮" id="btn4">
    <div id="dv"></div>

    <script src="common.js"></script>
    <script>
        var count = 0;
        // 往后追加按钮
    	my$("btn1").onclick = function() {
            count++;
            var btn = document.createElement("input");
            btn.type = "button";
            btn.value = "按钮" + count;
            my$("dv").appendChild(btn);
        };
        // 往前追加按钮
        my$("btn2").onclick = function() {
            count++;
            var btn = document.createElement("input");
            btn.type = "button";
            btn.value = "按钮" + count;
            my$("dv").insertBefore(btn, my$("dv").firstElementChild);
        };
      	// 从第一个按钮开始删除一个按钮
        my$("btn3").onclick = function() {
            my$("dv").removeChild(my$("dv").firstElementChild);
        };
      	// 删除所有按钮
        my$("btn4").onclick = function() {
            while(my$("dv").firstElementChild) {
                my$("dv").removeChild(my$("dv").firstElementChild);
            }
        };
    </script>
</body>

appendChild:追加
insertBefore: 在某个元素前添加
removeChild:删除元素

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!