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>

 

posted @ 2018-12-06 10:58  林丶  阅读(177)  评论(0)  编辑  收藏  举报