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

 

 

目录

DOM文档对象模型

节点

如何查找 HTML 元素

DOM查询

DOM添加

事件

---

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

DOM文档对象模型

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

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

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

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

节点

如何查找 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中常见的事件已在之前的博客中说到

事件对象event

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

事件的冒泡（Bubble）

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

事件的委派

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

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

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