DAY22-DOM

 

 

 

 

 

catch不一定发生，finally一定执行

 

 

 

 创建节点方法：

 

 

 

 

 

 

 

 

 此时js语句并没有执行

大多数content.innerHTML不会执行

 

 DOM是指文档对象模型（Document Object Model），它是用来表示和操作HTML、XML等文档的一个API，它允许开发者使用JavaScript和其他脚本语言改变HTML页面的内容、结构和样式。

在前端开发中，我们通常使用DOM来完成以下任务：
- 访问和操作HTML元素及其属性
- 改变HTML元素的内容和样式
- 动态创建、添加和删除HTML元素
- 响应用户事件，如点击、鼠标移动等
- 向服务器发送请求并处理服务器返回的数据

由于DOM是前端开发中的一个核心概念，所以了解它的作用和使用方式对于成为一名专业的前端开发人员是非常重要的。

 

 先找到div对象

打印 结果：

 标签元素都被去掉了（这就是innertext的作用）

赋予新的值之后：

 

 DOM节点是指HTML中的元素、属性、文本和注释等，在DOM树结构中都表现为一个节点对象。每个节点对象都有自己的类型、名称、属性和子节点等属性，我们可以通过访问和操作这些节点来改变HTML文档的结构、样式和内容。

在前端开发中，我们经常需要使用JavaScript来操作DOM节点，以便实现动态、交互式的Web页面。例如，我们可以创建、添加、删除、移动或改变HTML元素的属性和内容等操作。设置DOM节点可以帮助我们实现如下的一些功能：
- 动态地添加或删除HTML元素，以便实现动态效果
- 改变HTML元素的样式和属性，以控制其外观和行为
- 监听和响应用户的事件，以处理用户的行为
- 更新和显示Web页面中的数据，以实现数据绑定和交互

火狐浏览器不支持innertext，但是支持content.textContent;

 可以利用dom进行增删改查

要兼容所有浏览器，需要通用方法

 例：

 

 

几乎和innertext没有区别

 

 

 

 

 每个节点都有child属性

 

 验证结果：

 说明找到了文档根元素

 

 

也能获得head元素 

现代浏览器，空格都会被视为文本节点

所以childNodes【1]返回的是text

 

 

 space：节点之间分割的字符串

node：保存遍历的当前节点

 

 

 

 

 childen与childnode的区别：返回值不包含空白节点

 

这样便能实现遍历所有的li 

 

 Nodelist是类数组对象，他不是真正的数组

例：不具备push方法

如果要让Nodelist成为数组：将每个元素遍历存入数组：

 

 

 

 

得到tr元素下面所有子元素

 

 

 打印结果：

 

 

打印结果：

 

 box.attributes:

返回的是namedNodemap

 

 

 

 

 执行会陷入死循环

实际上每次循环会重新计算div个数，divs.length会和i一起增长

 

 

 

 

 

 

 

 

不同的浏览器有不同的结果

 

 

 

 

 

 

 

 

 

根据标签的名字来获得元素

 

 

 

 

 

 

 

根据类名查找对象

传入多个类名时不区分先后顺序