Javascript DOM ——【Web APIs、DOM树、获取元素、document对象的属性】

最新推荐文章于 2022-04-10 13:56:39 发布

impact_factor

最新推荐文章于 2022-04-10 13:56:39 发布

阅读量837

点赞数 3

分类专栏： JavaScript 文章标签： js javascript dom

本文链接：https://blog.csdn.net/impact_factor/article/details/119083004

版权

JavaScript 专栏收录该内容

23 篇文章 5 订阅

订阅专栏

Javascript DOM

一、Web APIs
二、DOM简介
- DOM树
三、获取元素
四、document对象的属性
- console.log和console.dir区别

一、Web APIs

我们学习的是ECMAScript标准规定的基本语法，WebAPI是W3C组织的标准，要求同学们掌握Js基础语法。

Js基础学习ECMAscript 基础语法为后面作铺垫，web APIs是Js 的应用，大量使用Js基础语法做交互效果。

Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。
在这里插入图片描述
Web API与API的关系

API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调起手机的摄像头拍摄画面。
Web API：主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web
API。例如，console对象、document对象、window对象。

document.title = '设置新标题';	           // 设置页面标题
console.log(document.title);	           // 获取页面标题
document.write('<h1>网页内容</h1>');     // 将字符串写入页面

二、DOM简介

DOM：文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C定义了一系列的DOM接口，利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中，诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面，都离不开DOM。

DOM树

在这里插入图片描述

DOM中将HTML文档视为树结构，被称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档（document）：可以把一个页面当成一个文档
元素（element）：页面中的所有标签都是元素
节点（node）：网页中的所有内容，在文档树中都是节点。（如：元素节点、属性节点、文本节点、注释节点等），在DOM中会把所有的节点都看作是对象，这些对象拥有自己的属性和方法
DOM的核心对象（顶级对象）是document

三、获取元素

id获取元素

document.getElementById(‘id’)方法，是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。

<div id="box">你好</div>
<script>
   var Obox = document.getElementById('box');
   console.log(Obox);
   // 结果为：<div id="box">你好</div>
</script>

标签获取元素

根据标签名获取元素的两种方式：可以通过document对象获取元素和通过element对象获取元素。

document.getElementsByTagName('标签名');

element.getElementsByTagName('标签名');

由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push()等方法，使用Array.isArray()也可以证明它不是一个数组。
getElementsByTagName()方法获取到的集合是动态集合，也就是说，当页面增加了标签，这个集合中也会自动增加元素。

name获取元素

document.getElementsByName()方法，是通过name属性来获取元素，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和复选框。

document.getElementsByName('name名');

案例需求：在复选框中选择最喜欢的水果（多选）。

<body>
  <p>请选择你最喜欢的水果（多选）</p>
  <label><input type="checkbox" name="fruit" value="苹果">苹果</label>
  <label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
  <label><input type="checkbox" name="fruit" value="西瓜">西瓜</label>
  <script>
    var fruits = document.getElementsByName('fruit'); // 返回对象集合
    fruits[0].checked = true; // 将fruits中的第1个元素的checked属性值设置为true
  </script>
</body>

在这里插入图片描述

HTML5新增的获取方式

HTML5中为document对象新增了querySelector()、querySelectorAll()和getElementsByClassName()方法。注意：这三种方式在使用时需要考虑到浏览器的兼容性问题。

类名获取

document.getElementsByClassName()方法，用于通过类名来获得某些元素集合。

<body>
  <span class="one">英语</span> <span class="two">数学</span>
  <span class="one">语文</span> <span class="two">物理</span>
  <script>
    var Ospan1 = document.getElementsByClassName('one');
    var Ospan2 = document.getElementsByClassName('two');
    Ospan1[0].style.fontWeight = 'bold';
    Ospan2[1].style.background = 'red';
  </script>
</body>

querySelector()和querySelectorAll()

querySelector()方法用于返回指定选择器的第一个元素对象。
querySelectorAll()方法返回指定选择器的所有元素对象集合。

<body>
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div id="nav">
    <ul>
      <li>首页</li>
      <li>产品</li>
    </ul>
  </div>
</body>
<script>
    var firstBox = document.querySelector('.box'); 
    console.log(firstBox); // 获取class为box的第1个div
    var nav = document.querySelector('#nav');
    console.log(nav);        // 获取id为nav的第1个div 
    var li = document.querySelector('li');
    console.log(li);            // 获取匹配到的第一个li
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);    // 获取class为box的所有div
    var lis = document.querySelectorAll('li');
    console.log(lis);          // 获取匹配到的所有li
</script>

在这里插入图片描述

四、document对象的属性

document对象提供了一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等，document对象的常用属性如下表：

在这里插入图片描述
案例演示：以获取body元素和html元素为例进行代码演示。

<body>
  <script>
    var bodyEle = document.body;
    console.dir(bodyEle);
    var htmlEle = document.documentElement;
    console.log(htmlEle);
  </script>
</body>