昼猫笔记--什么是DOM

昼猫笔记--给你带来不一样的笔记

不止是笔记 更多的是思考

Hello,大家好,昼猫,今天来加深下DOM

什么DOM呢?它的全称叫 Document Object Model

通过全称可以知道它是 文档对象模型，通过DOM可以来任意来修改网页中各个内容

是不是很牛掰,通过学习它可以达到一些网页的特效

   

DOM简介

文档

        文档指的是网页，一个网页就是一个文档

对象

        对象指将网页中的每一个节点都转换为对象 , 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了

模型

        模型用来表示节点和节点之间的关系，方便操作页面

节点（Node）

        节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点

虽然都是节点，但是节点的类型却不同

常用的节点

    文档节点 （Document），代表整个网页

    元素节点（Element），代表网页中的标签

    属性节点（Attribute），代表标签中的属性

    文本节点（Text），代表网页中的文本内容

DOM操作

DOM查询

在网页中浏览器已经为我们提供了document对象

        它代表的是整个网页，它是 window对象的属性，可以在页面中直接使用。

 

 

document查询方法

    根据元素的id属性查询一个元素节点对象：

    document.getElementById(id属性值);

    根据元素的name属性值查询一组元素节点对象:

    document.getElementsByName(name属性值);

    根据标签名来查询一组元素节点对象：

    document.getElementsByTagName(标签名);

 

 

 

元素的属性

    读取元素的属性：

        语法：元素.属性名

        例子： ele. name  

              ele. id  

                   ele. value 

                           ele. className

  

    修改元素的属性：  语法：元素.属性名 = 属性值 

innerHTML使用该属性可以获取或设置元素内部的HTML代码

事件Event

        事件指的是用户和浏览器之间的交互行为。比如： 点击按钮、 关闭窗口、 鼠标移动...

我们可以为事件来绑定回调函数来响应事件。

绑定事件的方式：

    1.可以在 标签的事件属性中设置相应的JS代码        

<button onclick=js代码...>昼猫笔记</button>

    

2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件

<button id=btn>按钮</button>
<script>
    var btn = document.getElementById(btn);
    btn.onclick = function(){
    };
</script>

昼猫笔记