Web APIs 基础部分知识回顾

2022-04-18 85 阅读2分钟

前言:现阶段的JavaScript的语言标准规范都是由ECMAScript提供了一套标准来进行规范的.浏览器在此基础上进行了功能上的拓展,这就是web apis了.同理在node.js上叫Server APIs.web apis的核心是Dom和Bom.今天主要聊一聊DOM的部分操作.

DOM的概念

什么是DOM?DOM就是文档对象模型.通俗点来讲就是将整个HTML文档当做一个对象,这个对象里面包含很多的属性和方法,通过操作属性和调用方法来实现网页特效和用户交互.

DOM树

其实每一个标签都是一个对象,也叫做元素节点,document是最大的对象.是JavaScript的内置对象.想画个图的,但是好像这不知道juejin上咋话,我就截个图吧.

元素节点就是图中的每一个标签
属性节点标签中的属性,比如a标签里面的href
文本节点文字内容,比如p标签里面的文字
根节点就是html标签那么,想要操纵一个元素就需要先获取这个元素

获取DOM对象

获取一个元素 document.querySelector
获取多个元素 document.querySelectorAll.
还有一些以前使用的获取元素的方式,就不写了有两个特殊的写法:

获取html标签 document.documentElement
获取body标签 document.body 注意:
获取多个元素 document.querySelectorAll.得到的是一个伪数组.可以通过遍历数组的方式拿到元素.与真数组的区别是,不能通过数组里的方法arr.push()等等对伪数组进行操作.
任意的DOM对象都包含nodeType属性,用来检测节点类型. 获取了元素之后就要对元素进行操作了

操纵元素

innerText,添加或更新文本内容(文本中包含的标签不会被解析)

<body>
  <div>123</div>
  <script>
    const div = document.querySelector('div')
    console.log(div.innerText);
  </script>
</body>

<body>
  <div>123</div>
  <script>
    const div = document.querySelector('div')
    console.log(div.innerText);
    div.innerText = '<h2>abc</h2>'
  </script>
</body>

添加或更新文本内容(文本中包含的标签会被解析)

<body>
  <div>123</div>
  <script>
    const div = document.querySelector('div')
    div.innerHTML = '<h2>abc</h2>'
    console.log(div.innerHTML);
  </script>
</body>

常用属性修改

能够直接通过属性名进行修改

<body>
  <div id="box" title="div盒子" class="wuwu">123</div>
  <script>
    const div = document.querySelector('div')
    div.id = 'bb'
    div.title = 'lailai'
    console.log(div.id)
    console.log(div.title)
  </script>
</body>

控制样式属性通过修改行内样式style属性,实现对样式的修改. 如果遇到-连接符时改成驼峰命名.如background-color,改成backgroundColor.

<body>
  <div>123</div>
  <script>
    const div = document.querySelector('div')
    div.style.backgroundColor = 'red'
    div.style.height = '200px'
    div.style.width = '200px'
    div.style.color = 'yellow'
    div.style.textAlign = 'center'
    div.style.lineHeight = '200px'
  </script>
</body>

操控类名

className来操控,不过className是新值替换旧值,会覆盖旧类名.
通过classList来操控(不会覆盖)

<body>
  <div class="baby">123</div>
  <script>
    const div = document.querySelector('div')
    //增加类名
    div.classList.add('old')
    删除类名
    div.classList.remove('old')
    切换类名(无则加上,有则删除)
    div.classList.toggle('old')
    //contains检测是否含有这个类名
    let re = div.classList.contains('young')
    console.log(re)
  </script>
</body>

自定义属性 html5定义了新的规范,data-自定义属性

自定义标签统一以data-开头
获取方式统一为dataset获取

<body>
  <a href="javascript:;" data-type="index">首页</a>
  <script>
    const a = document.querySelector('a')
    a.dataset.type = 'wahaha'
  </script>
</body>