জাভাস্ক্রিপ্টে উপাদানটির কোনও শিশু রয়েছে কিনা তা কীভাবে পরীক্ষা করবেন?

Question

সাধারণ প্রশ্ন, আমার একটি উপাদান রয়েছে যা আমি দখল করছি .getElementById ()। এটির কোনও সন্তান আছে কিনা তা আমি কীভাবে চেক করব?

Answer 1

কয়েকটি উপায়:

if (element.firstChild) {
    // It has at least one
}

বা hasChildNodes()ফাংশন:

if (element.hasChildNodes()) {
    // It has at least one
}

বা এর lengthসম্পত্তি childNodes:

if (element.childNodes.length > 0) { // Or just `if (element.childNodes.length)`
    // It has at least one
}

যদি আপনি কেবলমাত্র সমস্ত আধুনিক ব্রাউজারগুলিতে শিশু উপাদানগুলির (যেমন পাঠ্য নোড, বৈশিষ্ট্য নোড ইত্যাদির বিপরীতে) জানতে চান (এবং আই 8 - আসলে, এমনকি আই in) আপনি এটি করতে পারেন: ( ফ্লোরিয়ানকে ধন্যবাদ !)

if (element.children.length > 0) { // Or just `if (element.children.length)`
    // It has at least one element as a child
}

যে উপর নির্ভর করে childrenসম্পত্তি, যা সংজ্ঞায়িত করা হয় নি DOM1 , DOM2 , বা DOM3 , তবে যার কাছে সর্বজনীন সমর্থন রয়েছে। (এটি আই 6 এবং উপরে এবং ক্রোম, ফায়ারফক্স এবং অপেরাতে কমপক্ষে নভেম্বর ২০১২ পর্যন্ত কাজ করেছে, এটি মূলত লেখা হয়েছিল।) যদি পুরানো মোবাইল ডিভাইসগুলি সমর্থন করে তবে অবশ্যই সমর্থনটি যাচাই করতে ভুলবেন না।

আপনার যদি আইই 8 এবং তার আগে সমর্থন না প্রয়োজন হয় তবে আপনি এটিও করতে পারেন:

if (element.firstElementChild) {
    // It has at least one element as a child
}

যে উপর নির্ভর করে firstElementChild। পছন্দ করুন children, এটি DOM1-3 তেও সংজ্ঞায়িত করা হয়নি তবে childrenএটি আইই 9 পর্যন্ত আই-তে যুক্ত করা হয়নি।

আপনি যদি ডিওএম 1 এ সংজ্ঞায়িত কিছুতে আটকে থাকতে চান (সম্ভবত আপনাকে সত্যিই অস্পষ্ট ব্রাউজারগুলি সমর্থন করতে হবে), আপনাকে আরও কাজ করতে হবে:

var hasChildElements, child;
hasChildElements = false;
for (child = element.firstChild; child; child = child.nextSibling) {
    if (child.nodeType == 1) { // 1 == Element
        hasChildElements = true;
        break;
    }
}

এগুলি সমস্তই ডিওএম 1 এর একটি অংশ এবং প্রায় সর্বজনীন সমর্থিত।

এটি কোনও ফাংশনে মুড়িয়ে ফেলা সহজ হবে, যেমন:

function hasChildElement(elm) {
    var child, rv;

    if (elm.children) {
        // Supports `children`
        rv = elm.children.length !== 0;
    } else {
        // The hard way...
        rv = false;
        for (child = element.firstChild; !rv && child; child = child.nextSibling) {
            if (child.nodeType == 1) { // 1 == Element
                rv = true;
            }
        }
    }
    return rv;
}

Comments

ওহ, আমি বুঝতে পারি নি যে childrenকেবল ডিওএম 4 এ যুক্ত হয়েছিল। এটি যে কোনও পরিচিত ব্রাউজারে সমর্থিত তা জেনে আমি ভেবেছিলাম এটি বেশিরভাগ DOM0 / 1।

— ফ্লোরিয়ান মার্জাইন

নির্দিষ্ট ক্লাসের কোনও divউপাদান আছে কিনা তা আমি কীভাবে চেক করব ? divxyz

— পূজা দেশাই

ফার্স্টচাইল্ড এবং হ্যাশহিল্ড নোডগুলি কেবলমাত্র শিশুরা নয় (নোডটাইপ == 1) কোনও নোড ফিরিয়ে দেয়। আপনি এটি সংশোধন করা উচিত। ;-)

— অ্যাড্রিয়ান মাইয়ার

for (child = element.firstChild; child; child = child.nextSibling )ভোট দেওয়ার মতো লুপের অবস্থাটি কখনও দেখেনি । ধন্যবাদ TJ

— NiCk নিউম্যান

@Aaron: এটা জন্য সম্পূর্ণরূপে সম্ভব element.firstChildঅ- হতে nullযখন element.children.lengthহয় 0: firstChildএবং এই ধরনের কহা নোড উপাদান, টেক্সট নোড, মন্তব্য নোট, ইত্যাদি সহ .; childrenবিশুদ্ধরূপে উপাদান শিশুদের একটি তালিকা । আধুনিক ব্রাউজারগুলিতে আপনি firstElementChildপরিবর্তে ব্যবহার করতে পারেন ।

— টিজে ক্রোডার

Answer 2

স্ল্যাশনিক এবং ববিন্স উল্লেখ হিসাবে, hasChildNodes()সাদা স্থান (পাঠ্য নোড) এর জন্য সত্য ফিরে আসবে। তবে, আমি এই আচরণটি চাইনি, এবং এটি আমার পক্ষে কাজ করেছে :)

element.getElementsByTagName('*').length > 0

সম্পাদনা করুন : একই কার্যকারিতার জন্য, এটি আরও ভাল সমাধান:

 element.children.length > 0

children[]এটি একটি উপসেট childNodes[], এতে কেবল উপাদান রয়েছে।

সঙ্গতি

Answer 3

উপাদানটির চাইল্ড নোড রয়েছে কিনা তা আপনি পরীক্ষা করতে পারেন element.hasChildNodes()। মোজিলায় সাবধান থাকুন যদি এটি ট্যাগের পরে সাদা জায়গা হয় তবে এটি আপনাকে ট্যাগের যাচাই করতে হবে true

https://developer.mozilla.org/En/DOM/Node.hasChildNodes

Comments

শুধু মজিলায় নয়। এটি সঠিক আচরণ; এটি আইই এটি ভুল হয়ে যায়।

— ববিনস

Answer 4

আপনি নিম্নলিখিতগুলি করতে পারেন:

if (element.innerHTML.trim() !== '') {
    // It has at least one
} 

এটি hasChildNodesশূন্যস্থান হিসাবে খালি হিসাবে (কেবলমাত্র সত্যটি প্রত্যাশা করে) খালি উপাদানগুলির জন্য ট্রিট () পদ্ধতি ব্যবহার করে ।

জেএসবিন ডেমো

Comments

এটি এইচটিএমএল মন্তব্যের সাথে কীভাবে আচরণ করে?

— ভিক্টর জামামানিয়ান

Answer 5

দেরীতে কিন্তু দস্তাবেজের খণ্ডটি নোড হতে পারে:

function hasChild(el){
    var child = el && el.firstChild;
    while (child) {
        if (child.nodeType === 1 || child.nodeType === 11) {
            return true;
        }
        child = child.nextSibling;
    }
    return false;
}
// or
function hasChild(el){
    for (var i = 0; el && el.childNodes[i]; i++) {
        if (el.childNodes[i].nodeType === 1 || el.childNodes[i].nodeType === 11) {
            return true;
        }
    }
    return false;
}

দেখুন:
https://github.com/k-gun/so/blob/master/so.dom.js#L42
https://github.com/k-gun/so/blob/master/so.dom.js # L741

Answer 6

চাইল্ডএলমেন্ট অ্যাকাউন্টের সম্পত্তিটি চেষ্টা করুন :

if ( element.childElementCount !== 0 ){
      alert('i have children');
} else {
      alert('no kids here');
}

Answer 7

একটি পুনরায় ব্যবহারযোগ্য isEmpty( <selector> )ফাংশন।
আপনি এটি উপাদানগুলির সংগ্রহের দিকেও চালাতে পারেন (উদাহরণ দেখুন)

const isEmpty = sel =>
    ![... document.querySelectorAll(sel)].some(el => el.innerHTML.trim() !== "");

console.log(
  isEmpty("#one"), // false
  isEmpty("#two"), // true
  isEmpty(".foo"), // false
  isEmpty(".bar")  // true
);

<div id="one">
 foo
</div>

<div id="two">
 
</div>

<div class="foo"></div>
<div class="foo"><p>foo</p></div>
<div class="foo"></div>

<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>

trueশিগগিরই কোনও উপাদান স্পেস বা নিউলাইনগুলির পাশে যে কোনও ধরণের সামগ্রী রেখে দেয় (এবং লুপ থেকে প্রস্থান করে) returns

Answer 8

<script type="text/javascript">

function uwtPBSTree_NodeChecked(treeId, nodeId, bChecked) 
{
    //debugger;
    var selectedNode = igtree_getNodeById(nodeId);
    var ParentNodes = selectedNode.getChildNodes();

    var length = ParentNodes.length;

    if (bChecked) 
    {
/*                if (length != 0) {
                    for (i = 0; i < length; i++) {
                        ParentNodes[i].setChecked(true);
                    }
    }*/
    }
    else 
    {
        if (length != 0) 
        {
            for (i = 0; i < length; i++) 
            {
                ParentNodes[i].setChecked(false);
            }
        }
    }
}
</script>

<ignav:UltraWebTree ID="uwtPBSTree" runat="server"..........>
<ClientSideEvents NodeChecked="uwtPBSTree_NodeChecked"></ClientSideEvents>
</ignav:UltraWebTree>

Comments

দয়া করে কেবল কোড-কেবল সমাধান সরবরাহ করবেন না। এছাড়াও, আপনি কেন সেখানে মন্তব্য-আউট কোড দিয়েছেন?

— লি টেলর

ডাউনভোট: এই কোডটি অস্পষ্ট, কোডের কিছু অংশ অনিবার্য, কোনও মন্তব্য বা ব্যাখ্যা নেই এবং এটি একটি অনুলিপি / অতীতের মতো দেখাচ্ছে। এছাড়াও এক্সএমএল অংশটির এখানে কিছুই করার নেই।

— অ্যাড্রিয়ান মাইয়ার

এ কী পাগলামি?

— নাইক নিউম্যান