Whats sự khác biệt giữa nextElementSibling vs nextSibling

Question

Mặc dù tôi dường như nhận được kết quả lạ đôi khi những dường như tôi là như vậy để ai đó có thể mô tả sự khác biệt?

Answer 1

'nextSibling' trả về đối tượng nút tiếp theo trong khi 'nextElementSibling' trả về đối tượng Element tiếp theo, vì vậy có lẽ câu hỏi thực sự là sự khác biệt giữa một phần tử Node & là gì?

Về cơ bản một phần tử được chỉ định bằng thẻ HTML trong khi nút là bất kỳ đối tượng nào trong DOM, do đó phần tử là nút nhưng nút cũng có thể bao gồm các nút văn bản ở dạng khoảng trắng, nhận xét, ký tự văn bản hoặc ngắt dòng . Để biết thêm về Elements vs Nodes thấy điều này Difference between Node object and Element object?

tức Đi đoạn mã DOM sau

<div id="start"></div> 
Me 
<p>Hi</p> 

Sử dụng nextSibling bạn sẽ nhận được:

console.log(document.getElementById('start').nextSibling); // "\nMe\n" 
console.log(document.getElementById('start').nextSibling.nextSibling); // "<p> 

Trong khi sử dụng nextElementSibling bạn sẽ nhận được:

console.log(document.getElementById('start').nextElementSibling);// "<p>" 

Ngoài ra nextElementSibling là IE10 +, là Phương pháp mới trong khi nextSibling có trình duyệt hỗ trợ đầy đủ

Answer 2

nextSibling sẽ trở lại nút tiếp theo trong DOM, có lẽ hầu hết trong các tình huống trang web hiện tại, đó là một khoảng trắng nhưng nextElementSibling sẽ trở lại chỉ phần tử tiếp theo bỏ qua tất cả các nút ở giữa, nếu có.

Đối với trang hiện tại. Các nextSibling cho câu hỏi là một TextNode(Whitespace) nhưng nếu tôi muốn nhận được #answers tôi sẽ sử dụng nextElementSibling