HTML之JavaScript DOM操作元素（2）

最新推荐文章于 2025-12-08 09:18:56 发布

原创

最新推荐文章于 2025-12-08 09:18:56 发布 · 997 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

HTML之JavaScript DOM操作元素（2）

   4.增删元素
       var element = document.createElement("元素名") 创建新元素
       父元素.appendChild(子元素)             	  	 在父元素中追加子元素
       父元素.insertBefore(新元素,参照元素)    		 在特定元素之前新增元素
       父元素.replaceChild(新元素,被替换元素)          替换特定元素
       元素.remove()                                  删除当前元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小标题</title>
    <script>
        /*
        步骤：
            1.获得document DOM树
                window.document(是window的属性)
            2.从document中获取要操作的元素
                1.直接获取
                    var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
                    var bbb = document.getElementsByTagName("input")
                    var ccc = document.getElementsByName("aaa")
                    var ddd = document.getElementsByClassName("a") 
                2.间接获取
                    var cs = div01.children // 获取全部子元素
                    var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
                    var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
                    var parentE = mmm.parentElement // 通过子元素获取父元素
                    var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
                    var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素

            3.对元素进行操作
                1.操作元素的属性   元素名.属性名 = ""
                2.操作元素的样式   元素.style.样式名 = ""  样式名 "-" 要进行驼峰转换
                3.操作元素的文本   元素名.innerText   只识别文本
                                  元素名.innerHTML   识别文本的同时可以识别HTML代码
                4.增删元素
                    var element = document.createElement("元素名")// <li></li>
                    父元素.appendChild(子元素)             在父元素中追加子元素
                    父元素.insertBefore(新元素,参照元素)    在特定元素之前新增元素
                    父元素.replaceChild(新元素,被替换元素)  替换特定元素
                    元素.remove()                          删除当前元素
        */
        // 目标1 追加元素
        function addCs(