Web API第一天学习总结

微风抚少年
174 阅读6分钟

Web API第一天学习总结

Web API基本认知

作用和分类

作用

使用 JS 去操作 html 和浏览器

分类

DOM (文档对象模型)、BOM（浏览器对象模型）

1648979008863.png

什么是DOM

原理

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

简单来说就是浏览器提供的一套专门用来 操作网页内容 的功能

作用

开发网页内容特效和实现用户交互

DOM树

  • 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
  • 描述网页内容关系的名词
  • 作用：文档树直观的体现了标签与标签之间的关系

e779f9ad4c5bd73f8daab0b4416fcfd568606a30.png

DOM对象（重要）

浏览器根据html标签生成的 JS对象

  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签身上

DOM的核心思想

把网页内容当做对象来处理

document 对象

  • 是 DOM 里提供的一个对象
  • 所以它提供的属性和方法都是用来访问和操作网页内容的
  • 网页所有内容都在document里面

获取DOM对象

1.根据CSS选择器来获取DOM元素 (重点)

1.1选择单个元素

获取到的元素可以直接修改

语法：

document.querySelector("css选择器")

参数：

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的第一个元素,一个 HTMLElement对象。 如果没有匹配到，则返回null。

<body>
    <div>div元素</div>
    <div>div元素123</div>
    <input type="text">
    <script>
        let dom = document.querySelector("div");//类似于CSS选择器，如果有两个元素，只能获取到第一个
        console.dir(dom);//输出不能用console.log，他会把标签也显示出来，应该使用console.dir
        console.dir(document.querySelector("input"));
    </script>
</body>
1.2选择多个元素

1.获取到的元素不能直接修改，要通过遍历的方式，依次来修改里面的元素

2.得到的是一个伪数组

3.有长度有引号的数组

4.没有pop() push()等数组方法

语法：

document.querySelectorAll("css选择器")

参数：

包含一个或多个有效的CSS选择器 字符串

返回值：

CSS选择器匹配的NodeList 对象集合

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        // 获取多个dom对象   不管找到元素与否，都会返回一个数组
        let lis = document.querySelectorAll("li");
        
        // 数组循环使用
        for (let index = 0; index < lis.length; index++) {
            // lis[index]就是数组的下标
            // 向ul中输入内容   dom元素.innerText = 输入的元素
            lis[index].innerText = `这是li标签` + index; 

            
        }
    </script>

2.其他获取DOM元素方法（了解）

  1. ​ 根据id获取一个元素

    document.getElementById("nav");

  2. 根据标签来获取一类元素 如获取页面所有div

    document.getElementsByTagName("div");

  3. 根据类名来获取一组元素 获取页面所有类名为container的

    document.getElementsByClassName("container");

设置/修改DOM元素内容

document.write()方法

  • 只能将文本内容追加到 前面的位置
  • 文本中包含的标签会被解析
document.write('Hello World');
document.write('<h3>你好，世界</h3>');

对象.innerText属性

  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签不会被解析
document.querySelector("li:nth-child(2)").innerText = '<button>随便改改</button>';

1649087656250.png

对象.innerHTML属性

  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签会被解析
document.querySelector("li:nth-child(3)").innerHTML = '<button>随便改改</button>';

1649087789576.png

设置/修改DOM元素属性

设置/修改元素常用属性

常见的属性如：href、title、src等

语法

对象.属性 = 值

        //获取元素
        let img = document.querySelector("img");
        //操作元素
        img.src = './images/1.png';
        img.title = '这是一张图片';

设置/修改元素样式属性

通过style属性修改
  1. 修改样式要通过style属性印出来
  2. 如果属性有-连接符，需要转换为小驼峰命名法
  3. 赋值的时候，需要的时候不要忘记加CSS单位

语法

对象.style.样式属性 = 值

        //获取元素
        let divDom = document.querySelector("div");
        // 如果报错的话先看看dom元素有没有选取到div
        // 然后再一个个元素排除咯
        divDom.style.backgroundColor = "skyblue";
        divDom.style.width = "600px";
        divDom.style.height = "300px";
        divDom.style.fontSize = "50px";
通过类名属性修改
  1. 如果修改的样式比较多
  2. 直接通过style属性修改比较繁琐

语法

元素.className = '类名'

  • class是一个关键字，所以用className代替
  • className是新值换旧值，如果需要添加一个类,需要保留之前的类名
  • 直接使用 className 赋值会覆盖以前的类名
  • 如果想要同时设置多个类 用空格隔开
        let div = document.querySelector("div");
        div.className = "box one";
通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法

追加一个类：元素.classList.add('类名')

        let div = document.querySelector("div");
        // 添加一个class  不会覆盖原来的class  可以添加多个 用逗号隔开
        div.classList.add("d1","d2");

删除一个类：元素.classList.remove('类名')

        let div = document.querySelector("div");
        // 移除一个class  可以一个或者多个  也是用逗号隔开
        div.classList.remove("d2");

切换一个类：元素.classList.toggle('类名')

        let div = document.querySelector("div");
        // 切换  如果有该class  就移除  如果没有就添加  也可以多个  
        div.classList.toggle("d2","d4");

设置/修改表单元素属性

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性

如：disabled(禁止点击按钮状态)、checked、selected

获取：DOM对象.属性名

设置：DOM对象.属性名=新值

  • 设置普通的输入框 input.value ="表单的值"
  • 设置 按钮的禁用
  • button.disabled=true 禁用
  • button.disabled=false 启用
  • 设置单选框或者复选框
  • radio.checked=true 选中
  • checkbox.checked=false 取消选中
  • 设置下拉列表 select
  • option.selected=true 选中
  • 文本域标签 有点点特殊 ！
  • 属于表单元素 又是双标签
  • 在html想要设置 文本域的内容 直接在标签内写即可
  • 获取文本域中的值 value 有区别 innerHTML
  • 想要获取 内容 - .value 原样获取内容 - .innerHTML 获取的内容如果包含html 会转移
        let input = document.querySelector("input");
        input.value= "我回来啦";
        let button = document.querySelector("button");
        // 禁止点击按钮
        // button.disabled = true;//禁止
        button.disabled = false;//不禁止
        let option = document.querySelector("option:nth-child(4)");
        option.selected = true; 
        let checkbox = document.querySelector(".check");
        // 默认选中复选框
        checkbox.checked = true;
        // 文本域  既是表单标签又是双标签
        let textarea = document.querySelector("textarea");
	textarea.innerHTML=`<h1>标题</h1>`;

定时器-间歇函数

场景：每隔一段时间需要自动执行一段代码，不需要我们手动去触发

1.开启定时器

语法

setInterval(函数,间隔时间);

  • 作用：每隔一段时间调用这个函数
  • 间隔时间单位是毫秒
        // 定义一个函数执行业务
        function time() {
            console.log("头发就是多");
        }
        // 函数名称  定时器时间   1000毫秒 = 1秒 
        // 注意函数名称后面不要加括号
        setInterval(time,1000);


        // 2.也可以搭配匿名函数使用
        setInterval(function() {
            console.log("头发多多多~~~");
        },2000);

2.关闭定时器

一般不会刚创建就停止，而是 满足一定条件就停止

语法

let 变量名= setInterval(函数,间隔时间);

clearInterval(变量名);

  • 函数名字不需要加括号
  • 定时器返回的是一个id数字
        let index = 0;
        let timeId = setInterval(function() {
            console.log("追女孩子" + index++);
            if (index === 30) {
                // 清除定时器clearInterval(定时关键字);
                clearInterval(timeId);
            }
        },100);
avatar
文章
阅读
粉丝