日常记录 -- javascript --webAPI DOM的理解

最新推荐文章于 2024-08-22 14:32:34 发布

置顶老李头mu

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/weixin_46608782/article/details/108478145

版权

DOM 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Web API

1 篇文章 0 订阅

订阅专栏

javascript --webAPI DOM的理解

1. API
2. Web Api
- Javascript 的组成
3. DOM
- DOM 的经常进行的操作
4. 获取页面的元素
总结：

1. API

API 概念： 应用程序编程接口，是一些预先定义的函数
作用： 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。

任何开发语言都有自己的API
API的特征输入和输出(I/O)
- var max = Math.max(1, 2, 3);
API的使用方法(console.log(‘adf’))

2. Web Api

WEB API 是什么？
针对浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
是针对浏览器的接口，针对浏览器做交互效果，
有什么作用？
操作浏览器和页面元素来达到交互的效果。

Javascript 的组成

ECMAScript (定义了JavaScript 的语法规范)
BOM (浏览器的对象模型)
DOM (文档对象模型)

3. DOM

DOM：文档对象模型。
DOM是把HTML或文档抽象成对象模型，对象里提供了属性和方法，处理可扩展标记语言的准备接口。
属性和方法的作用：处理可扩展标记语言。。
作用是什么？
可以给网页添加动态的效果，通过DOM的这些接口可以修改网页的内容、结构和样式。

由document来代表文档，打印对象：console.dir( )
DOM称为一个文档树模型

文档：一个页面、网页都可以称为文档
节点：网页中的所有内容都是节点（标签，文本，属性，注释等）
元素：网页中的标签
属性：标签的属性

DOM 的经常进行的操作

获取元素
对元素进行操作（设置属性或调用方法）
创建动态元素
事件（当什么时机进行什么操作）

4. 获取页面的元素

1. 为什么要获取元素？
有时在网页中，操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作
2. 如何获取元素？

2.1 根据ID名来获取元素 getElementById( )

<div id='main'> world </div>

var main = document.getElementById('main');
console.dir(main);
// 返回结果：div#main - div 标签里的id名为main的元素

注意：
获取对象的类型：
在控制台里，打印的结果代码下拉最后有一个名为__proto__ 。
main 文档对象的类型： proto: HTMLDivElement
TML中的div 的元素
特点：区分大小写，注意书写方式

2.2 根据标签名来获取元素 getElementsByTagName( )

如页面中需要显示或隐藏多个相同元素，需要同时获取那些元素。如何同时获取多个元素？

<div> 1 </div>
<div> 2 </div>
<span> 3 </span>

var divs = document.getElementsByTagName('div');
console.dir(divs);
// 返回结果：HTMLCollection() 集合，伪数组  类似数组但不是数组，因此可以遍历打印每个对象的元素
  for (var i = 0; i < divs.length; i++) {
            console.log(divs[i]);
        }

注意
getElementsByTagName 获取的集合是动态的，
如何动态呢？
比如： <script> 标签中的内容放在<head> 标签里面，之前获取的结果为null，但此时getElementsByTagName的打印结果是正常的
与上面的测试一样，HTMLCollection 集合，里面包含div的元素属性，因是动态的，如下面添加元素属性，就会继续往下执行。

2.3 获取嵌套关系的元素

如里面有多个嵌套关系的div，如只求其中某个嵌套里面的一些div，如用之前那个getElementsByTagName 获取元素的话，是把整个页面的元素也获取到，但此时只需要把其中某个获取出来，需要把父级的ID名获取出来先，然后再获取父级里面的标签名的元素。如：

 <div id="main">
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <span>f</span>
    </div>
    <div id="rap">
        <div>aa</div>
        <div>bb</div>
        <div>cc</div>
        <span>ff</span>
    </div>

如只获取id名为main里面的div 元素

// 首先获取 id名为main的元素，再获取main里面的div 元素
var main = document.getElementById('main');
var div = main.getElementsByTagName('div');
console.dir(div);

2.4 根据Name 来获取元素 getElementsByName( )

 <div name="one"> 1 </div>
 <div name="main">2</div>

var div = document.getElementsByName('main');
console.dir(div);
        // 返回结果：节点集合 NodeList

2.5 根据Class标签名来获取元素 getElementsByClassName( )

 <div class="wap">aa</div>

 var div = document.getElementsByClassName('wap');
 console.dir(div);
        // 结果：HTMLCollection  集合

2.6 其他方法根据选择器来获取元素

query 查询
Selector 选择器

1. querySelector 只能获取匹配到的第一个元素

<span id="foot">foot</span>
<span id="foot">cull</span>

var foot = document.querySelector('#foot');
console.dir(foot);

如页面中有多个相同的元素，但是都需要获取到，则需要 querySelectAll 来获取
2. 可以匹配页面中所有相同的元素

var foot = document.querySelectorAll('#foot');
 console.dir(foot);
// 返回节点集合  NodeList  里面包含了页面中的所有匹配到的元素

注意
根据选择器来获取元素的方法，有浏览器兼容性的问题，IE8 以后才能支持。

总结：

DOM 是一个文档对象模型，是编程的接口(API)，允许脚本控制Web页面、窗口和文档。
由document来代表文档，打印对象：console.dir( )
DOM 和 javaScript ：
DOM 实际上是一个操作文档里面所包含的内容的一个编程的API，允许开发人员从文档中读取、搜索、修改、增加和删除数据。
DOM 是一个浏览器的工具，可以给网页添加动态的效果，树型的结构，

什么是DOM？
文档对象模型，是浏览器的一个编程接口(API)
DOM可以用来干什么？
可以给网页添加动态效果通过这些功能可以对HTML文档进行动态操作，从而实现许多动态交互效果。
许开发人员从文档中读取、搜索、修改、增加和删除数据。

怎么使用DOM？
通过javascript对HTML DOM进行访问。
HTML DOM将html元素定义为对象，API以对象方法和对象属性的形式实现。
可直接调用DOM实现的方法，进行DOM操作，例如：

根据ID来获取页面的元素 - getElementById
根据标识名来获取页面的元素 - getElementByTagName
根据标签名来获取页面的元素 - getElementByName
根据class标签获取页面的元素 - getElementByClassName
也可以根 querySelector() 来获取匹配到的第一个元素
querySelectorAll() 可以获取匹配到的所有元素
但是 querySelector() 和 querySelectorAll() 有浏览器兼容性问题，IE8 以后才能支持