JS—节点操作

1、创建添加节点

创建节点：docment.createElement('节点')

创建文本：document.createTextNode('文本')

1、father.appendChild(child)

2、father.insertBefore(child,指定元素)

2、替换删除节点

替换节点：replaceChild()

删除节点：

3、克隆节点

4、创建节点的其他几种方式

element.innerHTML：

element.innerText

document.write()

insertAdjacentHTML()

5、渲染结构

1、创建添加节点

创建节点：docment.createElement('节点')

创建文本：document.createTextNode('文本')

添加节点：

1、father.appendChild(child)

将一个节点添加到指定父节点的子节点列表的末尾

2、father.insertBefore(child,指定元素)

将一个节点添加到父节点的指定子节点前面

<body>
<!–
需求1：在段落p的后面添加一个span标签，添加span的文本内容‘我是一个span’
需求2：在段落p的前面添加一个h1标签，添加h1的文本内容，‘我是一个h1’
–>
<div id="box">
<!– <h1>我是一个h1</h1> –>
<p>段落</p>
<!– <span>我是一个span</span> –>
</div>
<button>添加span</button>
<button>添加h1</button>
<script>
let btn = document.querySelectorAll("button");
let p = document.querySelector("p");
let box = document.querySelector("#box");
// 需求一
btn[0].addEventListener("click", () => {
//1、创建节点
const spanEle = document.createElement("span");
// 2、创建文本节点
const text = document.createTextNode("我是span");
// 3、将文本节点放到元素节点中
spanEle.appendChild(text);
// 4、将元素节点添加到段落p的后面
box.appendChild(spanEle);
});
// 需求二
btn[1].addEventListener("click", () => {
// 重复上面步骤
const h1Ele = document.createElement("h1");
const text = document.createTextNode("我是h1");
h1Ele.appendChild(text);
box.insertBefore(h1Ele, p);
});
</script>

</body>

2、替换删除节点

替换节点：replaceChild()

可以使用指定的子节点替换已有的子节点

语法：父节点.replaceChild(新节点，旧节点)

删除节点：

写法一、father.removeChild(child)

写法二、child.parentNode.removeChild(child)

可以在DOM中删除一个子节点，返回删除的节点

<body>
<!– 需求一：点击按钮1，将《金瓶梅》替换为《水浒传》
需求二：点击按钮2，删除《金瓶梅》
–>
<button>替换</button>
<button>删除</button>
<ul>
<li>《红楼梦》</li>
<li>《三国演义》</li>
<li>《西游记》</li>
<li>《金瓶梅》</li>
</ul>
<script>
// 需求一
let btn = document.querySelectorAll("button");
let ulEle = document.querySelector("ul");
// let jpm = ulEle.children[3]; //放在里面不然一会替换了就找不到这个元素了
btn[0].addEventListener("click", () => {
let jpm = ulEle.children[3];
const liEle = document.createElement("li");
const text = document.createTextNode("水浒传");
liEle.appendChild(text);
ulEle.replaceChild(liEle, jpm);
});
// 需求二
btn[1].addEventListener("click", () => {
let jpm = ulEle.children[3];
// 删除节点，方式一
// ulEle.removeChild(jpm);
// 删除节点，方式二,这种方式是通过parentNode由子元素找父元素，再删除指定子元素
jpm.parentNode.removeChild(jpm);
});

</script>
</body>

3、克隆节点

node.cloneNode()

返回调用该方法的节点的一个副本

参数：布尔值,默认是false

false 只克隆节点本身，不克隆里面的子节点

true 拷贝节点，拷贝内容

<body>
<!– 需求:点击按钮克隆div元素–>
<div id="box">box盒子</div>
<button>克隆</button>
<script>
let but = document.querySelector("button");
let box = document.querySelector("#box");
but.addEventListener("click", () => {
const box1 = box.cloneNode(true);//默认是false，只克隆本身
// document.body.appendChild(box1);
document.body.insertBefore(box1, box);
});
</script>

</body>

4、创建节点的其他几种方式

即一些更简便的写法方式

element.innerHTML：

允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML，可以解析html标签

element.innerText

获取或设置元素的文本—-以纯文本的方式直接显示，不可以解析html标签

document.write()

直接将内容写入页面的内容流，但是文档执行完毕，则会导致页面全部重绘

insertAdjacentHTML()

insertAdjacentHTML() 是Element的API中的一个方法，可以将字符串文本转化为你想要的节点（Node），并且插入到你想要插入的位置中。而且它并不会向innerHTML一样会替换掉已有的节点，而是会插入到指定位置。

语法：element.insertAdjacentHTML(position,text)

参数position的可选值：beforebegin、afterbegin、beforeend、afterend，对应位置如下图

<body>
<!–
需求:在ul里添加《水浒传》到页面中
innerHTML、document.write()
–>
<button>添加</button>
<ul>
<li>《红楼梦》</li>
<!– <li>《水浒传》</li> –>
</ul>
<script>
let ul = document.querySelector("ul");
let bot = document.querySelector("button");
bot.addEventListener("click", () => {
// 写法一
const liEle = document.createElement("li");
const text = document.createTextNode("《水浒传》");
liEle.appendChild(text);
ul.appendChild(liEle);

// 写法二
const liEle = document.querySelector("li");
// liEle.innerText = "《水浒传》";//这种写法相当于重新赋值，原值被覆盖了
liEle.innerHTML = "《水浒传》"//这个也是的
ul.appendChild(liEle)

// 写法三
// 重绘，基于写法二，可以实现效果，但影响效率
ul.innerHTML = "<li>《红楼梦》</li><li>《水浒传》</li>";
//还有下面这样的（不如上面的）
// document.write(
// " <button>添加</button><ul><li>《红楼梦》</li><li>《水浒传》</li></ul>",
// );

// 写法四 father.insertAdjacentHTML(位置,节点字符串)
let li = `<li>《水浒传》</li>`;
ul.insertAdjacentHTML("beforeend", li);
});

</script>
</body>

5、渲染结构

一般定义类来写

class Footernav {
//静态数据
ulele = document.querySelector("ul");
footernav = [
{ iconClass: "iconfont icon-shouye", text: "首页", active: false },
{ iconClass: "iconfont icon-fenlei", text: "分类", active: false },
{ iconClass: "iconfont icon-find", text: "发现", active: false },
{iconClass: "iconfont icon-gouwuchekong",text: "购物车",active: false},
{ iconClass: "iconfont icon-wode", text: "我的", active: true },
];
constructor() { //底层构造函数,一旦类执行了,就会第一时间自己调用
this.gender();
};
// 渲染函数
gender() {
let str = "";
this.footernav.map((item) => {
str += `<li>${item.text}</li>`
});
this.ulele.innerHTML = str;
};
};
const f = new Footernav();

</script>
</body>