JS HTML DOM

一、DOM简介

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

1、当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

对象的 HTML DOM 树

2、DOM 标准被分为 3 个不同的部分：Core DOM - 所有文档类型的标准模型、XML DOM - XML 文档的标准模型、HTML DOM - HTML 文档的标准模型

3、什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：作为对象的 HTML 元素、所有 HTML 元素的属性、访问所有 HTML 元素的方法、所有 HTML 元素的事件。

二、HTML DOM 方法

HTML DOM 方法是能够（在 HTML 元素上）执行的动作。

HTML DOM 属性是您能够设置或改变的 HTML 元素的值。

DOM 编程界面：通过 JavaScript 进行访问，是每个对象（所有 HTML 元素都被定义为对象）的属性和方法。

   //getElementById 是方法，innerHTML 是属性。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括  和 。

三、HTML DOM 应用

HTML DOM 文档对象是网页中所有其他对象的拥有者。

1、HTML DOM Document 对象

文档对象代表网页，访问 HTML 页面中的任何元素是从访问 document 对象开始。

使用 document 对象访问和操作 HTML元素。

2、如何查找 HTML 元素？

五种方法：

①通过 id 查找 HTML 元素

var myElement = document.getElementById("demo");  //元素被找到会以对象返回在 myElement 中，未找到返回null。

②通过标签名查找 HTML 元素

getElementsByTagName方法

③通过类名查找 HTML 元素

getElementsByClassName方法

④通过 CSS 选择器查找 HTML 元素

querySelectorAll() 方法用于 查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素。

括号内为css选择器

⑤通过 HTML 对象集合查找 HTML 元素

还有诸多

3、如何改变 HTML 元素？

①改变 HTML 输出流

document.write(Date());  //创建动态 HTML 内容，document.write() 可用于直接写入 HTML 输出流

②改变 HTML 内容

document.getElementById(id).innerHTML =new text

使用 innerHTML 属性修改 HTML 文档内容

③改变属性的值

document.getElementById(id).attribute=new value

4、如何 改变 HTML元素样式（CSS）？

①改变 HTML 样式

document.getElementById(id).style.property=new style

document.getElementById("p2").style.color = "blue";

②使用事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

事件对象：https://www.w3school.com.cn/jsref/dom_obj_event.asp

事件属性：用于向 HTML 元素分配事件。

使用 HTML DOM 分配事件：document.getElementById("myBtn").onclick = displayDate; //名为 displayDate 的函数被分配到 id="myBtn" 的 HTML 元素。

5、创建 HTML 动画

①创建容器

动画应该与容器元素关联。

②设置样式

style = "position: relative" 创建容器元素

style = "position: absolute" 创建动画元素

③创建动画

通过对元素样式进行渐进式变化编程，这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。

setInterval(code，millisec) 方法：按照指定的周期（以毫秒计）来调用函数或计算表达式。会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

四、JavaScript HTML DOM 事件监听器

1、addEventListener() 方法

①语法

element.addEventListener(event,function,useCapture);

event：表示事件类型，如click或mousedown。勿对事件使用 "on" 前缀：使用 "click" 代替 "onclick"。

function：当事件发生时我们需要调用的函数，可以直接是函数表达式，也可以是外部命名函数。

useCapture：是布尔值，指定使用事件冒泡还是事件捕获。可选。默认值是 false，使用冒泡传播， true表示事件使用捕获传播。

②事件冒泡还是事件捕获？

事件传播：定义当发生事件时元素次序的方法。假如

元素内有一个

，然后用户点击了这个

元素，应该首先处理哪个元素“click”事件？HTML DOM 中有冒泡和捕获两种事件传播的方法。

冒泡：由内向外。先处理p，再处理div。

捕获：由外向内。

③作用

为指定元素 指定事件处理程序：为元素附加事件处理程序而不会覆盖已有的事件处理程序。因此可向相同元素添加不同类型的事件。

向一个元素添加多个（可相同类型）事件处理程序。

更容易控制事件如何对冒泡作出反应。

addEventListener() 允许将事件监听器添加到任何 HTML DOM 对象上：如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象（xmlHttpRequest 对象 ）。

④参数传递

当传递参数值时，需要以参数形式调用指定函数的“匿名函数”：

此处传递的是一个匿名函数，里面包含函数运行结果，但是该匿名函数需等click事件发生后执行

错误情况：

此处参数为函数运行的结果，无关click是否执行

2、removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序

语法：element.removeEventListener("mousemove", myFunction);

IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。使用 attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() 方法删除。element.attachEvent(event,function);

element.detachEvent(event,function);

五、JavaScript HTML DOM 导航

使用节点关系来导航节点树

1、DOM 节点

HTML 文档中的所有事物都是节点：整个文档是文档节点；每个 HTML 元素是元素节点；HTML 元素内的文本是文本节点；每个 HTML 属性是属性节点；所有注释是注释节点。

JavaScript可创建新节点、修改和删除所有节点。

2、节点关系

父、子和同胞，parent、child 以及 sibling

是根节点，没有父，是 和 的父。 是 的第一个子。 是 的最后一个子

3、在节点之间导航

使用节点属性在节点之间导航：parentNode、childNodes[nodenumber]、firstChild、lastChild、nextSibling、previousSibling

①nodeName 属性：规定节点的名称，只读，包含 HTML 元素的大写标签名

元素节点的 nodeName 等同于标签名

属性节点的 nodeName 是属性名称

文本节点的 nodeName 总是 #text

文档节点的 nodeName 总是 #document

②nodeValue 属性：规定节点的值

元素节点的 nodeValue 是 undefined

文本节点的 nodeValue 是文本文本

属性节点的 nodeValue 是属性值

③nodeType 属性：返回节点的类型，只读

4、子节点和节点值

 

常见错误：认为元素节点中包含文本。————正解：元素节点