黑马JS学习笔记——DOM

Ivy烎

已于 2022-05-06 09:05:23 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

于 2022-04-24 21:48:43 首次发布

本文链接：https://blog.csdn.net/weixin_41185694/article/details/124391370

API

API
(Application Programming Interface应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。
简单理解：API是给程序员提供的一种工具（一个接口），以便能更轻松地实现想要完成的功能
Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOW DOW），现阶段主要针对浏览器做交互效果；MDN详细API：Web API 接口参考 | MDN (mozilla.org)
因为Web API很多，所以我们将这个阶段称为Web APIs
Web API 一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）
结合前面学习内置对象方法的思路学习

DOM

在这里插入图片描述
1.1 什么是DOM
（Document Object Model,文档对象类型）是W3C组织推荐的处理可扩展标记语言（HTML/XML）的标准编程接口，通过这些DOM接口可以改变网页的内容、结构和样式
1.2 DOM树

文档：一个页面就是一个文档，DOM中用document表示
元素：页面中所以标签都是元素，DOM中石油element表示
节点：网页中所有内容都是节点（标签，属性，文本，注释等）。DOM中用node表示
DOM把以上内容都看做是对象
2.1 如何获取页面元素
DOM在实际开发中主要用来操作元素，使用以下集中方法获取页面元素
根据ID获取、标签名、HTML5新增的方法、特殊元素获取
2.2 根据ID获取
getElementById()
1.因为文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
2.参数 id 是大小写敏感的字符串
3.返回一个元素对象
4.console.dir() //打印返回的元素对象，更好地查看里面的属性和方法
2.2 根据标签名获取
getElementsByTagName()
1.返回带有指定标签名的对象的集合，以伪数组形式存储，得到的元素是动态的
2.如果指定标签名只有一个，返回的还伪数组的形式
3.如果页面中没有这个元素，返回空的伪数组
2.3 根据标签名获取
还可获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName(‘标签名’);
父元素必须是单个对象（必须指明是哪一个元素对象）。获取的时候不包括父元素自己
2.4 通过HTML5（i9及以上浏览器适用）新增方法获取
1.document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合
2.document.querySelector(‘选择器’); //根据指选择器返回第一个元素对象，切记里面的选择器需要加符号，.box #nav
3.document.querySelectorAll(‘选择器’); // 根据指定选择器返回
2.5获取特殊元素

document.body  //返回body元素对象
document.documentElement  //返回html元素对象

1.事件基础
3.1 事件概述
JS使我们有能力创建动态页面，而事件是可以被JS侦测到的行为
简单理解：触发—响应机制
网页中每个元素都可以产生某些可以触发JS的事件：例如可以在用户电机某按钮时产生一个事件然后去执行某些操作
3.2 事件三要素：事件源事件类型事件处理程序
1.事件源事件触发的对象谁
2.事件类型：鼠标点击经过按键等
3.事件处理程序：函数
3.3 执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）
在这里插入图片描述
1.操作元素
js的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等，注意以下都是属性：

4.操作元素

JS的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
4.1 改变元素内容

        //element.innerText
        //从起始位置到终止位置的内容，但它去除html标签、空格和换行 非标准
        //element.innerHTML
        //起始位置到终止位置的全部内容，可识别html标签，同时保留空格和换行，W3C标准
   
        // 这两个属性是可读写的，可以获取元素里面的内容

4.2 常用元素的属性操作

1.innerText、innerHTML改变元素内容
2.src、href

id、alt、title

4.3表单元素的属性操作

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

4.4样式属性操作

element.style  //行内样式操作
element.className 
 /*类名样式操作，适合样式较多复杂的情况；用className来操作元素类名属性；会直接更改元素的类名，会覆盖原来的类名*/

注意：
JS里面的样式采取驼峰命名法，比如 fontSize、backgroundColor
JS修改style样式操作，产生的是行内样式，css权重比较高

操作元素总结

操作元素内容（innerText非标准\innerHTML标准）
操作常见元素属性(src\href\title\alt)
操作表单元素属性(type\value\disabled)
操作元素样式属性（element.style\className）

4.5排他思想

4.6自定义属性的操作

获取属性值
element.属性 //获取内置属性（元素本身自带的属性）
element.getAttribute(‘属性’); //主要获得自定义的属性（标准）程序员自定义属性
设置属性值
element.属性=‘值’
element.setAttribute(‘属性’，‘值’);
移除属性
element.removeAttribute(‘属性’)
附：Tab切换代码

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
   
            margin: 0;
            padding: 0;
        }

        .tab {
   
   
            margin: 100px auto;
        }

        li {
   
   
            list-style: none;
        }

        .tab_list li {
   
   
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
            background-color: grey;
        }

        .tab_list .current {
   
   
            background