JavaScript学习5

一、DOM

​ DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。

1.获取元素

如何获取元素

  • 根据ID获取

    1
    2
    document.getElementById('id');
    console.dir();//可以打印返回的元素对象，更好的查看里面的属性和方法

  • 根据标签名获取

    1
    2
    3
    4
    5
    6
    7
    document.getElementsByTagName('name');
    //返回值是 获取过来元素对象的集合 以伪数组的形式存储（无论有没有这个对象）
    element.getElementsByTagName('name');
    //可以获取某个元素内部所有指定标签名的子元素
    //父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。
    var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'))

  • 通过HTML5新增的方法获取

    1
    2
    3
    document.getElementsByClassName('name');//根据类名返回元素对象集合
    doucument.querySelector('选择器');//根据指定选择器返回第一个元素对象
    document.querySelectorAll('选择器');//根据指定选择器返回所有元素对象

  • 特殊元素获取（body,html）

    1
    2
    3
    4
    //获取body标签
    document.body;// 返回body元素对象
    //获取html标签
    document.documentElement;// 返回html元素对象

2.事件基础

2.1事件是由三部分组成，事件源、事件类型、事件处理程序。

  • ​ 事件源：事件被触发的对象
  • ​ 事件类型：如何触发，什么事件，比如鼠标点击事件（onclick）还是鼠标经过，还是键盘按下。
  • ​ 事件处理程序：通过一个函数赋值的方式完成。
1
2
3
4
5
6
7
8
<body>
    <button id="btn">唐伯虎</button>
    <script>
      var btn = document.getElementById("btn");
            btn.onclick = function(){
                alert('点秋香')
            }
    </script>

2.2执行事件的步骤

  1. 获取事件源

  2. 注册事件（绑定事件）

  3. 添加事件处理程序（采取函数赋值的形式）

    2.3常见的鼠标事件

    鼠标事件 触发条件
    onclick 鼠标点击左键触发
    onmouseover 鼠标经过触发
    onmouseout 鼠标离开触发
    onfocus 获得鼠标焦点出发
    onblur 失去鼠标焦点触发
    onmousemove 鼠标移动触发
    onmouseup 鼠标弹起触发
    onmousedown 鼠标按下触发

3.操作元素

3.1改变元素内容

1
2
element.innerText //从起始位置到终止位置的内容，会去除html标签，同时空格和换行也会去掉
element.innerHTML //从起始位置到终止位置的内容，包括html标签，同时保留空格和换行

3.2常用元素的属性操作

1
2
3
4
src、href、id、alt、title

var img = document.querySelector('img')
   img.src = "./2.jpg"

3.3表单元素的属性操作

​ 利用DOM可以操作如下表单元素的属性：type、value、checked、selected、disabled

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<body>
    <button>点击</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input')
        btn.onclick = function(){
            input.value = '点击成功'
            //按钮被禁用
            btn.disabled = true
        }
    </script>
</body>

​ 显示隐藏密码明文案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 <style>
        .box{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img {
            width: 24px;
            position: absolute;
            right: 10px;
            width: 20px;
            top: 8px;
        }
    </style>
<body>
    <div class="box">
        <label for="">
            <img src="./close.svg" id="eye">
        </label>
        <input type="password" name="" id="password">
       
    </div>
    <script>
        var flag = 0;
        var input = document.getElementById('password')
        var img = document.getElementById('eye')
        img.onclick = function () {
            if (flag == 0) {
                input.type = 'password'
                img.src = './close.svg'
                flag = 1
            }else if (flag == 1){
                input.type = 'text'
                img.src = './open.svg'
                flag = 0 
            }
        }
    </script>
</body>

3.4样式属性操作

​ 我们可以通过JS修改元素的大小、颜色、位置等样式。

  • element.style 行内样式操作

  • element.className 类名样式操作

    JS修改style样式操作，产生的是行内样式，css权重比较高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
        div{
            width: 200px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        div.onclick = function(){
            div.style.backgroundColor = 'red';
            div.style.width = '900px'
        }
    </script>
</body>

关闭二维码案例

display:block;显示元素

display :none;隐藏元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
        .box{
            position: relative;
            width: 150px;
            height: 80px;
            display:block;
        }
        #cc{
            position: absolute;
            width: 20px;
            height: 30px;
        }
        #QRcode{
            position: absolute;
            left: 10px;
            width: 100px;
            height: 70px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./chahao.svg" id="cc">
        <img src="./QRcode.svg" alt="" id="QRcode">

    </div>
    <script>
        var div = document.querySelector('div')
        var cc = document.getElementById('cc')
        var QRcode = document.getElementById('QRcode')
        cc.onclick = function () {
           div.style.display = 'none'
        }
    </script>
</body>
学习笔记 JavaScript
JavaScript

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！