JS HTML DOM

2020-04-11 本文已影响0人千年幸福论

一、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 元素都被定义为对象）的属性和方法。

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

三、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表示事件使用捕获传播。

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

事件传播：定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“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

<html> 是根节点，没有父，是 <head> 和 <body> 的父。<head> 是 <html> 的第一个子。<body> 是 <html> 的最后一个子

3、在节点之间导航

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

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

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

属性节点的 nodeName 是属性名称

文本节点的 nodeName 总是 #text

文档节点的 nodeName 总是 #document

②nodeValue 属性：规定节点的值

元素节点的 nodeValue 是 undefined

文本节点的 nodeValue 是文本文本

属性节点的 nodeValue 是属性值

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

4、子节点和节点值

常见错误：认为元素节点中包含文本。————正解：元素节点 <title> 不包含文本，包含了值为 "DOM 教程" 的文本节点。

文本节点的值能够通过节点的 innerHTML 属性进行访问。

var myTitle = document.getElementById("demo").innerHTML;

访问 innerHTML 属性等同于访问首个子节点的 nodeValue。

var myTitle = document.getElementById("demo").firstChild.nodeValue;

等同于：var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

5、DOM 根节点

有两个特殊属性允许访问完整文档：

document.body - 文档的 body

document.documentElement - 完整文档（包含head部分）

6、创建新 HTML 元素（节点）

①流程

创建创建元素（元素节点p）：var para = document.createElement("p");

创建文本节点：var node = document.createTextNode("这是一个新段落。");

向 <p> 元素追加文本节点：para.appendChild(node);

②appendChild（）方法

向节点添加最后一个子节点（添加至末尾）

node.appendChild(node) node为希望添加的节点对象

③insertBefore()方法

在指定的已有子节点之前插入新的子节点。

node.insertBefore(newnode,existingnode)

newnode：需要插入的节点对象。

existingnode：在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。

7、删除和替换已有 HTML 元素

①removeChild() 方法

删除指定元素的某个指定的子节点。需找到父元素（利用其 parentNode 属性找到父）

node.removeChild(node)

以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

从父元素中删除子元素：parent.removeChild(child);

②replaceChild() 方法

用新节点（已存在或者新创建）替换某个子节点。

node.replaceChild(newnode,oldnode)

newnode：希望插入的新节点对象

oldnode：希望被代替的节点对象。

六、JavaScript HTML DOM 集合

1、getElementsByTagName() 方法

返回 HTMLCollection 对象。集合对象是类数组的 HTML 元素列表（集合）。并非数组。

例：var x = document.getElementsByTagName("p"); //选取文档中的所有 <p> 元素，该集合中的元素可通过索引号进行访问。

y = x[1]; //访问第二个 <p> 元素

2、length 属性

定义了HTMLCollection 中元素的数量，适用于遍历集合中的元素时。

七、JavaScript HTML DOM 节点列表

1、NodeList 对象

NodeList 对象是从文档中提取的节点列表（集合），与 HTMLCollection 对象几乎相同。

①getElementsByClassName() 方法

某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。

②childNodes 属性

全部浏览器返回 NodeList 对象

③querySelectorAll() 方法

大多数浏览器返回 NodeList 对象。

NodeList 中的元素可通过索引号进行访问。

2、length 属性

定义节点列表中的节点数，遍历节点列表中的节点时很有用。

3、HTMLCollection 与 NodeList 的区别

HTMLCollection是 HTML 元素的集合，NodeList 是文档节点的集合。

二者都是类数组的对象列表（集合），都有定义列表（集合）中项目数的 length 属性，通过索引访问每个项目。

访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。访问 NodeList 项目，只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。