div의 내용을 CSS 클래스 이름으로 가져 오기

Question

dom 사용하기 특정 div의 콘텐츠를 가져오고 싶습니다. 현재 상황은 다음과 같습니다. html 구조가 아래와 같은 사이트 링크의 콘텐츠를 가져오고 싶습니다. 내 로컬 데이터베이스에 대한 해당 CSS 클래스 데이터를 원한다. 나는 이것이 단지 dom을 사용하는 것이 가능하다고 생각한다.

<div class="listing-info-right ">   
    <div class="list-card-field name-address"> 
    <div class="list-card-user"> 
     Mr Bimal Kumar Agarwal 
    </div> 
</div> 

<div class="list-card-field name-address"> 
    <div class="list-card-phone"> 
      +91-9386750700,+91-612-2530310,+91-612-2530311 
    </div> 
</div> 

<div class="list-card-field name-address"> 
<div class="list-card-email">enquiry@elementguestline.com</div></div> 
<div class="list-card-field name-address list-card-border"> 
<div class="list-card-location">28,, Nalini Aparment 4th Floor, Kidwaipuri, Fraser Road, Patna, 800001, Bihar</div> 
</div> 
</div> 

내가 이름 DIV 클래스의 데이터 가져 오기하려면 : 목록 카드 사용자 목록 카드 전화 및 목록 카드-위치를 여기

는 코드입니다.

전에 나는 css id로 dom을 사용하여 코딩을했으나 클래스 이름으로는 아무 것도 얻을 수 없었습니다 ..!

일부 코드는 도와주세요.

미리 감사드립니다.

Answer 1

이것은 간단한 아마도 이것은 당신을 :) 도움이

<div class="listing-info-right "> 
    <div class="list-card-field name-address"> 
     <div class="list-card-user">Mr Bimal Kumar Agarwal</div> 
    </div> 
    <div class="list-card-field name-address"> 
     <div class="list-card-phone">+91-9386750700,+91-612-2530310,+91-612-2530311</div> 
    </div> 
    <div class="list-card-field name-address"> 
     <div class="list-card-email">enquiry@elementguestline.com</div> 
    </div> 
    <div class="list-card-field name-address list-card-border"> 
     <div class="list-card-location">28,, Nalini Aparment 4th Floor, Kidwaipuri, Fraser Road, Patna, 800001, Bihar</div> 
    </div> 
</div> 

출력입니다

Answer 2

div은 (는) document.getElementsByClassName을 자바 스크립트로 선택할 수 있습니다. 이 클래스의 모든 요소의 배열을 반환합니다. 단 한 번만 발생하면 첫 번째 노드 만 가져옵니다.

var div = document.getElementsByClassName("list-card-user")[0]; 

div 변수 이제 div를 가리키는, 당신은 다른 것을 얻기 위해 그것을 기능의 무리를 사용할 수 있습니다. 당신이 그 내용을 원하는 경우 예를 들어,이 작업을 수행 할 수 있습니다 원래의 질문에 편집으로 이제 제거 된 Javascript 태그를 사용했기 때문에

var content = div.innerHtml; 

편집 나는 자바 스크립트를 사용했다.

<div id="myNamez"></div> 
<div id="myPhonez"></div> 
<div id="myLoc"></div> 

가 사용 jQuery를 : 여기

<script> 
$(document).ready(function() { 
    var namez='list-card-user'; 
    var phonez='list-card-phone'; 
    var locationz='list-card-location'; 
    document.getElementById('myNamez').innerHTML='namez'; 
    document.getElementById('myPhonez').innerHTML='phonez'; 
    document.getElementById('myLoc').innerHTML='locationz'; 
}); 
</script> 

가 있어