HTML DOM（文档对象模型）

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

通过 HTML 对象选择器查找 HTML 对象

本例查找 id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值，包含在

document.elements中，通过x.elements[i].value来调用，比如一个个input输入的值

DOM动画

应该通过 style = “position: relative” 创建容器元素。

应该通过 style = “position: absolute” 创建动画元素。

上左偏移量在极短的时间内迅速增大而造成了视觉上的“动画”

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

onload 和 onunload 事件可用于处理 cookie。

例如：if (navigator.cookieEnabled == true)

onchange 和onfocus事件经常与输入字段验证结合使用，鼠标移出输入框时触发，输入框获得焦点时触发

<input type="text" id="fname" onchange="myFunction()" onfocus="this.style.color="yellow"">

function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}

onmouseover ，onmousemove和 onmouseout 事件

onmouseover为鼠标刚移入区域；onmousemove为鼠标在区域内移动；onmouseout为移出区域

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

JavaScript HTML DOM 事件监听器

addEventListener() 方法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

**注意：**请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

事件冒泡还是事件捕获？

DOM操作

nodeName 属性

nodeName 属性规定节点的名称。

• nodeName 是只读的

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

• 属性节点的 nodeName 是属性名称

• 文本节点的 nodeName 总是 #text

• 文档节点的 nodeName 总是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined
• 文本节点的 nodeValue 是文本文本
• 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

DOM节点

追加：appendChild()

标签之间插入某新结点insertBefore()

删除结点removeChild()

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换结点replaceChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

DOM集合

getElementsByTagName() 方法返回 HTMLCollection 对象。

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

下面的代码选取文档中的所有 <p> 元素：

实例

var x = document.getElementsByTagName("p");

该集合中的元素可通过索引号进行访问。

如需访问第二个 <p> 元素，您可以这样写：

y = x[1];

length 属性定义了 HTMLCollection 中元素的数量：

length 属性在您需要遍历集合中元素时是有用的：

实例

改变所有 <p> 元素的背景色：

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。

节点列表，与DOM集合几乎一样

NodeList 对象是从文档中提取的节点列表（集合）。

使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。

所有浏览器都会为 childNodes 属性返回 NodeList 对象。

大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。

总结：

HTMLCollection（前一章）是 HTML 元素的集合；NodeList 是文档节点的集合。

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

访问 NodeList 项目，只能通过它们的索引号。

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

觉得该篇文章有帮助到你复习操作dom节点的知识，请不要忘记忘记点击左下角的大拇指~