Maciej Żukiewicz

DOM API

Dokument HTML

<!doctype html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>DOM</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <header>
            <a href="#">Company</a>
            
            <nav>
                <ul>
                    <li><a class="menu-item" href="#">Item 1</a></li>
                    <li><a class="menu-item" href="#">Item 2</a></li>
                    <li><a class="menu-item" href="#">Item 3</a></li>
                </ul>
            </nav>
        </header>
    
        <main></main>
    
        <footer></footer>
    </body>
</html>

DOM dokumentu HTML

DOM dokumentu HTML

{
    className: "menu-item",
    href: "#",
    id: "",
    innerText: "Item 1",
    nodeName: "A",
    nodeType: 1,
    onclick: null,
    onkeydown: null,
    parentNode: li,
    //wiele innych...
}

Referencja dostępnych właściwości elementu: W3Schools

DOM dokumentu HTML

Referencja typów elementów: W3Schools

DOM - ważne pojęcia

node - węzeł

root (node) - węzeł główny

branch - gałąź

parent - rodzic

children - potomkowie

child - potomek

siblings - rodzeństwo

JavaScript i DOM

JavaScript i DOM

JavaScript i DOM

JavaScript i DOM

JavaScript DOM API

By Maciej Żukiewicz

JavaScript DOM API

  • 109