이 기사는 주로 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
<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>
이벤트 객체의 클래스 속성: 이벤트 정보를 캡슐화합니다
이벤트 전파를 방지하는 데 사용할 수 있습니다
<!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>
관련 권장 사항:
위 내용은 JS의 노드 작업 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!