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() {// 1.创建元素var newli = document.createElement("li")// <li></li>// 2.设置元素的属性和文本newli.id = "cs" //<li id = "cs"></li>newli.innerText = "长沙"//<li id = "cs">长沙</li>// 3.将元素作为子元素放入父元素中var parentE = document.getElementById("ul01")parentE.appendChild(newli)// 在父元素中追加子元素}// 目标2 特定位置追加元素function addBefore() {// 1.创建元素var newli = document.createElement("li")// <li></li>// 2.设置元素的属性和文本newli.id = "cs" //<li id = "cs"></li>newli.innerText = "长沙"//<li id = "cs">长沙</li>// 3.将元素作为子元素放入父元素中var parentE = document.getElementById("ul01")var brotherNe = document.getElementById("sz")//parentE.insertBefore(新元素,参照元素) 在特定元素之前新增元素parentE.insertBefore(newli, brotherNe)}// 目标3 替换元素function replaceSz() {// 1.创建元素var newli = document.createElement("li")// <li></li>// 2.设置元素的属性和文本newli.id = "cs" //<li id = "cs"></li>newli.innerText = "长沙"//<li id = "cs">长沙</li>// 3.元素替换var parentE = document.getElementById("ul01")var brotherNe = document.getElementById("sz")//parentE.replaceChild(新元素,被替换元素) 替换特定元素parentE.replaceChild(newli, brotherNe)}// 目标4 移除特定元素function removeSz() {// 哪个元素调用remove 就会执行删除哪个元素var brotherNe = document.getElementById("sz")brotherNe.remove(brotherNe)}// 目标5 清空列表元素function removeAll(){// 思路1 获取父元素，然后根据父元素获取父元素的第一个子元素，循环删除父元素的第一个子元素，直到为null，就相当于链表删除var dom1 = document.getElementById("ul01")var node = dom1.firstChildwhile(node!=null){node.remove()node = dom1.firstChild}// 思路2 要清空列表，就是要清空ul里面的东西，可以用标签中间夹文本的思路，直接清空ul标签中间的东西var dom2 = document.getElementById("ul01")dom2.innerHTML = "" // innerHTML 与 innerText均可}</script>
</head><body><ul id="ul01"><li id="bj">北京</li><li id="sh">上海</li><li id="sz">深圳</li><li id="gz">广州</li></ul><!-- 目标1 在城市列表的最后添加子标签 长沙 --><button id="btn01" onclick="addCs()"> 增加长沙</button><!-- 目标2 在城市列表深圳前增加子标签 长沙 --><button id="btn02" onclick="addBefore()"> 在深圳前增加长沙</button><!-- 目标3 替换目标元素 替换深圳为长沙 --><button id="btn03" onclick="replaceSz()"> 替换深圳为长沙</button><!-- 目标4 删除，删除深圳 --><button id="btn04" onclick="removeSz()"> 移除深圳</button><!-- 目标5 清空列表 --><button id="btn05" onclick="removeAll()"> 清空列表</button>
</body></html>
