【前端三剑客——JS】APIs与DOM

前端小刘不怕牛牛
96 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

Web APIs

DOM和BOM组成Web APIs__是JS的应用

做页面交互功能

API

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

Web API

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ),针对与浏览器做交互效果

Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）

DOM

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

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

1. DOM 树

image-20220526134333611

  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
  • DOM把以上内容都看作对象

2. 如何获取页面元素

  1. 根据ID获取

    getElementByld()

    document.getElementById('id');

    使用console.dir()可以打印我们后去的元素对象,更好查看对象里面的属性和方法

  2. 根据标签名获取

    getElementByTagName()

    document.getElementByTagName('biaoqianming');

    注意：

    • 因为获得的是一个对象的集合，所以我们想要操作里面的元素需要先进行遍历
    • 得到元素对象是动态的
    • 如果获取不到元素，则返回空的伪数组

    还可以获取某个元素内部所有指定标签名的子元素

    element.getElementsByTagName('标签名');

    注意： 父元素必须为单个对象，也就是必须指明是哪一个

  3. H5新增方法获取

    第一种

    document.getElementsByClassName('类名')；// 根据类名返回元素对象集合

    第二种

     document.querySelector('选择器');        // 根据指定选择器返回第一个元素对象

    第三种

     document.querySelectorAll('选择器');     // 根据指定选择器返回Nodelist//结点集合

    注意： querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

  4. 获取特殊元素(body, html)

    • 获取body

      doucumnet.body  // 返回body元素对象

    • 获取html

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

事件

事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发--- 响应机制。

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

1. 三要素

  1. 事件源
  2. 事件类型
  3. 事件处理程序

步骤： 获取事件源，注册事件，添加事件处理程序（采用函数赋值形式）

2. 常见鼠标事件

image-20220526141956780

改变html输出流

直接向html输出流写内容

document.write("新设置的内容<p>标签的内容也可以</p>")

3. 操作元素

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

3.1 改变元素内容

element.innerText //从起始位置到终止的内容,换掉文本

element.innerHTML  //保留空格和换行

3.2 常用元素的属性操作

innerText\innerHTML   //改变元素内容
src   href      //改变链接
id  alt title   //改变说明

3.3 表单元素的属性操作

DOM可以操作以下表单元素

type    value    checked   selected    disabled
// document.getElementById(id).attrbute = new value();
​

3.4 样式属性操作

可以通过JS修改元素的大小、颜色、位置等样式

element.style      //行内样式操作
element.className  //类名样式操作
li:
document.getElementById('id').style.color = 'green';

注意 :

JS修改style样式操作,产生的是行内样式,CSS权重较高

JS里的样式采取驼峰命名,如fontSize backgroundColor

  • 样式修改过多时,可以采用操作类名方式更改元素样式
  • className 会直接更改元素的类名,覆盖原先的类名

3.5 排他思想

3.6 自定义属性操作

  1. 获取属性值

    • element.属性
    • element.getAttribute('属性')

  2. 区别

    • element.属性 获取内置属性值,
    • element.getAttribute('属性'); 主要获取自定义属性

  3. 设置属性值

    element.属性 = '值' 设置内置属性值

    element.setAttribute('属性', '值')

  4. 移除属性

    • element.removeAttribute('属性')

3.7 H5自定义属性

目的: 为了保存并使用数据,有些数据可以保存到页面中而不用保存在数据库中

  1. 设置H5自定义属性

    • H5规定自定义属性data-开头做为属性名并且赋值。 比如 <div data-index="1"></div>
    • 或者使用 JS 设置 element.setAttribute(‘data-index’, 2)

  2. 获取H5自定义属性

    • 兼容性获取 element.getAttribute(‘data-index’);
    • H5新增 element.dataset.index 或者element.dataset[‘index’] ie 11才开始支持

3.8 节点操作

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

节点至少拥有三个基本属性： nodeType \ nodeName \ nodeValue

元素节点 nodeType 为1---------------主要操作

属性节点 nodeType为2

文本节点 nodeType 为3 (包括文字\空格\换行)

获取元素通常使用两种方式

  1. 利用DOM(逻辑性不强,繁琐)

  2. 利用节点层级关系(逻辑性强,但兼容性稍差)

    利用父子兄节点关系

父级节点

node.parentNode

  • parentNode 属性可返回某节点的父节点，注意是最近的一个父节点 如果指定的节点没有父节点则返回 null

子节点

parentNode.childNodes

  • parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。 注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes
var ul = document.querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) { 
    // ul.childNodes[i] 是元素节点
    console.log(ul.childNodes[i]);}
}

parentNode.children(非标准)

  • parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 （这个是我们重点掌握的）

parentNode.firstChild

  • firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode.lastChild

  • lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode.firstElementChild

  • firstElementChild 返回第一个子元素节点，找不到则返回null。

parentNode.lastElementChild

  • lastElementChild 返回最后一个子元素节点，找不到则返回nu

如果想要第一个子元素节点，可以使用 parentNode.chilren[0]

如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

兄弟节点

node.nextSibling

  • nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点

node.previousSibling

  • previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点

node.nextElementSibling(兼容性问题)

  • nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。

node.previousElementSibling(兼容性问题)

  • previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null
父节点兄弟节点子节点所有子节点
parentNodenextSiblingfirstChildchildNodes
nextElementSiblingfirstElementChildchildren
previousSiblinglastChild
previousElementSiblinglastElementChlid

如何解兼容性问题

封装一个兼容性的函数

function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }  

创建节点

document.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

创建属性节点

createAttrbute()

创建文本节点

createTextNode()

添加节点

node.appendChild(child)

  • node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素

node.insertBefore(child, 指定元素)

  • node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

删除节点

node.removeChild(child)

  • 从 DOM 中删除一个子节点，返回删除的节点\
//若不知道父节点是什么 ,可以这样写
node.parentNode.removeChild(node);

复制节点

node.cloneNode()

  • 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点

注意:

  1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
  2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点

替换子节点

node.replaceChild(newnode, oldnode);

DOM常用事件

事件名说明
onclick鼠标单击
ondbclick鼠标双击
onkeyup按下并释放键盘的一个键时触发
onchange文本内容或下拉菜单中的选项发生改变
onfocus获得焦点
onblur失去焦点
onmouseout鼠标移出,即离开图片等所在地区域
onload网页文档加载事件
onunload关闭网页时
onsubmit表单提交事件
onreset重置表单时
onmouseover鼠标悬停,即鼠标停留在图片等的上方

\

avatar
文章
阅读
粉丝