JavaScriptを子とする内部コンテンツフォームのラベルを取得するにはどうすればよいですか？

Question

のような、HTMLコンテンツを仮定します

<div class="form-group"> 
    <label class="control-label">Title <span class="text-danger">*</span></label> 
    <input type="text" name="sms_title" id="sms_title" class="form-control" required="required" placeholder="SMS Title" onblur="_field_validate('sms_title')" > 
</div> 

がどのように私はJavaScriptのラベルのコンテンツのタイトルを取得することができます。 私のJS機能：

function _field_validate(fieldId) { 
var chars = /[^a-zA-Z 0-9_]/g; 
var elem = document.getElementById(fieldId); 
if (typeof elem !== 'undefined' && elem !== null) { 
    var input = document.getElementById(fieldId).value; 
    if (!input) { 
     return false; 
    } else if (chars.test(input)) { 
     console.log("this not proper stirng. You may do something here."); 
     return false; 
    } else { 
     var url = site_url + "/notice/get_sms"; 
     get_data(url).then(function (result) { 
     //PROMISE return data 
      if (!result) { 
       return false; 
      } else { 
       var i = 0; 
       var flag = 0; 
       result.forEach(function() { 
        if (result[i][fieldId] == input) { 
         console.log(result[i][fieldId]); 
         flag = 1; 
         var parent = document.getElementById(fieldId).parentNode; 
         var label = parent.getElementsByTagName("label").innerHTML; 
         console.log(label); //here console the label content 
         alert.innerHTML = 'alert-text'; 
         alert.style.margin = 0 + "px"; 
         alert.style.paddingLeft = 6 + "px"; 
         alert.className = 'text-danger'; 
         alert.id = 'alert-field'; 
         parent.appendChild(alert); 
        } 
        i++; 
       }); 
      } 
     }); 
    } 
    } 
} 

get_data関数は、データベースのデータを返します。これはevrythingですOKです。ラベルの内容はどうやって取得できますか？

Answer 1

Javascriptを専用液（NOはJQuery）。

id sms_titleの要素の最初の先行する兄弟を見つけ、クラスcontrol-labelを持つテキストコンテンツを抽出する必要があります。

これはまた、divにクラスcontrol-labelの複数の要素があります。

したい内容に応じて、あなたが持つことができます。

• 使用textContent
• （HTMLのラベルを含む）すべてのコンテンツを使用して、単にテキストコンテンツinnerHTML

var className = "control-label"; 
 
var el = document.getElementById("sms_title"); 
 
while(el.previousSibling && el.previousSibling.className != className) { 
 
    el = el.previousSibling; 
 
    } 
 
    
 
console.log(el.previousSibling.textContent); 
 
console.log(el.previousSibling.innerHTML);

<div class="form-group"> 
 
    <label class="control-label">Title <span class="text-danger">*</span></label> 
 
    <input type="text" name="sms_title" id="sms_title" class="form-control" required="required" placeholder="SMS Title"> 
 
</div>

（this answerも参照してください）

Answer 2

まず、自分の親のラベルにIDを追加するには、次のようにコードを変更： <label id="lbl1" class="control-label">Title <span class="text-danger">*</span>

次にJavaScriptで：

ここ

document.getElementById("lbl1").childNodes[0].innerHTML; 

Answer 3

、あなたはこの例を実行するとき、それはあなたに以下の文字列を表示しますコンソールの場合：

1. labelのテキスト。
2. spanのテキストです。
3. labelの中のテキストはspanではありません。

document.addEventListener("DOMContentLoaded", function(event) { 
 
    var str1 = document.querySelector('label.control-label').innerText; 
 
    var str2 = document.querySelector('label.control-label span').innerText; 
 
    var res = str1.replace(str2, ""); 
 
    console.log(str1); 
 
    console.log(str2); 
 
    console.log(res); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="control-label">Title <span class="text-danger">*</span></label> 
 
    <input type="text" name="sms_title" id="sms_title" class="form-control" required="required" placeholder="SMS Title"> 
 
</div>