html dom next,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 事件作出反应。

事件属性：用于向 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、子节点和节点值

DOM 教程

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

不包含文本，包含了值为 "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("这是一个新段落。");

向

元素追加文本节点：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");  //选取文档中的所有

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

y = x[1];  //访问第二个

元素

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 对象能包含属性节点和文本节点。