DOM(Document Object Model)初识

最新推荐文章于 2024-11-17 21:03:46 发布

命中。

最新推荐文章于 2024-11-17 21:03:46 发布

阅读量150

点赞数

分类专栏： javascript 文章标签： javascript 前端 dom

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/122873544

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、初识Web API

1、概念

Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，ECMAScript：是JavaScript的核心，定义一套语法规范，JavaScript实现了这些语法规范。而Web API包括BOM和DOM两部分。

2、API与WebAPI

API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调起手机的摄像头拍摄画面。

Web API：主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web API。例如，console对象、document对象、window对象。

<script>
    document.title = 'WebAPI';//设置页面标题
    console.log(document.title);//获取页面标题
    document.write('<h2>hello world</h2>')//将字符串写入页面

</script>

二、DOM：文档对象模型

1、理解

(1)是W3C组织推出的指针HTML/XHTML语言的标准的编程接口。

(2)通过DOM接口可以对HTML页面元素进行访问、设置。

(3)DOM树：html文档就是一棵树(文档模型树)。

文档(document)：一个html页面就是一个文档
元素(element)：页面中的所有标签。
节点(node)：页面中的所有内容都是节点(标签、标签的属性、标签里的文本、注释)，在DOM中所有的节点都是对象,每个对象都有属性和方法。

三、元素(标签)的获取

1、常用方法

通过id获取：document.getElementById('id')。
根据标签名获取：getElementsByTagName('标签名'),该方法返回伪数组(不能使用Array中方法)。
根据标签的name属性获取：getElementsByName(),该方法的返回是数组。
根据标签的class属性获取：getElementsByClassName(),该方法的返回值是数组。

2、HTML5中新增方法

要考虑浏览器的兼容性。

querySelector()：可以根据id、class属性、标签名获取元素。
querySelectorAll()：选择所有元素。

四、document对象的属性

a、title：页面的标题,即页面的title元素(标签)

           b、body：页面的body元素(标签)

           c、documentElement:页面的htmo元素(标签)

           d、forms：页面中的form元素(标签)

           e、images：页面中的img元素(标签)

五、事件

事件是指可以被JavaScript侦测到的行为，是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、鼠标指针滑过某个区域等具体的动作，它对实现网页的交互效果起着重要的作用。

事件三要素：

a、事件源：触发事件的元素(谁触发了事件)

           b、事件类型：触发了什么类型的事件

           c、事件处理函数(事件响应函数)：事件被触发后做什么

<script>
    var btn = document.getElementById('btn'); // 第1步：获取事件源
    // 第2步：注册事件btn.onclick
    btn.onclick = function () { // 第3步：添加事件处理程序（采取函数赋值形式）
        alert('弹出');
    };
  </script>