-
概念:Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。
* DOM 将 HTML 文档表达为树结构,称为DOM树。-
什么是DOM?
-
DOM 是 W3C(万维网联盟)的标准。DOM 定义了访问 HTML 和 XML 文档的标准:“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
-
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
- Document 文档对象
- Element 元素对象
- Attribute 属性对象
- Text 文本对象
- Comment 注释对象
- Note 节点对象。是其他5个对象的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型。HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
- 核心 DOM - 针对任何结构化文档的标准模型
-
-
核心 DOM 模型
- Note 节点对象。是其他5个对象的父对象
- 特点:所有dom对象都可以被认为是一个节点
- 方法
- CRUD dom数
- appendChild() 向节点的子节点列表的结尾添加新的子节点。
- removeChild() 删除(并返回)当前节点的指定子节点。
- replaceChild() 用新节点替换一个子节点。
- CRUD dom数
- 属性
- Document 文档对象
- 创建(获取):在html dom模型中,可以使用window对象获取
- window.document
- document
- 方法
- 获取Element对象
- getElementById() 根据id属性值,获取元素对象。id属性值一般唯一。
- getElementsByTagName() 根据元素名称,获取所有具有该名称的元素对象。返回值是一个数组
- getElementsByClassName() 根据class属性值,获取所有class属性与指定值相同的元素对象。返回值是一个数组
- getElementsByName() 根据name属性值,获取所有name属性与指定值相同的元素对象。返回值是一个数组
- 创建其他DOM对象
- createAttribute(name) 创建拥有指定名称的属性节点,并返回新的 Attr 对象。
- createComment() 创建注释节点。
- createElement() 创建元素节点。
- createTextNode() 创建文本节点。
- 获取Element对象
- 属性
- parentNode 返回节点的父节点。
- 创建(获取):在html dom模型中,可以使用window对象获取
- Element 元素对象
- 获取和创建:通过document来获取和创建
- 方法
- removeAttribute() 删除属性
- setAttribute() 设置属性
- Note 节点对象。是其他5个对象的父对象
-
HTML DOM
- 标签体的设置和获取:innerHTML
- 使用HTML元素对象的属性
- 控制样式
-
使用元素的style属性设置。(style是所有标签都有的属性。)
// 修改样式方式1。style是所有标签都有的属性。
// .style. 可以获取css的属性
div1.style.border = “1px solid red”;
div1.style.width = “200px”;// font-size --> fontSize
div1.style.fontSize = “30px”; -
提亲定义好类选择器的样式,通过元素的 className 属性来设置其class属性值。
// css代码// js代码
-
-
JavaScript —— DOM
猜你喜欢
转载自blog.csdn.net/weixin_41463971/article/details/88319238
今日推荐
周排行