三、WebApi

最新推荐文章于 2024-07-26 11:41:15 发布

飞翔荷兰号

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量278

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43374578/article/details/122150631

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、DOM

1. 基本概念

文档对象模型(Document Object Model), 是w3c组织推荐的，处理html的标准编程接口
可以改变html中结构，内容，样式等

2. DOM 树

在这里插入图片描述

3. 获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="first">Hello, JS</div>

<ul>
    <li>hello01</li>
    <li>hello02</li>
    <li>hello03</li>
</ul>

<div class="box">box01</div>
<div class="box">box02</div>

<script>
    /*0.  根标签: 获取body和html*/
    let body = document.body;
    console.log(body);

    let html = document.documentElement;
    console.log(html)

    /*1. 根据节点id获取
         1.1 结果是一个对象：
         <div id="first">Hello, JS</div> */
    let element = document.getElementById('first');
    console.log(element)
    console.dir(element); /* 一个目录对象结构*/

    /*2. 根据tag获取集合
    *  2.1 获取的是一个伪数组*/
    let list = document.getElementsByTagName('li');
    console.log(list[0]);
    console.log(list);

    /*3.  通过类来获取集合, h5新增语法*/
    let boxList = document.getElementsByClassName('box');
    console.log(boxList)

    /*4. query选择器： 只能选择一个
          4.1 必须将选择器的类型写出来*/
    let firstBox = document.querySelector('.box');
    let allBox = document.querySelectorAll('.box');
</script>
</body>
</html>

4. 事件

事件源
事件类型：鼠标点击，鼠标抬起，鼠标经过
事件处理类型

二、常见操作

1. 修改元素内容

innerText
innerHtml：保留内容和空格
可读可写的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <h3>匿名</h3>
    <button>起名字</button>
</div>

<script>
    /*1. 获取元素节点*/
    let name = document.querySelector('h3');
    let btn = document.querySelector('button');

    /*2.  事件触发*/
    btn.onclick = function () {
        /*将元素内部的文本修改
        *  2.1 innerHtml更加常用，识别html代码*/
        name.innerHTML = '<strong>Erick</strong>';
    }

    console.log(btn.innerText)


</script>

</body>
</html>

2. 修改元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="firstBtn">Girl-1</button>
<button id="secondBtn">Girl-2</button><br>
<img src="1.jpg" alt="unable to load..." width="300px">

<script>
    let firstButton = document.getElementById('firstBtn');
    let secondButton = document.getElementById('secondBtn');

    let image = document.querySelector('img');

    firstButton.onclick = function changeToFirst() {
        image.src = '1.jpg';
    };

    secondButton.onclick = function changeToSecond() {
        image.src = '2.jpg';
    }

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button>确认</button>
<br>
<input type="text" placeholder="请输入">

<script>
    let button = document.querySelector('button');
    let input = document.querySelector('input');

    button.onclick = function () {
        input.placeholder = "I am Erick";
        /*this指向当前函数调用对象*/
        this.disabled = true;
    }
</script>

</body>
</html>

切换密码可见性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button>切换</button><br>

密码：<input type="text">

<script>
    let isVisible = true;
    let button = document.querySelector('button');
    let input = document.querySelector('input');

    button.onclick = function changeType() {
        isVisible = !isVisible;
        if (isVisible === false) {
            input.type = 'password';
        } else {
            input.type = 'text';
        }
    }

</script>
</body>
</html>

3. 修改元素样式

修改的是行内样式，因此优先级比较高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<button>切换样式</button>
<div></div>

<script>
    let button = document.querySelector('button');
    let div = document.querySelector('div');

    button.onclick = function (){
        div.style.backgroundColor = 'black';
    }
</script>
</body>
</html>