DOM节点的增删改查相关操作
【初学操作】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wrap">
<button class="btn">新增(元素)--放到父级</button>
<button class="btn">新增(元素)--插入同级</button>
<button class="btn">新增(文本)</button>
<button class="btn">新增(注释)</button>
<button class="btn">新增(属性)</button>
<button class="btn">新增(文档碎片)</button>
<button class="btn">替换(元素)</button>
<button class="btn">删除(元素)</button>
<button class="btn">克隆(元素)</button>
<ul class="list">
<li>01</li>
<li class="second">02</li>
<li>03</li>
<li>04</li>
</ul>
</div>
</body>
<script type="text/javascript">
var btnList = document.getElementsByClassName("btn");
var wrap = document.querySelector(".wrap");
var ul = document.querySelector(".list");
var second = document.querySelector(".second");
var liList = ul.children;//获取ul的四个li孩子节点
console.log(liList);
//创建元素节点
btnList[0].onclick = function(){
var li = document.createElement("li");
li.textContent = "新增li";
li.style.backgroundColor = randColor();
li.onclick = function(){
var index = Array.from(liList).indexOf(this);
//将获取到的伪数组liList转化为数组再使用数组的元素查找方法
alert(index);
}
console.log(li);
//绑定按钮事件生成新的元素节点后，选择如何放置节点
// ul.appendChild(li);//在所有li的后面插入
// ul.append(li,"hello");//先li后hello
// ul.append(li,li);//无法实现同时插入两个
// ul.prepend(li);//插在前面
ul.appendChild(ul.firstElementChild);
console.log(liList);
}
btnList[1].onclick = function(){
var span = document.createElement("span");
span.textContent = "我的新增的span";
span.style.backgroundColor = randColor();
span.onclick = function(){
var index = Arr.from(liList).indexOf(this);
alert(index);
}
console.log(span);
// 插入同级 => 父元素统筹
// 将一个节点(新的/页面中已存在的) 插入到 另一个节点的前面(页面已存在的)
ul.insertBefore(span,second);//该span插入到了第二个li的前面（在ul的子元素second前面插入span）
// second.insertAdjacentElement("afterbegin",span); // second.prepend() 在第二个li的内容前面插入span
}
//新增文本节点
btnList[2].onclick = function(){
var text = document.createTextNode("hello,这是新增的文本");
console.log(text);
second.appendChild(text);//在class为second这个li中插入新增的文本
}
//新增注释
btnList[3].onclick = function(){
var comment = document.createComment("嘿,这是一段注释");
second.appendChild(comment);
console.log("111");
}
//新增属性节点
btnList[4].onclick = function(){
var attr = document.createAttribute("date-msg");
attr.nodeValue = "hello";
console.log(attr);
//!!!! 将节点设置到指定元素中 (不能插入到元素内)
ul.setAttributeNode(attr);//这时在ul的标签中就新增了一个属性和属性值：date-msg="hello"
// 等价于
// ul.setAttribute("data-msg","hello");
}
//新增文档碎片
btnList[5].onclick = function(){
var frg = document.createElement("li");
for(var i=0;i<100;i++){
var li = document.createElement("li");
li.textContent = "新增的li";
li.style.backgroundColor = randColor();
li.onclick = function(){
var index = Array.from(liList).indexOf(this);
alert(index);
}
frg.appendChild(li);//暂存到文档碎片中
}
ul.appendChild(frg);
}
//替换元素节点
btnList[6].onclick = function(){
if(second){
var li = document.createElement("li");
li.textContent ="我的新增的li"
li.style.backgroundColor = randColor();
li.onclick = function(){
var index = Array.from(liList).indexOf(this);
alert(index);
}
ul.replaceChild(li,second);
second = null;
}
}
//删除节点元素
btnList[7].onclick = function(){
if(second){
// 自删
// second.remove();
// second = null;
// setTimeout(function(){
// ul.insertBefore(second,ul.firstElementChild.nextElementSibling)
// },500)//利用这个操作可以看出其实即使删除了，但他的内存空间还没有被释放，
//父删
ul.removeChild(second);
second = null;//所以要想彻底删除就要释放其内存空间
}
}
//克隆节点元素
btnList[8].onclick = function(){
// ul.appendChild(ul.firstElementChild.cloneNode());
// var cloneEle = ul.firstElementChild.cloneNode(true);
// ul.appendChild(cloneEle);
var cloneUl = ul.cloneNode(true);
wrap.appendChild(cloneUl);
}
//随机获取颜色函数
function randColor(){
var str = "0123456789abcdef";
var colorStr = "#";
for(var i = 0;i<6;i++){
var index = Math.floor(Math.random()*str.length);
var char = str.charAt(index);
colorStr += char;
}
return colorStr;
}
/* 创建节点
(1) 创建元素节点
document.createElement(tagName) => 传入标签名,创建指定标签
(2) 创建文本节点
document.createText(text) => 根据传入的文本创建 文本节点
(3) 创建注释节点
document.createComment(text) => 根据传入的文本创建 注释节点
(4) 创建属性节点
document.createAttribute(attrName) => 根据传入的属性名创建 属性节点
在通过nodeValue 设置属性值
Element.setAttributeNode() 存到元素中
(5) 创建文档碎片节点
document.createDocumentFragment() 创建文档碎片节点 => 用于暂存节点
(6)节点的修改/替换
parent.replaceChild(newNode,oldNode) 用一个节点(新的/已存在的),替换另一个节点(页面中已存在的)
（7）节点的删除
Element.remove() 自删
parent.removeChild(node) 父删 => 由父元素统筹
（8）节点的克隆
cloneNode(deep) =>节点克隆
deep 默认(false) 只克隆元素及其相关属性,至于元素内的子内容并不克隆
(true) 既克隆元素及其相关属性,又克隆元素内的子内容 */
/*
节点放置
(1) 放到父元素中 => 父元素统筹
parent.appendChild(Node); 向父节点中 追加 一个节点(新的/页面中已存在的) => 放在父元素所有内容的最后方
提示：如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
可以利用 appendChild() 方法移除元素到另外一个元素。
parent.append(String|Node); 向父节点中 追加 一个文本或节点(新的/页面中已存在的) => 放在父元素所有内容的最后方
parent.prepend(String|Node); 向父节点中 预追加 一个文本或节点(新的/页面中已存在的) => 放在父元素所有内容的最前方
(2) 插入同级 => 父元素统筹
parent.insertBefore(newNode,oldNode); 将一个节点(新的/页面中已存在的) 插入到 另一个节点的前面(页面已存在的)
insertAdjacentElement(position,element) (了解):将指定的元素插入指定的位置
position:
position:相对于元素的位置。合法值是：
afterbegin:就在元素内部，在它的第一个孩子之前。 (放在元素内部 第一个元素之前)
beforeend:在元素的最后一个子元素之后。 (放在元素内部 最后一个子元素之后)
beforebegin:在元素本身之前。 同级之前
afterend:在元素本身之后。 同级之后
element:您要插入的元素。 */
</script>
</html>
浙公网安备 33010602011771号