DOM(Document Object Model)初识

目录

一、初识Web API

1、概念

2、API与WebAPI

二、DOM：文档对象模型

1、理解

三、元素(标签)的获取

1、常用方法

2、HTML5中新增方法

四、document对象的属性

五、事件

六、操作元素

1、操作元素内容

2、操作元素的属性

3、操作元素的样式

 

---

 

一、初识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、常用方法

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

2、HTML5中新增方法

要考虑浏览器的兼容性。

1.     querySelector()：可以根据id、class属性、标签名获取元素。
2.     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>

六、操作元素

1、操作元素内容

利用DOM提供的属性实现对元素内容的操作。

 a、innerHTML：设置或返回元素开始和结束标签之间HTML。包括HTML标签，同时保留空格和换行。
 b、innerText：纯文本内容(去掉了格式和标签)
 c、textContent：属性在去掉标签后会保留文本格式

2、操作元素的属性

3、操作元素的样式

 a、操作style属性：元素对象.style.样式属性名'样式属性名'对应CSS的属性名,在CSS中样式属性名的单词之间用'-'分隔的;在JavaScript中样式属性名采用驼峰命名,即第二个单词的首字母大写。
                
 b、操作元素的className属性：元素对象.className