Home >Web Front-end >JS Tutorial >Node operation examples in JS
This article mainly shares with you examples of node operations in JS, mainly in the form of code, hoping to help everyone.
Node addition, deletion and modification query
<!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>
Two ways to use JS to bind events
<!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 attribute
<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 object: encapsulated Event information
can be used to prevent event propagation
<!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>
Related recommendations:
Summary of native JavaScript operations on dom nodes
The above is the detailed content of Node operation examples in JS. For more information, please follow other related articles on the PHP Chinese website!