HTML DOM 学习前端必须要了解的架构DOM【简单，好学，全面

这里的节点，很好理解，整个HTML文档就是一个文档节点，往后，还有元素节点，文本节点，属性节点，注释节点等等。

将上面这些节点，按照父子同胞祖先来分类，可以得到一个HTML DOM 节点树。

HTML DOM Tree 树的图片如下：

下图解释以下，节点与节点之间的指针问题，更好理解是怎么运行的：

3.HTML DOM方法

=========================================================================

方法是我们可以在节点（HTML元素）上执行的动作。

以下是常用方法：必须记住功能！！！

4.HTML DOM 属性

==========================================================================

执行时，一般格式如下：

对象.方法.属性();

1.innerHTML属性

---

获取元素内容，替换html元素的最简单方法是使用 innerHTML 属性。

2.nodeName 属性

---

获取或规定节点名称

节点：有文本节点，元素节点，文档节点，属性节点。

3.nodeValue 属性

---

获得或规定节点的值。

元素节点的值是：undefined或null。

文本节点值：文本本身。

属性节点值：是属性的属性值。

4.nodeType 属性

---

4.HTML DOM 访问

==========================================================================

三个方法：

getElementByID()方法

getElementsByTagName()方法

getElementsByClassName()方法

5.HTML DOM 元素

==========================================================================

1.appendChild()方法 插入结尾元素

---

appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加

就是添加元素，直接上例子：

This is a paragraph.

This is another paragraph.

2.insertBefore()方法 插入开头元素

---

和appendChild()方法相反，元素放在开头。

3.removeChild()方法 删除元素

---

如需删除 HTML 元素，您必须清楚该元素的父元素,也就是先找到父元素，然后通过父元素使用removeChild()方法，来删除元素。

4.replaceChild()方法 替换元素

---

和removeChild()方法一样，先确定父元素，然后替换。

6.HTML DOM 事件

==========================================================================

这里介绍几个事件。

1.onclick事件

---

一般事件执行方式有两种。

1.第一种方式 直接调用

接调用事件。

例如：

点击我

2.第二种执行方式 调用函数

调用函数的方式。

例如:

点击我

2.onload 和 onunload 事件

---

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

3.onchange 事件

---

常用于输入字段的验证。

修改下面的input内容字母，为大写。

例如：

输入英文自动转换为大写：

4.onmouseover和onmouseout事件

---

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】