JavaScript DOM&事件-优快云博客

本文详细介绍了DOM（文档对象模型）的基本概念及其在HTML文档中的应用，包括元素、属性、文本的获取与操作方法，如getElementById、getElementsByClassName等，以及事件绑定的两种常见方式。

DOM 介绍

DOM(Document Object Model)：文档对象模型。
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的获取</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
</body>
<script>
    //1. getElementById()   根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    //alert(div1);

    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let body = div1.parentElement;
    alert(body);
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的增删改</title>
</head>
<body>
    <select id="s">
        <option>---请选择---</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</body>
<script>
    //1. createElement()   创建新的元素
    let option = document.createElement("option");
    //为option添加文本内容
    option.innerText = "深圳";

    //2. appendChild()     将子元素添加到父元素中
    let select = document.getElementById("s");
    select.appendChild(option);

    //3. removeChild()     通过父元素删除子元素
    //select.removeChild(option);

    //4. replaceChild()    用新元素替换老元素
    let option2 = document.createElement("option");
    option2.innerText = "杭州";
    select.replaceChild(option2,option);

</script>
</html>

Attribute 属性的操作
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>
    <style>
        .aColor{
            color: blue;
        }
    </style>
</head>
<body>
    <a>点我呀</a>
</body>
<script>
    //1. setAttribute()    添加属性
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://www.baidu.com");

    //2. getAttribute()    获取属性
    let value = a.getAttribute("href");
    //alert(value);

    //3. removeAttribute()  删除属性
    //a.removeAttribute("href");

    //4. style属性   添加样式
    //a.style.color = "red";

    //5. className属性   添加指定样式
    a.className = "aColor";

</script>
</html>

Text 文本的操作
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本的操作</title>
</head>
<body>
    <div id="div"></div>
</body>
<script>
    //1. innerText   添加文本内容，不解析标签
    let div = document.getElementById("div");
    div.innerText = "我是div";
    //div.innerText = "<b>我是div</b>";

    //2. innerHTML   添加文本内容，解析标签
    div.innerHTML = "<b>我是div</b>";

</script>
</html>

DOM 小结

DOM(Document Object Model)：文档对象模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
元素的操作
- getElementById()
- getElementsByTagName()
- getElementsByName()
- getElementsByClassName()
- 子元素对象.parentElement属性
- createElement()
- appendChild()
- removeChild()
- replaceChild()
属性的操作

setAtrribute()
getAtrribute()
removeAtrribute()
style属性

文本的操作

innerText
innerHTML

事件

事件的介绍：
事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行

在这里插入图片描述
绑定事件：
方式一
通过标签中的事件属性进行绑定。

方式二
通过 DOM 元素属性绑定。 document.getElementById(“btn”).οnclick= 执行的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
</head>
<body>
    <img id="img" src="img/01.png"/>
    <br>
    <!-- <button id="up" οnclick="up()">上一张</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="down" οnclick="down()">下一张</button> -->
    <button id="up">上一张</button> 
    <button id="down">下一张</button>
</body>
<script>
    //显示第一张图片的方法
    function up(){
        let img = document.getElementById("img");
        img.setAttribute("src","img/01.png");
    }

    //显示第二张图片的方法
    function down(){
        let img = document.getElementById("img");
        img.setAttribute("src","img/02.png");
    }

    //为上一张按钮绑定单击事件
    let upBtn = document.getElementById("up");
    upBtn.onclick = up;

    //为下一张按钮绑定单击事件
    let downBtn = document.getElementById("down");
    downBtn.onclick = down;
</script>
</html>