Web API

一米阳光MM

已于 2022-06-16 09:55:03 修改

阅读量292

点赞数

分类专栏： JS 文章标签： js

于 2022-03-29 21:58:07 首次发布

本文链接：https://blog.csdn.net/qq_43215246/article/details/123831493

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Web API的概念

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

BOM-浏览器对象模型

browser object model，一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，如：弹窗框、控制浏览器跳转、获取分辨率

DOM-文档对象模型

document object model，一套操作页面元素的API
DOM可以把HTML看成文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

DOM的概念

文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML）的标准编程接口

DOM树

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

DOM 经常进行的操作

获取元素
对元素进行操作
动态创建元素
事件（什么时机做响应的操作）

DOM 获取页面元素

获取页面元素

根据id获取元素

方法：调用document对象的getEmlementById方法
参数：字符串类型id的属性值
返回值：对应id名的元素对象
⚠️：只有部分浏览器支持使用id名访问元素，不推荐使用
⚠️：代码执行顺序，如果js在html之前，会导致结构未加载，不能获取对应id的元素

根据标签名获取元素

方法：调用document对象的getElementByTagName方法
参数：字符串类型的标签名
返回值：同名元素组成的数组
⚠️：操作数据时需要按照数组的方法进行
⚠️：getElementByTagName方法内部获取的元素是动态增加的

元素对象内部获取标签元素

获取的元素对象，也可以调用getElementByTagName
目的：缩小选择元素的范围

根据name获取元素

方法:调用 document 对象的 getElementsByName 方法。
参数:字符串类型的 name 属性值。
返回值:name 属性值相同的元素对象组成的数组。
不建议使用:在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素。

根据类名获取元素

方法:调用 document 对象的 getElementsByClassName 方法。 • 参数:字符串类型的 class 属性值。
返回值:class 属性值相同的元素对象组成的数组。
浏览器兼容问题:不支持 IE8 及以下的浏览器

根据选择器获取元素

方法1:调用 document 对象的 querySelector 方法，通过 css 中的选择器去选取第一个符合条件的标签元素。
方法2:调用 document 对象的 querySelectorAll 方法，通过 css 中的选择器去选取所有符合条件的标签元素。
参数:字符串类型的 css 中的选择器。
浏览器兼容问题:不支持 IE8 以下的浏览器

document.querySelectorAll('#name') // id选择器

总结：

没有兼容问题

getElementById()
getElementsByTagName()

DOM事件基本应用

事件

事件：是么时候做什么事情
执行机制：触发-响应机制
绑定事件三要素：
1、事件源：给谁绑定事件
2、事件类型：绑定什么类型的事件（click单击）
3、事件函数：事件发生后执行什么内容，写在函数内部

DOM元素属性操作

非表单元素的属性

href、title、id、src等
调用方式：元素对象打点调用属性名
⚠️：部分属性名跟关键字冲突，会更换写法
1、class->className
2、for->htmlFor
3、rowspan->rowSpan
属性赋值：给元素属性赋值，等号右侧的赋值都是字符串格式

获取标签内部内容的属性

获取标签内部内容的属性：innerHTML、innerText
innerHTML：获取的内容会包含标签、换行、空白
innerText：获取的内容会过滤掉标签、换行、空白

更改标签内容

还可以通过上面两个属性给双标签内部更改或添加内容
innerHTML：有HTNL标签，会按照html语法加载
innerText：有HTNL标签，会按普通字符加载

表单元素的属性

value、type、disabled、checked、selected、

自定义属性

getAttribute(name)
setAttribute(name，value)
removeAttribute(name)

DOM节点操作

DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ElHswvo-1648557913394)(evernotecid://6ADBBE9F-56A8-4507-8C2A-27555D0A76BE/appyinxiangcom/28506892/ENResource/p1)]

节点属性

nodeType:元素节点、属性节点、文本节点
nodeName:节点名称
nodeValue:节点内容（读取或修改节点内容）

父子节点常用属性

childNodes:子节点的实时集合（包含文本、注释、标签）
children:子元素节点实时集合（只包含元素，即标签）
firstChild
lastChild
parentNode(获取的是节点)
parentElement（获取的是元素）

兄弟节点常用属性

nextSibling:返回与该节点同级的下一个节点
previousSibling:回与该节点同级的上一个节点

创建新节点的方法

document.createElement(“div”)创建元素节点
document.createAttribute(“id”) 创建属性节点
document.createTextNode(“hello”) 创建文本节点

节点常用操作1

parentNode.appendChild(child)
parentNode.replaceChild(newChild, oldChild)
parentNode.insertBefore(newNode, referenceNode)：如果没有设置referenceNode，则会插入子节点的末尾
parentNode.removeChild(child)

节点常用操作2

Node.cloneNode()，可以传参true或false，默认true，true表示深度克隆，该节点的所有后代节点也会被克隆，false只会克隆节点本身
⚠️：克隆时，标签上的属性和属性值也会被克隆，写在标签内的绑定事件也会被克隆，但是通过js动态绑定的事件不会被克隆

节点常用操作3

Node.hasChildNodes()：该节点是否有子节点
Node.contains(child)：传入的节点是否为该节点的子节点

DOM事件

给元素添加事件的三种方法

<button>传统注册事件</button>
<button>addEventListener方法监听注册事件，不需要加on，不支持IE9以下的浏览器</button>
<button>attachEvent方法监听注册事件，需要加on，只支持IE10以下的浏览器</button>
const btn = document.querySelectorAll('button')
    //传统注册事件
    btn[0].onclick = function () {
        alert('这是传统的注册事件方法')
    }
 
    //方法监听注册方法
    btn[1].addEventListener('click',function () {
        alert('这是方法监听注册事件方法')
    })
    btn[1].attachEventL('onclick',function () {
        alert('这是方法监听注册事件方法，第三个事件监听')

移除事件的两种方法

element.removeEventListener() // 第一个参数为事件名称，不需要加on、第二个参数为事件函数名称、不支持IE9以下的IE浏览器
element.detachEvent() // 第一个参数为事件名称，需要加on、第二个参数为事件函数名称、支持IE10以下的IE浏览器

DOM事件流

在这里插入图片描述

事件流的三个阶段

第一个阶段：事件捕获
第二个阶段：事件执行过程
第三个阶段：事件冒泡
addEventListener() 第三个参数为 false 时，事件冒泡（右内向外）
举例：点击子元素，会打印click-child、click-parent、click-body

<body>
  <div id="parent">
    父元素
    <div id="child">
      子元素
    </div>
  </div>
  <script type="text/javascript">
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");

    document.body.addEventListener("click",function(e){
      console.log("click-body");
    },false);

    parent.addEventListener("click",function(e){
      console.log("click-parent");
    },false);

    child.addEventListener("click",function(e){
      console.log("click-child");
    },false);
  </script>
</body>

addEventListener() 第三个参数为 true 时，事件捕获（由外向内）
举例：
点击子元素，会打印click-parent–事件捕获、click-child、click-parent—事件传播、click-body

<body>
 <div id="parent">
   父元素
   <div id="child">
     子元素
   </div>
 </div>
 <script type="text/javascript">
   var parent = document.getElementById("parent");
   var child = document.getElementById("child");

   document.body.addEventListener("click", function (e) {
     console.log("click-body");
   }, false);

   parent.addEventListener("click", function (e) {
     console.log("click-parent---事件传播");
   }, false);

   //新增事件捕获事件代码
   parent.addEventListener("click", function (e) {
     console.log("click-parent--事件捕获");
   }, true);

   child.addEventListener("click", function (e) {
     console.log("click-child");
   }, false);
 </script>
</body>