ホームページ >ウェブフロントエンド >jsチュートリアル >DOMオブジェクトインスタンスのjs操作の詳細な説明
プログラムのデバッグ、Chrome開発者ツール、DOM操作、ノード間の関係、ノード情報、ノードの操作、要素の取得
1.Word部分
①アラート警告②プロンプトプロンプト③parentNode親ノード④childNode子ノード⑤firstChild最初の子ノード
⑥lastChild最後の子ノード ⑦nextSibling 次の兄弟 ⑧previousSibling 前の兄弟
⑨createElement ノード要素を作成します appendChild ノードを追加します insertBefore。 。以前に追加した
cloneNode copy ノードremoveNode delete ノード replaceNode replace ノード
2. プレビュー部分
1. 一般的な JavaScript プログラムのデバッグ
Chrome デバッグ ツールとalert() メソッド
2 DOM の分類と関係を簡単に説明します。ノード間の関係
DOM-CORE (コア)、HTML-DOM、CSS-DOM
には子-親関係と兄弟関係があります
3. ノードのプロパティを通じて、階層関係に従ってノードにアクセスする方法を簡単に説明します
:
parentNode、childNode、firstChild、etc...
4. スタイルを変更する際の style 属性と className の違いを簡単に説明します
style は、スタイルが適用される document 要素を通じて style オブジェクトにアクセスします。 classname 属性は、要素のクラス スタイルを設定または返すことができます
3. 演習部分 (元のテキストにはリソースまたはソース コードが必要です。プライベートにチャットして差し引くことができます)
ファイルはアップロードできません。アップロードできるのは JS コードのみです
1. Dangdang ショッピング カート ページ ノードにアクセスします
//点击结算的时候给下面添加详情 //结算function accounts(){var titleH1=document.createElement("p");var price0=document.getElementById("price0").innerHTML;var price1=document.getElementById("price1").innerHTML;var sum=document.getElementById("totalPrice").innerHTML; titleH1="您本次购买的商品信息如下:"+"<br>"+"白岩松:白说:"+price0+"<br>岛上书店:"+price1+"<br>商品总计:"+sum;var zon=titleH1;var p=document.getElementById("ins");//这里我给它的p设置了一个id方便拿到p.innerHTML=zon;}total(); 2.操作当当网删除节点 //js文件 function del(){var flag=confirm("您确定要删除商品吗?");if(flag==true){var parent=document.getElementById("cartList"); var one=document.getElementById("price0").parentNode;one.parentNode.removeChild(one);total();alert("删除成功!");}}
3. 制作ワークショップ フォーラムに投稿します
//页面就不发了 发js实现原理 // JavaScript Document //发帖显示function sub(){var po=document.getElementById("post");po.style.display="block"; }//帖子提交function subTi(){var num=Math.floor(Math.random()*4+1); //输出1~4之间的随机整数var po=document.getElementById("post");po.style.display="none";var img=document.createElement("img");var titleH1=document.createElement("h1");var titMu=document.createElement("span");var qy=document.getElementById("qq");var title=document.getElementById("title").value;var mu=document.getElementById("muk").value;var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //rivar time=year+"-"+month+"-"+day;titleH1.innerHTML=title;titMu.innerHTML="<br><br>"+"板块:"+mu+" 发表时间:"+time;if(num==1){img.setAttribute("src","images/tou01.jpg");}else if(num==2){img.setAttribute("src","images/tou02.jpg");}else if(num==3){img.setAttribute("src","images/tou03.jpg");}else if(num==4){img.setAttribute("src","images/tou04.jpg");}var aa=document.getElementById("ull");//添加li var li = document.createElement("li"); //设置 li 属性 li.setAttribute("id", "newli");li.appendChild(img); li.appendChild(titleH1); li.appendChild(titMu); aa.appendChild(li);//li.insertBefore(qy,li);}
4. 閉じるボタンを使用して広告を作成します
f7e7dc1291cb3c31d7a94e43cd9d14dc2cacc6d41bbb37262a98f745aa00fbf0 | |