2019-10-20 原生DOM节点操作
2019-10-20 本文已影响0人
jakeliukai
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<ul>
<li>我是第1个li节点</li>
<li>我是第2个li节点</li>
<li>我是第3个li节点</li>
<li>我是第4个li节点</li>
<li>我是第5个li节点</li>
</ul>
</div>
<script>
var Oul = document.querySelector("ul")
var Ali = document.querySelectorAll("li")
var Oli = document.getElementsByTagName("li")
var getUl = Oli[2].parentNode; //和Ali一样
var getfirstChild = Oul.firstChild; // 获取第一个子节点
var getlastChild = Oul.lastChild; // 获取最后一个子节点
var getnextSibing = getfirstChild.nextSibling; // 获取相信的下一个同级节点
var getupSibing = getlastChild.previousSibling; // 获取相邻的上一个同级节点
var appendli = document.createElement("li"); // 创造一个DOM元素标签
appendli.innerText = "我是新来的li"
Oul.appendChild(appendli) // 添加子节点到最后
var insertli = document.createElement("li");
insertli.innerText = "我想插队，插入某个li的前面"
Oul.insertBefore(insertli,Oli[1]) // 插入某个子节点
var replaceli = document.createElement("li");
replaceli.innerText = "我想替换某个li"
Oul.replaceChild(replaceli,Oli[3]) //替换某个子节点
// Oul.remove() //子节点全部删除
Oul.removeChild(Oli[4]) // 删除某个子节点
</script>
</body>
</html>
