DOM 객체 인스턴스의 js 조작에 대한 자세한 설명-JS 튜토리얼-php.cn

프로그램 디버깅, 크롬 개발자 도구, DOM 작업, 노드 간 관계, 노드 정보, 노드 작동, 요소 가져오기

1. 워드 부분

①경고 경고 ②프롬프트 ③parentNode 상위 노드 ④childNode 하위 노드 ⑤firstChild 첫 번째 하위 노드

⑥lastChild 마지막 하위 node 7nextSibling 다음 형제 8previousSibling 이전 형제

9createElement 노드 요소 생성appendChild 추가 노드 insertBefore. . 이전에 추가된

복제 노드 제거 노드 삭제 교체 노드 교체

2. 미리보기 부분

1. 일반적인 JavaScript 프로그램 디버깅

Chrome 디버깅 도구 및 경고() 메서드

2 DOM의 분류와 관계를 간략하게 설명합니다. 노드 간 관계

DOM-CORE(Core), HTML-DOM 및 CSS-DOM

자식-부모 관계와 형제 관계가 있습니다

3. 노드의 속성을 통해 계층적 관계

에 따라 노드에 액세스하는 방법을 간략하게 설명합니다. :

parentNode, childNode, firstChild 등...

4. 스타일 변경 시 style 속성과 className의 차이점을 간략하게 설명하세요

style은 스타일이 적용되는 문서 요소를 통해 스타일 객체에 접근하고, classname 속성은 요소의 클래스 스타일을 설정하거나 반환할 수 있습니다

3. 연습 부분(원본 텍스트에는 리소스나 소스 코드가 필요하며 비공개 채팅 및 공제 가능)

파일 업로드 불가, js 코드만 업로드 가능

1.당당 장바구니 페이지 node

//点击结算的时候给下面添加详情
//结算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. 닫기 버튼으로 광고 만들기

저자별 최신 기사