第二章 DOM事件 - 《JavaScript 从入门到进阶》

1-1获取元素
1-2更改元素
- 更改css的语法
- 执行事件

DOM document

1-1获取元素

<script>
        var app = document.getElementById("app");
        console.log(app)
        var all = document.getElementsByClassName("one");
        console.log(all)
    </script>

   <script>
        var divs = document.getElementsByTagName("div");
        console.log(divs);
    </script>

<script>
        var all = document.querySelectorAll(".parent p");
        console.log(all)
    </script>

1-2更改元素

element.eventName = function(){
// 执行代码
}

<body>
    <button id="btn">btn</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
        console.log(this)
        this.innerHTML = "change"    ---this 指向正在执行事件的当前对象
    }
    </script>
</body>
innerHTML    ---可以改变元素的内容

更改css的语法

tips：css中是中划线的，js中写为驼峰

element.style.cssName

<body>
    <button id="app">
      发送验证码
    </button>
    <script>
        var app = document.getElementById("app");
        app.onclick =function(){
            this.innerHTML = "60";
            this.style.backgroundColor = "#eee";
            this.style.color = "green";
            this.style.fontSize = "15px"
        }
    </script>
</body>

执行事件

tips：只能对单个对象执行事件，不能对集合执行事件

<body>
    <ul>
        <li>html </li>
        <li>css </li>
        <li>javascript </li>
    </ul>
    <script>
        var lis = document.getElementsByTagName("li");
        // console.log(lis)
        // lis.onclick = function()
        // {
        //     console.log(1)
        // }
        for( var i=0;i<lis.length;i++){
            lis[i].onclick = function(){
                console.log(this)
                this.style.display ="none";
            }
        }
    </script>
</body>