Html5 JumpStart学习笔记5：Dom Interactions

Module Agenda

Query the DOM

Manipulating(操纵) the DOM

Responding to events

1、Query the DOM

    getElementById

var x = document.getElementById("anyID");
//or
var x = document.querySelector("#anyID");

    getElementByTagName

    querySelector

    querySelectorAll

var thing = document.querySelector("#anyID");
var list = document.querySelectorAll(".item");

2、Manipulating the DOM

    add | modify | remove

    change style

var x = document.querySelector("#anyID");
x.innerText = "changed";
x.className = "item";
//or
x.classList.add("item");

eg: 每点一下，增加一行

<div class="dom fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
        <h1 class="titlearea win-type-ellipsis">
            <span id="domTitle" class="pagetitle">DOM</span>
        </h1>
    </header>
    <section id="domContainer" aria-label="Main content" role="main">
        <p id="domButton"Click any content...</p>
    </section>
<div>

(function () {
    var container;
    function addItem(item) {
        item.addEventListener("click", function () {
            item.className = "item";
            item.innerText = "item [li clicked]";
            var newItem = document.createElement("li");
            newItem.innerText = "item";
            item.parentElement.appendChild(newItem);
            addItem(newItem);
        });
    }
    WinJS.UI.Pages.define("/pages/dom/dom.html", {
        // This funciton is called whenever a user navigates to this page.It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            //TODO:Initialize the page here.
            var pbutton = document.getElementById("domButton");
            var title = document.getElementById("domTitle");
            container = document.getElementById("domContainer");
            title.addEventListener("click", function () {
                title.innerText = "DOM [span innerText]";
            });
            pbutton.addEventListener("click", function () {
                var txt = pbutton.innerText;
                container.removeChild(pbutton);
                var btn = document.createElement("button");
                btn.textContent = txt;
                container.appendChild(btn);
                var newDiv = document.createElement("div");
                newDiv.innerHTML = "<ul><li>item</li></ul>";
                container.appendChild(newDiv);
                var domItem = newDiv.querySelector("li");
                addItem(domItem);
            });
        }
    })
})

3、Responding to events

    declarative binding

<button id="btn" onclick="handler();">Click!</button>
//JavaScript
function handler(){ ... }

    programmatic binding

<button id="btn">Click!</button>
//JavaScript
function handler(){ ... }
var b = document.querySelector("#btn");
b.addEventListener("click",handler);

        这两种事件的绑定方式当然是推荐使用下面一种啦，行为与表现分离。