web前端学习（四）JavaScript学习笔记部分（4）-- JavaScriptDOM对象

1、Javascript-DOM简介

1.1、HTML DOM

1.2、DOM操作HTML

　　1.2.1、JavaScript能够改变页面中的所有HTML元素

　　1.2.2、JavaScript能够改变页面中的所有HTML属性

　　1.2.3、JavaScript能够改变页面中的所有CSS样式

　　1.2.4、JavaScript能够对页面中的所有时间做出反应

2、Javascript-DOM操作HTML

2.1、DOM操作HTML

　　2.1.1、改变HTML输出流：

　　　　注意：绝对不要在文档加载完成之后使用document.write();这会覆盖该文档

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>hello</p>

<button onclick="demo()">按钮</button>

    <!--这里在点击button按钮时文档是处于已经加载完毕的状态了

    点击按钮会覆盖之前文档的内容-->

    <script>

        function demo(){

            document.write("???");

        }

    </script>

</body>

</html>

　　2.1.2、寻找元素：

　　　　通过id找到HTML元素

　　　　　　这个就是平常写的

　　　　通过标签名字找到HTML元素

　　　　　　这个用来修改标签内部属性的内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<a  id="aid" href="http://www.baidu.com">link</a>

<button onclick="demo()">按钮</button>

<script>

    function demo(){

        document.getElementById("aid").href="http://www.jikexueyuan.com";

    }

</script>

</body>

</html>

　　2.1.3、改变HTML内容：

　　　　使用属性：innerHTML

　　2.1.4、改变HTML属性：

　　　　使用属性：attribute

　　　　例子就在上面2.1.2中

3、Javascript-DOM操作CSS

3.1、通过DOM对象改变CSS

　　语法：document.getElementById(id).style.property = new style

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .div{

            width:100px;

            height:100px;

            background-color:red;

        }

    </style>

</head>

<body>

    <div id="div" class="div"></div>

<button onclick="demo()">按钮</button>

    <script>

        function demo(){

            document.getElementById("div").style.background = "blue";

            // document.getElementById("div").style.backgroundColor = "aqua";

        }

    </script>

</body>

</html>

4、Javascript-DOM EventListener

　　同过添加EventListener可以一定程度避免在修改事件处理函数时造成不必要的麻烦。

4.1、DOM Eventlistener

　　方法：addEventListener():

　　　　　removeEventListener():

4.2、addEventListener():

　　方法用于向指定元素添加事件句柄

4.3、removeEventListener:

　　移除方法添加的句柄

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <button id="btn">按钮</button>

    <script>

        document.getElementById("btn").addEventListener("click",function(){

            alert("hello");

        })

        /*上面这就叫一个句柄*/

        var x = document.getElementById("btn");

        x.addEventListener("click",hello1);

        x.addEventListener("click",world)

        /*上面就是添加了两个句柄*/

        function hello1(){

            alert("helloaaa");

        }

        function world(){

            alert("world")

        }

        /*移除添加的句柄*/

        x.removeEventListener("click",hello1);

        x.removeEventListener("click",world);

    </script>

</body>

</html>