（万字!）Web APIs学习【一】（初识Web APIs，DOM操作）

最新推荐文章于 2022-04-21 17:29:23 发布

greenhand coder

最新推荐文章于 2022-04-21 17:29:23 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_43249043/article/details/108296620

版权

本文介绍了Web APIs中的DOM和BOM，详细讲解了DOM的基本概念、DOM树、元素获取与操作，包括通过ID、标签名、类名获取元素，以及节点操作，如创建、删除、复制节点。此外，还探讨了事件基础和元素内容、属性的修改。

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

文章目录

1. 初识Web APIs

1.1Js的组成

1.1.1JS基础阶段

1.1.2 Web APIs 阶段

此阶段主要内容是页面的交互
是JS的独有部分，主要包含DOM BOM
Web APIs是W3C的标准

1.1.1.1DOM（文档对象模型）

1.1.1.2 BOM（浏览器对象模型）

1.2Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)，主要针对浏览器交互效果
Web API的学习可以参考内置对象

2. DOM简介

2.1 什么是DOM

文档对象模型(Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。通过DOM接口可以改变网页的内容，样式，结构。

2.2 DOM树

1598001948959

文档：一个页面就是一个文档，DOM中用document表示
元素：页面中所有的标签都是，DOM中用element表示
节点：网页中所有内容都是节点（标签、属性、文本、注释），DOM中用node表示
DOM把以上内容都看作对象

2.3 获取元素

2.3.1通过ID获取某一个元素

使用getElementById()方法可以获取带有id的元素对象
getElementById() 方法返回 Element对象

<body>
<div id="a">a</div>
<script>
  var a = document.getElementById('a');
  console.log(a);  // => <div id="a">a</div>
  console.dir(a);  // => div#a  此方法可以查看返回的Element对象里面的属性和方法
</script>

2.3.2 获取页面中某一类元素

2.3.2.1根据标签名获取元素

使用 document.getElementsByTagName() 方法
返回获取过来的元素对象的集合，以伪数组的形式存储,如果页面中没有此元素，返回空的伪数组
当想获取页面中所有想要元素的时候：

<body>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
<ol>
  <li>li4</li>
  <li>li5</li>
  <li>li6</li>
</ol>
    
<script>
  var lis = document.getElementsByTagName('li')
  console.log(lis); // => HTMLCollection(6) [li, li, li, li, li, li]
  for(var i = 0; i < lis.length; i++){
    
    console.log(lis[i]);  // => <li>li1</li> <li>li2</li> ... <li>li6</li>
  }
</script>
</body>

当想获取某个特定元素下所有想要元素的时候
使用 element.getElementsByTagName()方法

<body>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
<ol id="ol">
  <li>li4</li>
  <li>li5</li>
  <li>li6</li>
</ol>
    
<script>
  var ol = document.getElementById('ol');
  var lis = ol.getElementsByTagName('li');
  console.log(lis); // => HTMLCollection(3) [li, li, li]
</script>
</body>

2.3.2.2 根据类名获取元素

document.getElementsByClassName()方法

<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">
  <ul>
    <li>li1</li>
    <li>li2</li>
  </ul>
</div>

<script>
  var boxs = document.getElementsByClassName('box');
  console.log(boxs);  // => HTMLCollection(3) [div.box, div.box, div.box]
</script>
</body>

2.3.3 h5新增获取元素方法（标签名，类名, id均可）

document.querySelector()方法
此时只能获取第一个出现的元素，不能获取所有对应元素

<div class="box">box1</div>
<div class="box">box2</div>
<div id="nav">
  <ul>
    <li>li1</li>
    <li>li2</li>
  </ul>
</div>

<script>
  var firstBox = document.querySelector('.box');
  console.log(firstBox); // => <div class="box">box1</div>
  var nav = document.querySelector('#nav');
  console.log(nav);  // => <div id="nav"><ul> <li>li1</li> <li>li2</li> </ul></div>
  var firstLi = document.querySelector('li')
  console.log(firstLi); // => <li>li1</li>
</script>
</body>