ホームページ >ウェブフロントエンド >jsチュートリアル >JSでのノード操作例
この記事では、主に 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を使用してイベントをバインドする2つの方法
<!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>
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>
関連推奨事項:
dom ノードでのネイティブ JavaScript 操作の概要
以上がJSでのノード操作例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。