本文主要和大家分享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中節點操作實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
