[华为云在线课程][JavaScript的DOM编程][学习笔记]

第1章，JavaScript的DOM对象

1.1，JavaScript的DOM节点和DOM树

HTML的DOM定义：

HTML Document Object Model（文档对象模型）

HTML DOM定义了访问和操作HTML文档的标准方法

HTML DOM把HTML文档呈现，带有元素、属性和文本的树形结构

Document（文档）：表示的就是整个HTML网页文档

Object（对象）：表示网页中每一部分都转换成立一个对象

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

DOM树

DOM节点定义：

HTML文档中的每个部分都是一个节点

DOM的规定如下：

整个文档是一个文档节点

每个HTML标签是一个元素节点

包含在HTML元素中的文本是文本节点

每一个HTML属性是一个属性节点

DOM节点关系：

节点树中的节点彼此拥有层级关系

父（parent），子（child）和同胞（sibling）等术语用于描述这些关系，父节点拥有子节点，同级的子节点被称为同胞。

节点层级关系描述：

在节点树中，顶端节点被称为根（root）

每个节点都有父节点、除了根（它没有父节点）

一个节点可拥有任意数量的自节点

同胞是拥有相同父节点的节点

1.2，JavaScript的DOM节点查找

JavaScript的DOM节点查找两种方式：

1，直接查找节点

按照id查找，拿到的是一个标签对象；document.getElementById(idname);

按照class标签去找，获取的是一个数组里存放的标签；document.getElementByClassName(classname);

通过标签名去找，获取的也是一个数组；document.getElementByTagName(tagname);

按照name属性去找，获取的也是一个数组；document.getElementByName(name);

获取html的方法：document.documentElement;

获取body的方法：document.body;

通过选择器获取一个元素：querySelector;

通过选择器获取一组元素：querySelectorAll;

JavaScript的DOM直接查找节点案例：

你喜欢哪个城市？

• 北京
• 上海
• 杭州
• 深圳

你喜欢哪款单机游戏？

• 红警
• 实况
• 极品飞车
• 魔兽

JavaScript的DOM节点查找两种方式：

2，导航查找节点：通过某一个标签的位置去查找另一个标签

父节点标签元素：parentElement;

所有子标签：children;

第一个子标签元素：firstElementChild;

最后一个子标签元素：lastElementChild;

下一个兄弟标签元素：nextElementSibling;

上一个兄弟标签元素：previousElementSibling;

JavaScript的DOM导航查找节点案例：

你喜欢哪个城市？

• 北京
• 上海
• 东京
• 首尔

你喜欢哪个城市？

• 北京
• 上海
• 东京
• 首尔

1.3，JavaScript的DOM节点操作

创建节点：createElement(标签名)：创建一个指定名称的元素

添加节点：

追加一个子节点（作为最后的子节点），node.appendChild(newnode);

把增加的节点放到某个节点的前边，node.insertBefore(newnode,某个节点);

删除节点：removeChild()：获得要删除的元素，通过父元素调用删除

替换节点：node.replaceChild(newnode,某个节点);

JavaScript的DOM节点操作案例：

1.4，JavaScript的DOM节点属性操作

1，获取文本节点的值：innerText innerHTML

innerText：不管你是赋值还是取值，只能识别纯文本

innerHTML：既可以识别纯文本，也可以识别标签

2，属性（attribute）操作：

elementNode.setAttribute(name,value);

elementNode.getAttribute(属性名);

elementNode.removeAttribute("属性名");

3，获取当前选中的value值：

input

select

textarea

请选择值： 南京 北京

4，对class的操作：

className：打印样式名称

add：添加样式

remove：移除样式

5，对样式css的操作：

标签对象.style.样式属性=“具体值”;

Hello World!

第2章，JavaScript的DOM事件

2.1，JavaScript的DOM事件流

事件流描述的是从页面中接受事件的顺序

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流：

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子

JavaScript的DOM事件流的事件冒泡案例：

JavaScript的DOM事件流的事件捕获案例：

2.2，JavaScript的DOM事件处理程序

1，HTML事件处理程序：

HTML事件处理程序就是直接把事件添加到HTML结构中

2，JavaScript传统事件处理程序：

JavaScript中非常传统的方式，就是在一个元素上直接绑定方法，即先获取元素，再以属性方式添加事件

该方式也叫做DOM0级事件处理程序

直接通过onclick把事件绑定在html上

通过给事件赋值null的形式就可以清理我们DOM0级事件，oBtn.onclick=null;

同一级元素的同一种事件只能绑定一个函数，否则后面的函数就会覆盖前面的函数

不存在兼容性问题

缺点：一个事件处理程序只能对应一个处理函数

3，W3C事件处理程序：

W3C中推荐使用addEvenListener()函数进行事件绑定，使用removeEventListener()函数删除事件

这种方式也叫做DOM2级事件处理程序，它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值

2.3，JavaScript的DOM事件流阻止

1，JavaScript的DOM事件流阻止：

事件流阻止，这里阻止的是它的继续传播以及有可能产生的默认动作

W3C中定义了两个方法：stopPropagation()和preventDefault()用于阻止事件流

event.stopPropagation()，方法用于阻止事件冒泡

event.preventDefault()，方法用于阻止事件的默认行为

JavaScript的DOM事件流阻止案例

2，JavaScript的DOM事件委托

事件委托，通俗来讲，就是把一个元素响应事件的函数委托到另一个元素

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数

事件委托的优点：减少内存消耗；动态绑定事件

JavaScript的DOM事件委托案例：

• 111
• 222
• 333
• 444

• 111
• 222
• 333
• 444

JavaScript

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。