Có cách nào để lấy innerText của chỉ phần tử trên cùng (và bỏ qua innerText của phần tử con) không?

Question

Có cách nào để lấy innerText của chỉ phần tử trên cùng (và bỏ qua innerText của phần tử con) không?

Ví dụ:

<div> 
    top node text 
    <div> child node text </div> 
</div> 

Làm thế nào để có được "text nút top" trong khi bỏ qua "text nút con"? innerText tài sản của div đầu dường như trở lại nối của cả hai bên trong, văn bản hàng đầu.

Answer 1

Chỉ cần lặp qua các nút con và nối các nút văn bản:

var el = document.getElementById("your_element_id"), 
    child = el.firstChild, 
    texts = []; 

while (child) { 
    if (child.nodeType == 3) { 
     texts.push(child.data); 
    } 
    child = child.nextSibling; 
} 

var text = texts.join(""); 

Answer 2

1. Sao chép phần tử.
2. Lặp qua tất cả các nút con (ngược lại, để tránh xung đột):
   Nếu phần tử có thuộc tính tagName, thì đó là một phần tử: Xóa nút.
3. Sử dụng innerText để nhận nội dung văn bản (với dự phòng là textContent, khi innerText không được hỗ trợ).

Code:

var elem = document.getElementById('theelement'); 
elem = elem.cloneNode(true); 
for (var i=elem.childNodes.length-1; i>=0; i--) { 
    if (elem.childNodes[i].tagName) elem.removeChild(elem.childNodes[i]); 
} 
var innerText = elem['innerText' in elem ? 'innerText' : 'textContent']; 

Answer 3

Nếu bạn không muốn bỏ qua văn bản bên trong các phần tử con của, sử dụng như sau chức năng:

function getInnerText(el) { 
    var x = []; 
    var child = el.firstChild; 
    while (child) { 
     if (child.nodeType == 3) { 
      x.push(child.nodeValue); 
     } 
     else if (child.nodeType == 1) { 
      var ii = getInnerText(child); 
      if (ii.length > 0) x.push(ii); 
     } 
     child = child.nextSibling; 
    } 
    return x.join(" "); 
} 

Answer 4

Điều này sẽ làm việc trong ví dụ của bạn: document.getElementById("item").firstChild.nodeValue;

Lưu ý: Hãy nhớ rằng điều này sẽ hoạt động nếu bạn biết bạn đang xử lý HTML cụ thể đó. Đoạn mã

<div> 
    <div class="item"> child node text </div> 
    top node text 
</div> 

thì bạn nên sử dụng giải pháp chung chung hơn bởi @Tim Down

---

đây đang làm việc:: Nếu HTML của bạn có thể thay đổi, ví dụ để

window.onload = function() { 
 
    var text = document.getElementById("item").firstChild.nodeValue; 
 
    document.getElementById("result").innerText = text.trim(); 
 
};

#result { 
 
    border: 1px solid red; 
 
}

<div id="item"> 
 
    top node text 
 
    <div> child node text </div> 
 
</div> 
 

 

 

 
<strong>Result:</strong> <div id="result"></div>