2.web JavaScript Web API

最新推荐文章于 2023-03-11 17:04:32 发布

学习java的张三

最新推荐文章于 2023-03-11 17:04:32 发布

阅读量171

点赞数

分类专栏： Web学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_46235384/article/details/125031840

版权

Web学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、WebAPI

WebAPI使用JS完成一些有意义的工作，JS运行在浏览器中，可以增删查改浏览器允许其操作的数据；webAPI包含了 DOM + BOM

DOM：Document Object Model(文档对象模型)

BOM：Browser Object Model

1.DOM树

一个页面的结构是一个树形结构, 称为 DOM 树

文档: 一个页面就是一个文档, 使用 document 表示
元素: 页面中所有的标签都称为元素. 使用 element 表示
节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示

2.文档中查找节点

2.1document.querySelector(···) 和 document.querySelectorAll(···)

参数是CSS中选择器，#id，#class，p，div···

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 class="好">你好</h1>
    <p>hello</p>
    <p>世界</p>
    <p class="时间 月">2022-5</p>
        <p class="日子">28</p>
    <p class="时间 日期">5-28</p>

</body>
</html>

3.文档中修改节点属性

修改文本属性时用.textContent

修改class时，可以使用.class.add("类名")、.class.remove("类名")、.class.contains("类名")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="好">你好</h1>
    <p id="1">hello</p>
    <p id="2">世界</p>
    <p class="时间 月">2022-5
         <p class="日子">28</p>
    </p>

    <p class="时间 日期">5-28</p>

</body>
</html>

二、操作元素

1.获取/修改元素内容

1.1 innerText

innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容. 修改页面的时候也会把 span 标签当成文本进行设置

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

    <p>hello</p>
</body>
</html>

1.2 innerHTML

innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行

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

    <p>hello</p>
</body>
</html>

2.获取/修改元素属性

可以通过 Element 对象的属性来直接修改, 就能影响到页面显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="rose.png" alt="这是一朵花" title="玫瑰花">
    <script>
        var img = document.querySelector('img');
        console.log(img.src);
        console.log(img.title);
        console.log(img.alt);
    </script>

</body>
</html>

3.获取/修改表单属性

例1：点击播放会切换成暂停，点击暂停就会切换成播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="播放">
    <script>
        var btn = document.querySelector('input');
        btn.onclick = function () {
        if (btn.value === '播放') {
        btn.value = '暂停';
        } else {
        btn.value = '播放';
        }
    }
</script>
</body>
</html>

三、操作节点

1.新增节点

1. 创建元素节点document.createElement() 方法

2. 把元素节点插入到 dom 树中

2.1element.appendChild(aChild)方法，将节点插入到指定节点的最后一个孩子之后
2.2使用 insertBefore 将节点插入到指定节点之前

插入的节点可以对属性正常赋值

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var img = document.createElement("img");
        img.src = "https://tse1-mm.cn.bing.net/th/id/OIP-C.zF3IWg3TWafxNR5mnujBrgHaHX?w=174&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7";
        var body = document.querySelector("body");
        body.appendChild(img);
    </script>
</body>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div>11</div>
    <div>22</div>
    <div>33</div>
    <div>44</div>
</div>
<script>
var newDiv = document.createElement('div');
newDiv.innerHTML = '新节点';
var tmp = document.querySelector('.container');
console.log(tmp.children);
tmp.insertBefore(newDiv, tmp.children[0]);
</script>
</body>
</html>

3.删除节点

使用 removeChild 删除子节点

例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div id="one">11</div>
    <div id="two">22</div>
    <div id="three">33</div>
    <div id="four">44</div>
</div>
<script>
    var tmp = document.querySelector(".container");
    var div = document.querySelector("#one")
    tmp.removeChild(div);
</script>
</body>
</html>

四、事件

JS通过事件响应和用户交互，例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件,通过对这些事件的响应，可以完成特定的功能(例如单击按钮时弹出对话框，将鼠标指针移动到文本上改变文本的颜色等)

例1：改变背景颜色

点击按钮背景色就会改变

btn.addEventListener("click",改变背景色);和btn.onclick = 改变背景色;的效果是一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">点击改变背景颜色</button>
    <script>
    var btn = document.querySelector("#btn");
    btn.onclick = 改变背景色;
    function 改变背景色() {
        var body = document.querySelector("body");
        body.style = "background-color: skyblue";
    }
</script>

</body>
</html>

例2：显示当前时间

点击按钮显示当前时间
使用setInterval()是会一直刷新的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">点击获取当前时间</button>
    <script>
    var btn = document.querySelector("#btn");
    btn.onclick = function(){
        setInterval(function(){
        var date = new Date();
        var body =document.querySelector("body");
        body.innerHTML=`<p>当前时间:${date}</p>`;
    },1000)};
</script>

</body>
</html>

五、代码举例

1.猜数字

输入一个数字，当小于随机生成的数字会显示猜小了，当大于随机生成的数字会显示猜大了，当等于随机生成的数字会显示正确并且显示出这个数字是多少，由于每次都把输入.value置空，所以输入数字按下按钮或者回车后，在输入栏是看不到数字的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>猜数字</title>
</head>
<body>
<textarea id="text" rows="1"></textarea>
<button id="btn">猜数字</button>
<div id="result">
</div>

<script src="demo2.js"></script>
</body>
</html>

// 1. 生成随机数字
// Math.random() 返回的是0-1的数字
var 随机数 = parseInt(Math.random() * 100)

// 2. 为按钮绑定点击事件，事件处理函数是结果判断
// 3. 给 input 绑定一个键盘按下的事件
var 按钮 = document.querySelector('#btn');
var 输入 = document.querySelector('#text');
var 结果区 = document.querySelector('#result');
function 结果判断() {
    // 1. 读取用户的输入
    var 用户输入的数字 = parseInt(输入.value);

    输入.value = '';
    if(用户输入的数字 >0 && 用户输入的数字<100){
        if (用户输入的数字 < 随机数) {
            结果区.innerHTML += '<p>猜小了</p>';
        } else if (用户输入的数字 > 随机数) {
            结果区.innerHTML += '<p>猜大了</p>';
        } else {
            结果区.innerHTML += '<p>正确，该数字是'+用户输入的数字+'</p>';
        }
    }
}
输入.onkeypress = function(e) {
    if (e.key === 'Enter') {
        结果判断();
    }
}
按钮.onclick = 结果判断;

学习java的张三

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2.web JavaScript Web API

一、WebAPIWebAPI使用JS完成一些有意义的工作，JS运行在浏览器中，可以增删查改浏览器允许其操作的数据；webAPI包含了 DOM + BOMDOM：Document Object Model(文档对象模型)BOM：Browser Object Model二、DOM1.DOM树一个页面的结构是一个树形结构, 称为 DOM 树文档: 一个页面就是一个文档, 使用 document 表示元素: 页面中所有的标签都称为元素. 使用 element 表示节点: ..
复制链接

扫一扫