web前端学习笔记——DOM

Minnor

已于 2022-05-26 22:44:30 修改

阅读量679

点赞数

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

于 2022-05-26 20:57:24 首次发布

本文链接：https://blog.csdn.net/holive_9/article/details/124991674

版权

本文是关于Web前端DOM的学习笔记，详细介绍了DOM的概念、获取元素的方法、事件基础、节点操作以及事件高级知识。内容涵盖API与JavaScript的关系、DOM树、通过ID、标签名等获取元素、事件源、事件类型、事件处理程序、元素属性操作、动态创建元素、事件冒泡、事件委托等。笔记还包括实例和案例，适合前端初学者和进阶者参考。

摘要由CSDN通过智能技术生成

存档！（虽然笔记有点乱）
以下是全程跟着pink老师的讲课视频整理的课程笔记，有一些案例截图没找着

1. Web API

学习目标：

Web APIs阶段与JavaScript语法阶段的关联性有哪些？
能够说出什么是API？
能够说出什么是Web API？

1.1 Web APIs 和JavaScript基础的关联性

JavaScript的组成：ECMAScript、DOM、BOM

ECMAScript（JavaScript语法）	DOM（页面文档对象模型）+ BOM（浏览器对象模型）
这是*JavaScript基础*	这是 *Web APIs*
1. 学习的是 ECMAScript 标准规定的基本语法	1. Web APIs 是 W3C 组织的标准
2.要求掌握JS基础语法	2.Web APIs主要学习的是 DOM 和 BOM
3.目的是为了JS后面的课程打基础、做铺垫	3. 主要学习页面交互功能，以JS基础的课程内容为基础

1.2 API 和 Web API

API：（Application Programming Interface 应用程序接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节

API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

例如：手机充电的接口，我们不关心充电线是如何制作的，也不关心手机内部变压器，内部怎么存储电等，我们只知道，当数据线插进充电接口时就可以充电，这个充电接口就是一个API

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM 和 DOM）

1.3 API 和 Web API 小结

API 是为程序员提供的一个接口，帮助我们实现某种功能，会使用就可以了，不必纠结如何实现
Web API 主要针对于浏览器提供的接口，主要针对于浏览器做交互效果
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法和函数
可以用学习内置对象方法的思路去学习Web API

2. DOM

学习目标：

能够说出什么是DOM？
如何获取页面元素？
如何给元素注册事件？
怎么操作DOM元素的属性呢？
如何创建元素？
怎么来操作DOM节点？

2.1 DOM 简介

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML / XML）的标准编程接口。

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

通过DOM接口可以改变网页的内容、结构和样式。

DOM 树

在这里插入图片描述

DOM 里面的一些专有名词：

文档：一个页面就是一个文档，在DOM中使用 document 表示
元素：页面中的所有标签都是元素，在DOM中使用 element 表示
节点：页面中的所有内容都是节点（标签、属性、文本、注释等），在DOM中使用 node 表示

DOM把以上内容都看作是一个对象→所以叫做文档对象模型

2.2 获取元素

如何获取页面元素

实际开发中DOM主要用来操作元素，但是得先获取才可以操作，获取页面的元素有以下几种方式：

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取
console.dir() 打印我们返回的元素对象更好的查看里面的属性和方法

①通过ID获取

document.getElementByld()方法 （通过Id获取元素）

Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

语法：

var document  = document.getElementById(id)

参数：

element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.

id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

返回的是一个元素对象（object）

<body>
    <div id="timer">2022-03-07</div>
    <script>               // 因为文档自上而下加载 所以得先有标签 所以把script写到标签下面
        var timer = document.getElementById('timer');
        console.log(timer);
        console.log(typeof timer);         // object  返回的是一个元素对象 
        // console.dir()打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);                // div#timer    
    </script>

</body>

注意： （1）‘id’ 拼写一定要准确，大小写不能写错

（2）getElementById() 只有在作为 document 的方法时才能起作用，而在DOM中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的 “局部” 版本。

②通过标签名获取

1、document.getElementsByTagName() （通过标签名获取元素们）

返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。 整个文件结构都会被搜索，包括根节点。返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName() 。

语法：

var elements = document.getElementsByTagName(name);

简单来说：返回的是带有标签名的对象集合，是以伪数组的形式存储；
得到的元素是动态的，只需要更改HTML代码，不需要更改JS代码即可自动更新。
如果想要一次打印标签里面的元素对象，可以采取遍历的方式
如果页面只有一个<li></li>，返回的还是伪数组
如果页面中没有这个元素，则返回一个空的伪数组

获取某个元素（父元素）内部所有指定标签名的子元素：

2、element(父元素).getElementsByTagName('标签名');

注意： 父元素必须是单个对象，获取的时候不包括父元素自己

<body>
    <ul>
        <li>知否知否应是绿肥红瘦1</li>
        <li>知否知否应是绿肥红瘦2</li>
        <li>知否知否应是绿肥红瘦3</li>
        <li>知否知否应是绿肥红瘦4</li>
        <li>知否知否应是绿肥红瘦5</li>
    </ul>

    <ol id="ol">
        <li>父元素必须是指定的单个元素</li>
        <li>父元素必须是指定的单个元素</li>
        <li>父元素必须是指定的单个元素</li>
        <li>父元素必须是指定的单个元素</li>
        <li>父元素必须是指定的单个元素</li>
    </ol>

    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);          // document.getElementsByTagName()获取到标签内的所有元素
        console.log(lis[2]);       // 如果要获取指定的某一行元素，需要指定

        // 依次打印里面的元素对象可以采用遍历的方式
        for (var i = 0; i < lis.length; i++) {
   
            console.log(lis[i]);
        }

        // 获取 <ol> 里面的元素用element(指定父元素).getElementsByTagName()
        // var ol = document.getElementsByTagName('ol');
        // console.log(ol[0].getElementsByTagName('li'));

        // 上面获取ol中li的方法不常用，实际开发中常用以下的方法：   在 ol 中添加 id
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

③ 通过HTML5 新增的方法获取（IE9以上）

1、doucument.getElementsByClassName() （通过类名获取元素们）

2、document.querySelector('选择器') 返回指定选择器的第一个元素对象，里面的类选择器、id选择器要添加符号 .box #nav

3、document.querySelectorAll('选择器') 返回指定选择器的所有元素对象

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        // 1. 通过类名获取元素集合  document.getElementsByClassName();
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

		// 2. querySelector('选择器'); 返回指定选择器的第一个元素对象
		// 切记切记：里面的类选择器、id选择器要添加符号  .box   #nav
		var firstBox = document.querySelector('.box');
        console.log(firstBox);

        var nav = document.querySelector('#nav');
        console.log(nav);

        var li = document.querySelector('li');
        console.log(li);     // <li>首页</li>     返回的是指定选择器的地一个元素对象

		// 3. querySelectorAll('选择器'); 返回指定选择器中的所有元素对象
		// 	等价于方法1 通过类名获取元素
		var allBoxs = document.querySelectorAll('.box');
        console.log(allBoxs);      // NodeList[2]

    </script>
</body>

④ 获取 body 元素

document.body;

<body>
    <script>
        var bodyEle = document.body;
        console.log(bodyEle);           // <body>...</body>
        console.dir(bodyEle);           // body
    </script>
</body>

⑤ 获取 html 元素

document.documentElement;

<!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>
</head>

<body>
    <script>
        // var htmlEle = document.html;     // undefined
        var htmlEle = document.documentElement;
        console.log(htmlEle);               // 输出了一整个html页面代码内容
    </script>
</body>

</html>

获取页面元素方法小结

方法	语法	注意点
①通过id获取	var element = document.getElementById(id);	id 必须是字符串，所以要带’'，且大小写敏感，不能写错，因为id唯一，所以返回值是一个标签元素
②通过标签名获取	var elements = document.getElementsByTagName(name);	返回的是带有标签名的对象集合，以伪数组方式存储
	elements=element.getElementsByTagName(tagName);	element是指被指定的父元素
③通过HTML5新增方法获取（要考虑兼容性）	document.getElementsByClassName(‘类名’)	返回的也是集合
	document.querySelector(‘选择器’)	类选择器：.box；id选择器：#div 返回指定选择器的第一个元素
	document.querySelectorAll(‘选择器’)	返回指定选择器的所有元素
④获取特殊元素	document.body;
	document.documentElement;	输出的是一整个html页面代码

2.3 事件基础

事件

例如：鼠标经过了，下拉菜单才会弹出；只有鼠标点击了轮播图才会轮播；想要操作一个元素，在很多情况下，需要一些特殊的情况才能触发它，这就需要事件来帮我们完成

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

事件：是触发响应的一种机制

网页中每个元素都可以产生某些可以触发JavaScript的事件，例如点击一个按钮会弹出对话框

事件三要素

① 事件源

事件被触发的对象，是谁被触发了呢？例如点击一个按钮会弹出对话框，那么被触发的是按钮→通过获取对象的方法获取事件源

② 事件类型

怎么触发的？什么事件？比如说：是鼠标点击触发呢？还是鼠标经过触发呢？还是键盘按下触发？

鼠标点击（onclick）

③ 事件处理程序

要做什么事情？通过一个函数赋值的方式完成，比如：弹出对话框

<body>
    <button id="btn">唐伯虎</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function () {
   
            alert('点秋香');
        }
    </script>
</body>

执行事件的步骤

1、获取事件源：通过2.2获取元素对象的方法来获取事件源（盒子div、按钮button等等）

2、注册事件（绑定事件）

3、添加事件处理程序（采取函数赋值的形式）（盒子显示或隐藏等等）

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

分析事件三要素

（1）鼠标点击按钮弹出对话框的三要素：按钮、点击、弹出对话框

（2）下拉菜单显示菜单栏三要素：放菜单栏的那个盒子、鼠标经过、显示菜单栏

（3）关闭广告三要素：×号盒子、鼠标点击、广告那个盒子隐藏起来

2.4 操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

注意：以下都是属性

改变元素内容

① 从起始位置到终止位置的内容，但它去除HTML标签，同属空格和换行也会去掉

element.innerText;
// element 表示的是那个元素/标签里面的内容发生了变化
// 是属性，所以采取赋值的方法

② 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

element.innerHTML;

小总结： 常用 innerHTML

`innerText`	`innerHTML`
无法识别html标签，会将标签也当做文字直接输出	可以识别html标签
非标准，由IE发起，老版本火狐不支持	W3C标准
空格换行都会去掉	保留了空格和换行
console.log 读取出来的是代码运行出来的内容	console.log 读取出来的是标签里面的代码

*注意：*这两个属性是可读写的

// 可以赋值，也可以获取元素里面的内容
<body>
    <div>下面会换行吗？</div>
    <p>
        这是文字
        <span>123</span>
        <span>456</span>
    </p>
    <script>
        var div = document.querySelector('div');
        // div.innerText = '<u>今天</u>10号';
        div.innerHTML = '<b>今天</b>10号';

        // 这两个属性是可读写的  可以获取元素内容
        var p = document.querySelector('p');
        console.log(p);