第六周------DOM

目录

一、DOM简介

二、DOM文档

1、查找HTML元素

2、改变HTML元素

3、添加和删除元素

4、添加事件处理程序

三、DOM HTML

四、DOM事件

五、事件监听程序

六、DOM元素

七、DOM集合

---

一、DOM简介

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

HTML文档会被结构化为一棵节点树：整个文档是文档节点；每个HTML元素是元素节点，HTML中的文本是文本节点，每个HTML属性都是属性节点，所有的注释都是注释节点。

 通过网页的DOM模型，JavaScript可以操纵页面上的元素：改变HTML 元素的内容，改变 HTML 元素的样式（CSS），对 HTML DOM 事件作出反应，添加和删除 HTML 元素。

DOM 对象、属性、方法：

在 HTML DOM 中，所有 HTML 元素被定义为对象，编程接口是对象的属性、方法、事件。

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

方法是能够完成的动作（类似函数，比如添加或删除 HTML 元素）。

二、DOM文档

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

1、查找HTML元素

• document.getElementById：通过元素id来查找元素
• document.getElementByTagName：通过标签名来查找元素
• document.getElementByClassName：通过类名来查找元素
• document.querySelectorAll:通过css选择器查找HTML元素（全部）
• document.querySelector:通过css选择器查找HTML元素（第一个）

2、改变HTML元素

• element.innerHTML=new html content：改变元素的innerHTML
• element.attribute = new value：改变 HTML 元素的属性值
• element.setAttribute(attribute, value)：改变 HTML 元素的属性值
• element.style.property = new style：改变 HTML 元素的样式

3、添加和删除元素

document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

4、添加事件处理程序

document.getElementById(id).onclick = function(){code}：向 onclick 事件添加事件处理程序 

三、DOM HTML

1、改变HTML输出流：document.write（）可用于直接写入HTML输出流。

2、改变HTML内容：最常使用的方法是document.getElementById.innerHTML=new text

3、改变属性值：document.getElementById(id).attribute = new value

例如：document.getElementById("myImage").src = "landscape.jpg";

四、DOM事件

1、onclick事件：点击

2、onload和onunload事件：onload事件用于检测访问者的浏览器类型和浏览器版本，然后基于该信息，onload和 onunload事件可用于处理 cookie。

3、onchange事件：经常与输入字段验证结合使用。

4、onmouseover 和 onmouseout 事件：可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数。

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

五、事件监听程序

1、addEventListener()方法为指定元素指定事件处理程序，为元素附加事件处理程序而不会覆盖已有的事件处理程序。

语法：element.addEventListener(event, function, useCapture);

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

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

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

2、冒泡、捕获

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的。

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的。

默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

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

六、DOM元素

1、创建新HTML元素：必须首先创建这个元素（元素节点），然后将其追加到已有元素。

appendChild（）方法，可以追加新元素作为父的最后一个子。

insertBefore（A,B）方法，A是添加的元素，B是添加元素下方的元素。

2、删除已有的HTML元素：remove（）方法，必须从父元素中删除子元素，或者用

其 parentNode 属性找到父节点，如child.parentNode.removeChild(child)。

3、替换HTML元素，使用replaceChild（）方法，首先将文本放入新创建的元素当中，将此元素添加为父元素的一个子节点，之后将要被替代的元素用一个变量保存起来，之后使用此方法替代即可。

七、DOM集合

1、getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象是类数组的 HTML 元素列表（集合）。若想访问第几个元素，通常使用数组下标的形式。

2、HTMLCollection长度，length 属性定义了 HTMLCollection 中元素的数量。

      DOM Node List长度，length属性定义节点列表中的节点数。

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

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

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