时间：2021-07-01 10:21:17 帮助过：5人阅读
本文主要和大家分享JS中节点操作实例，主要以代码的形式和大家分享，希望能帮助到大家。
节点的增删改查
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1,.p2,.p3,.p4{ width: 300px; height: 100px; }
.p1{ background-color: green; }
.p2{ background-color: yellow; }
.p3{ background-color: rebeccapurple; }
.p4{ background-color: deeppink; }
</style></head><body><p class="p1">
<button onclick="add()">add</button>
hello p1</p><p class="p2">
<button onclick="del()">del</button>
hello p2</p><p class="p3">
<button onclick="change()">change</button>
<p>hello p3</p></p><p class="p4">hello p4</p><script>###############增加节点###################### function change() {
var img=document.createElement("img");//<img src="">
//img.setAttribute("src","meinv.jpg");
img.src="meinv.jpg"; var ele=document.getElementsByTagName("p")[0]; var father=document.getElementsByClassName("p3")[0];
father.replaceChild(img,ele)
}
###############修改节点###################### function add() {
var ele=document.createElement("p");//<p></p>
ele.innerHTML="<h1>hello p</h1>"; //ele.innerText="<h1>hello p</h1>";
ele.style.color="red";
ele.style.fontSize="10px"; var father=document.getElementsByClassName("p1")[0];
father.appendChild(ele)
}
###############删除节点###################### function del() {
var father=document.getElementsByClassName("p1")[0]; var son=father.getElementsByTagName("p")[0];
father.removeChild(son)
}</script></body></html>利用JS绑定事件的两种方式
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><p onclick="func(this)">hello</p><p>hello p</p><script>
// 绑定事件方式一
function func(self) {
console.log(self)
alert(1234)
} // 绑定事件方式二
var ele=document.getElementsByTagName("p")[0]
ele.onclick=function () {
console.log(ele);
console.log(this);// alert(6666)
}</script></body></html>JS的class属性
<script>
var ele=document.getElementsByTagName("p")[0];
# class的名称
console.log(ele.className);
# 以列表返回class中值
console.log(ele.classList[0]);
# 以列表返回class中值
console.log(ele.classList[1]);
# 向列表中增加元素
ele.classList.add("hide")
console.log(ele.className);</script>Event对象：封装了事件的信息
可以用来阻止事件传播
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title></head><body><form action="" id="form1">
<input type="text" name="username">
<input type="submit" value="提交"></form><script>
var ele=document.getElementById("form1");
ele.onsubmit=function (e) {// console.log("hello")
alert(1234); // 方式一 返回false
return false
// 方式二 preventDefault函数
//e.preventDefault()
}</script></body></html>相关推荐：
原生JavaScript对dom节点操作总结
以上就是JS中节点操作实例的详细内容，更多请关注Gxl网其它相关文章！