JS – utils vol. 1

Piszemy funkcje utils, skupiając się na sprawach związanych z elementami HTML. Do dzieła.

Sprawdzamy, czy element należy do drzewa DOM (jest obiektem i instancją elementu):

function isDOMNode(value) {
    return (
        typeof value === "object" &&
        value instanceof Element
    );
}

Sprawdzamy, czy element ma tylko tekst (nie ma dzieci HTMLowych, ma jedno dziecko-węzeł):

function elementHasTextOnly(el){
    return el.childElementCount === 0 && Array.from(el.childNodes).length === 1
}

Sprawdzamy, czy element jest pusty (nie ma żadnych dzieci-węzłów):

function isEmptyElement(el){
    return Array.from(el.childNodes).length === 0;
}

Sprawdzamy, czy element jest rodzicem tekstu (ma przynajmniej jedno dziecko-węzeł tekstowe):

function isTextNodeParent(el){
    let childNodes = Array.from(el.childNodes);
    return childNodes.some((el) => el.nodeType == Node.TEXT_NODE);
}

Różnica pomiędzy children a childNodes, którą powinniśmy sobie przyswoić:

let el = document.createElement("div");
el.textContent = "foo";

el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0;   // No Element children.