DOM
一、JS中标签关系
<div class="sup"> ???<div class="sub1"></div> ???<div class="sub2"></div> ???<div class="sub3"></div></div><script> ???var sub2 = document.querySelector(‘.sub2‘); ???// 父级标签 ???console.log(sub2.parentElement); ???// 上一个标签 ???console.log(sub2.previousElementSibling); ???// 下一个标签 ???console.log(sub2.nextElementSibling); ???var sup = document.querySelector(‘.sup‘); ???// 所有子标签 ???console.log(sup.children); ???// 第一个子标签 ???console.log(sup.firstElementChild); ???// 最后一个子标签 ???console.log(sup.lastElementChild);</script>二、JS操作页面标签
// 创建一个div标签var div = document.createElement("div");// 添加到body末尾，返回自身div = body.appendChild(div);// 插入到body中box标签前，返回自身div = body.insertBefore(div, box);// 替换掉body中box标签，返回boxbox = body.replaceChild(div, box);// 在body中移除div，返回自身div = body.removeChild(div);三、JS操作DOM一般步骤
1、创建标签
2、设置标签样式文本
3、添加到页面指定位置
JS标签关系代码栗子
<!DOCTYPE html><html lang="zh"><head> ???<meta charset="UTF-8"> ???<title>DOM树结构关系</title></head><body> ???<div class="sup"> ???????<div class="sub1"></div> ???????<div class="sub2"></div> ???????<div class="sub3"></div> ???</div></body><script type="text/javascript"> ???var body = document.querySelector(‘body‘); ???console.log(body);</script><script> ???var sub2 = document.querySelector(‘.sub2‘); ???// 父级标签 ???console.log("sub2父标签:", sub2.parentElement); ???// 上一个标签 ???console.log("sub2上兄弟标签:", sub2.previousElementSibling); ???// 下一个标签 ???console.log("sub2下兄弟标签:", sub2.nextElementSibling); ???var sup = document.querySelector(‘.sup‘); ???// 所有子标签 ???console.log("sup子标签们:", sup.children); ???// 第一个子标签 ???console.log("sup第一个子标签:", sup.firstElementChild); ???// 最后一个子标签 ???console.log("sup最后一个子标签:", sup.lastElementChild);</script></html>DOM操作
<!DOCTYPE html><html lang="zh"><head> ???<meta charset="UTF-8"> ???<title>DOM操作</title> ???<style type="text/css"> ???????.box { ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????} ???????.p { ???????????width: 100px; ???????????height: 100px; ???????????background-color: orange; ???????} ???</style></head><body> ???<div class="box">box box box bi box</div> ???<button class="b1">添加到box中</button> ???<button class="b2">添加到body中</button> ???<button class="b3">插到body下box之前</button> ???<button class="b4">将body下box替换为p</button> ???<button class="b5">删除box</button></body><script type="text/javascript"> ???var body = document.querySelector(‘body‘); ???var box = document.querySelector(‘.box‘); ???var b1 = document.querySelector(‘.b1‘); ???var b2 = document.querySelector(‘.b2‘); ???var b3 = document.querySelector(‘.b3‘); ???var b4 = document.querySelector(‘.b4‘); ???var b5 = document.querySelector(‘.b5‘); ???// 创建标签p ???var p = document.createElement(‘p‘); ???console.log(p); ???// 设置标签样式 ???p.className = ‘p‘; ???// 添加到指定区域 ???b1.onclick = function () { ???????var res = box.appendChild(p); ???????console.log(res); // 自身 ???} ???b2.onclick = function () { ???????body.appendChild(p); ???} ???// 总结: ???// 1.创建标签只能由document来调用执行 ???// 2.一次创建只产生一个标签对象,该标签对象只能存在最后一次操作的位置 ???// 插入到指定区域 ???b3.onclick = function () { ???????// 将p插到box之前(前者插入到后者之前) ???????var res = body.insertBefore(p, box); ???????console.log(res); ?// 自身 ???????// box和p都是body的一级子标签后,顺序有需求决定 ???????// body.insertBefore(box, p); ???} ???b4.onclick = function () { ???????// 将p替换掉box(前者替换后者) ???????var res = body.replaceChild(p, box); ???????console.log(res); // box ???} ???b5.onclick = function () { ???????// 由父级删除指定子级 ???????// var res = body.removeChild(box); ???????// 获取父级来删除自身 ???????var res = box.parentElement.removeChild(box); ???????????????console.log(res); // box ???????setTimeout(function () { ???????????// 删除后,标签对象依然可以被js保存,继而可以重新添加到页面 ???????????body.appendChild(res); ???????}, 1000) ???}</script></html>js DOM
原文地址：https://www.cnblogs.com/layerluo/p/9833156.html