jquery 조작,dom 조작

자세히 보기
이번에 공유한 것은 jquery의 조작, 즉 jquery가dom에 대한 조작이다.html에서 html은dom의 노드일 수 있다. 즉, 전체 html의 모든 내용은dom 노드일 수 있다. html을 조작하거나 수정하려면dom 노드를 선택하면 된다.한편, jquery의 선택기는 이 노드를 효과적으로 선택할 수 있고 jquery의 조작 부분은 노드를 쉽게 조작할 수 있다. 내가 공유하고자 하는 것은 jquery의 조작(동작)이다.
1. js의dom 조작
1. dom 만들기
dom의 노드는 html의 모든 부분에 대응할 수 있습니다. DOM 노드의 현재 부분의 유형을 알고 싶을 때 사용할 수 있습니다.

nodeType

노드를 생성하는 경우

document.createElement;
document.creatTextNode;

다음과 같이 쓸 수 있습니다.

var elment1 = document.createElement('div');
var element2 = document.createElement('input');
var node = document.createTextNode('hello world!';

2. DOM 조회
 

ele.parentElement;//     
ele.parentNode;//     
ele.children;//     
ele.getElementsByTagName('');//           
ele.getElementsByClassName('');//          
ele.firstElementChild;//ele           
ele.lastElementChild;//ele            
ele.nextElementSibling;//ele            
ele.previousElementSibling;//ele            

3. DOM 변경 내용

ele.appendChild(el);//     
ele.removeChild(el);//     
ele.replaceChild(el1, el2);//     
parentElement.insertBefore(newElement, referenceElement);//     

4. 속성 조작

el.getAttribute('');//    
el.setAttribute('');//    
el.hasAttribute('');//    
el.removeAttribute('');//    

5, innerHTML 및 outerHTML 정보

innerHTML//  html
outerHTML//  html
innerText//    
outerText//    

text  page
//
 outerHTML  ， innerHTML  ，text page       innerText  ， outerText                 ， innerText          

二、jquery中的一些简单的dom操作

先给一个html的代码

아우디
페라리로슬레스//일반적인 웹 페이지의dom트리는 다음과 같다. html 아래는head자와body자로 나뉜다.head는meta자,title자,style자로 나뉜다
등, 바디는 얼자를 포함하고, 얼자 안에는 리자를 포함한다.

//       
$('ul li:eq(1)').text()//  ul     li       
$('p').attr('title')//  p       title

 

//       
$('ul').append($('

'))//l 요소에 리 요소 추가하기
//텍스트 노드 만들기
$('ul').append($('

BMW

')//노드와 텍스트 추가
//속성 노드 만들기
$('ul').append($('BMW')//속성 노드를 만들고 추가
//append 이외에 appendTo()도 있습니다. 이 문장은 append 문장과 반대로 $(a)입니다.append(b)
a를 b에 추가하는 것입니다.prepend (), 이 문장은 모든 요소 내부에 미리 있는 내용입니다.다른 것은 prependTo(), after(), insertAfter(), before(), insertBefore()도 있다.
 
 

//    
$('ul li:eq(1)').remove();//  ul              
//             ？   ：1.   ，2.   
$('ul li:eq(1)').detach();//                              ，    ，           
$('ul li:eq(1)').empty();//    ,              

 

//    
$('ul li').click(fucntion){
    $(this).clone(true).appendTo('ul');//                       ul   。  clone   true               ，     
}

 

//    
replaceWith()//               HTML  DOM  
$('p').replaceWith("         ？");//    p     title    p                  ？
$("         ？").replaceAll('p')//               ，          。