JavaScript基础——HTML DOM (文档对象模型)

Myth丶恋晨 2021-09-25 00:22 405阅读 0赞

**目录**

DOM文档对象模型

节点

如何查找 HTML 元素

DOM查询

DOM添加

事件

--------------------

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。js通过DOM来对HTML进行操作

### DOM文档对象模型 ###

**文档**  --文档表示的就是整个HTML网页文档

**对象 ** --对象表示将页面中的每一部分都转换为了一个对象

**模型**  --使用模型来表示对象之间的关系，这样方便我们来获取对象

**HTML DOM** 模型被构造为**对象**的树：

![20201126182934937.gif][]

### 节点 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb21zaW5n_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb21zaW5n_size_16_color_FFFFFF_t_70 1][]

### 如何查找 HTML 元素 ###

**document节点找到元素**

document.getElementById();      //通过元素id找到一个HTML元素节点对象
    document.getElementsByTagName();   //通过元素标签名找到一组HTML元素节点对象
    document.getElementsByNama();    //通过name属性找到一组HTML元素节点对象

### DOM查询 ###

//document中有一个body属性 ，他保存的是bady的引用
    //document.documentElement保存的是html根标签
    //document.all代表页面中的所有元素
    				
    var body =document.body;
    var html =document.documentElement
    var all = document.all;
    document.getElementsByClassName("");

### DOM添加 ###

document.getElementById()   // 获取某document中的子节点
    document.createTextNode()   // 创建新节点中的文本
    document.createElement()       //创建新节点
    父节点.appendChild(li);  //添加子节点
    子节点.parentNode()    //获取父元素
    父节点.removeChild ()        //删除节点
    父节点.replaceChild     //替换子节点

### 事件 ###

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间

Javascript与HTML之间的交互是通过事件实现的。Javascript中常见的事件已在[之前的博客中说到][Link 1]

**事件对象event**

当事件的响应函数被触发时、浏览器每次都会将一个事件对象作为实参传递进响应函数。在事件对象中封装了当前事件相关的一切系信息，比如鼠标的坐标、那个按键被按下、滚轮的移动

**事件的冒泡（Bubble）**

所谓事件的冒泡就是事件的向上传导，当后代元素上的事件被触发时，父代的相同事件也会被触发！

**事件的委派**

将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

**如果本篇博客对您有一定的帮助，大家记得留言+点赞哦。**

[20201126182934937.gif]: /images/20210923/d9f2b23ec3af4da28a633bcc44b30a18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb21zaW5n_size_16_color_FFFFFF_t_70]: /images/20210923/c3292cacf0f9421b84d454a161dc4ce6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb21zaW5n_size_16_color_FFFFFF_t_70 1]: /images/20210923/e2b876124c8a4d33805e51a63a8cafba.png
[Link 1]: https://blog.csdn.net/promsing/article/details/110136451