HTML之JavaScript DOM操作元素（2）
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.firstChild
while(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>