目录

JavaScript HTML DOM

HTML DOM (文档对象模型)

查找 HTML 元素

通过 id 查找 HTML 元素

通过标签名查找 HTML 元素

通过类名找到 HTML 元素

HTML DOM 教程

JavaScript HTML DOM - 改变 HTML

改变 HTML 输出流

改变 HTML 内容

改变 HTML 属性

JavaScript HTML DOM - 改变CSS

改变 HTML 样式

使用事件

JavaScript HTML DOM 事件

对事件做出反应

HTML 事件属性

使用 HTML DOM 来分配事件

onload 和 onunload 事件

onchange 事件

onmouseover 和 onmouseout 事件

onmousedown、onmouseup 以及 onclick 事件

JavaScript HTML DOM EventListener

addEventListener() 方法

语法

向原元素添加事件句柄

向同一个元素中添加多个事件句柄

向 Window 对象添加事件句柄

传递参数

事件冒泡或事件捕获？

removeEventListener() 方法

浏览器支持

JavaScript HTML DOM 元素 (节点)

创建新的 HTML 元素 (节点) - appendChild()

实例解析

创建新的 HTML 元素 (节点) - insertBefore()

移除已存在的元素

实例解析

替换 HTML 元素 - replaceChild()

HTML DOM 教程

JavaScript HTML DOM 集合(Collection)

HTMLCollection 对象

HTMLCollection 对象 length 属性

实例解析

注意

JavaScript HTML DOM 节点列表

NodeList 对象 length 属性

实例解析

HTMLCollection 与 NodeList 的区别

---

JavaScript HTML DOM

---

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

---

HTML DOM (文档对象模型)

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

HTML DOM 模型被构造为对象的树：

 

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

---

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

---

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

---

通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有

元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

---

通过类名找到 HTML 元素

本例通过 getElementsByClassName  函数来查找 class="intro" 的元素：

var x=document.getElementsByClassName("intro");

---

HTML DOM 教程

您将学到：

• 如何改变 HTML 元素的内容 (innerHTML)
• 如何改变 HTML 元素的样式 (CSS)
• 如何对 HTML DOM 事件做出反应
• 如何添加或删除 HTML 元素

---

JavaScript HTML DOM - 改变 HTML

---

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

---

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Mon Jun 05 2023 17:15:21 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

JavaScript HTML DOM - 改变 HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：今天的日期是： Mon Jun 05 2023 17:15:21 GMT+0800 (中国标准时间)在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

	绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

---

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了

元素的内容：

 

Hello World!

本例改变了

元素的内容：

Old Header

实例讲解：

• 上面的 HTML 文档含有 id="header" 的

  元素
  

• 我们使用 HTML DOM 来获得 id="header" 的元素
  
• JavaScript 更改此元素的内容 (innerHTML)
  
   

---

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

本例改变了 元素的 src 属性：

实例讲解：

• 上面的 HTML 文档含有 id="image" 的 元素
• 我们使用 HTML DOM 来获得 id="image" 的元素
• JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

---

JavaScript HTML DOM - 改变CSS

---

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

---

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

下面的例子会改变

元素的样式：

Hello World!
Hello World!

以上段落通过脚本修改。

---

使用事件

HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件：

• 元素被点击。
• 页面加载完成。
• 输入框被修改。
• ……

在接下来的章节，你会学到更多关于事件的知识。

本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

我的标题 1

点我!

---

JavaScript HTML DOM 事件

---

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

---

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

οnclick=JavaScript

HTML 事件的例子：

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

在本例中，当用户在

元素上点击时，会改变其内容：

点击文本!

本例从事件处理器调用一个函数：

点击文本!

---

HTML 事件属性

如需向 HTML 元素分配 事件，您可以使用事件属性。

 // 向 button 元素分配 onclick 事件：点这里

在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。

---

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

// 向 button 元素分配 onclick 事件：

在上面的例子中，名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。

按钮点击时Javascript函数将会被执行。

---

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

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

---

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

---

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

---

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

---

JavaScript HTML DOM EventListener

---

addEventListener() 方法

// 在用户点击按钮时触发监听事件：document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

---

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

	注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

---

向原元素添加事件句柄

 

// 当用户点击元素时弹出 "Hello World!" :element.addEventListener("click", function(){ alert("Hello World!"); });

你可以使用函数名，来引用外部函数:

// 当用户点击元素时弹出 "Hello World!" :element.addEventListener("click", myFunction);function myFunction() {alert ("Hello World!");
}

---

向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

你可以向同个元素添加不同类型的事件：

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

---

向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象。

// 当用户重置窗口大小时添加事件监听：window.addEventListener("resize", function(){document.getElementById("demo").innerHTML = sometext;
});

---

传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：

element.addEventListener("click", function(){ myFunction(p1, p2); });

---

事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到 元素中，用户点击

元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： 元素的点击事件先触发 ，然后再触发

元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

---

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

---

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法
addEventListener()	1.0	9.0	1.0	1.0	7.0
removeEventListener()	1.0	9.0	1.0	1.0	7.0

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

// 跨浏览器解决方法:var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本x.attachEvent("onclick", myFunction);
}

---

使用 addEventListener 的时候，又无法使用，是因为:

x = document.getElementById("myBt");
// x ---> null

可以这么写:

window.onload = function () {var x = document.getElementById("myBt");x.addEventListener("click", myFunction);
};

所以为了兼容所有的浏览器，我们可以定义一个函数：当有 addEventListener 时调用，没有的时候调用 attachEvent。

/** 参数：*     obj：要绑定事件的对象*     eventStr：事件(注意：这里不要on)*      callback：回调函数*/
function bind(obj , eventStr , callback){if(obj.addEventListener){//大部分浏览器obj.addEventListener(eventStr , callback , false);}else{//IE8及以下obj.attachEvent("on"+eventStr , function(){//在匿名函数中调用回调函数callback.call(obj);});}
}            

JavaScript HTML DOM 元素 (节点)

本章节介绍如何向文档中添加和移除元素(节点)。

---

创建新的 HTML 元素 (节点) - appendChild()

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

这是一个段落。
这是另外一个段落。

---

实例解析

以下代码是用于创建

元素:

var para = document.createElement("p");

为

元素创建一个新的文本节点：

var node = document.createTextNode("这是一个新的段落。");

将文本节点添加到

元素中：

para.appendChild(node);

最后，在一个已存在的元素中添加 p 元素。

查找已存在的元素：

var element = document.getElementById("div1");

添加到已存在的元素中:

element.appendChild(para);

---

创建新的 HTML 元素 (节点) - insertBefore()

以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。

如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

这是一个段落。
这是另外一个段落。

---

移除已存在的元素

要移除一个元素，你需要知道该元素的父元素。

这是一个段落。
这是另外一个段落。

注意：早期的 Internet Explorer 浏览器不支持 node.remove() 方法。

实例解析

HTML 文档中 元素包含两个子节点 (两个

元素):

这是一个段落。
这是另外一个段落。

查找 id="div1" 的元素:

var parent = document.getElementById("div1");

查找 id="p1" 的

元素:

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

从父元素中移除子节点：

	如果能够在不引用父元素的情况下删除某个元素，就太好了。 不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：

---

替换 HTML 元素 - replaceChild()

我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

这是一个段落。
这是另外一个段落。

---

HTML DOM 教程

在我们的 JavaScript 教程的 HTML DOM 部分，您已经学到了：

• 如何改变 HTML 元素的内容 (innerHTML)
• 如何改变 HTML 元素的样式 (CSS)
• 如何对 HTML DOM 事件作出反应
• 如何添加或删除 HTML 元素

---

JavaScript HTML DOM 集合(Collection)

本章节介绍 DOM 集合的使用。

---

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象类似包含 HTML 元素的一个数组。

以下代码获取文档所有的

元素：

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

集合中的元素可以通过索引(以 0 为起始位置)来访问。

访问第二个

元素可以是以下代码:

y = x[1];

---

HTMLCollection 对象 length 属性

HTMLCollection 对象的 length 属性定义了集合中元素的数量。

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

实例解析

获取

元素的集合：

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

显示集合元素个数：

document.getElementById("demo").innerHTML = myCollection.length;

集合 length 属性常用于遍历集合中的元素。

修改所有

元素的背景颜色:

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

注意

HTMLCollection 不是一个数组！

HTMLCollection 看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

---

JavaScript HTML DOM 节点列表

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

NodeList 对象类似HTMLCollection  对象。

一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。

所有浏览器的 childNodes 属性返回的是 NodeList 对象。

大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

以下代码选取了文档中所有的

节点：

var myNodeList = document.querySelectorAll("p");

NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。

访问第二个

元素可以是以下代码:

y = myNodeList[1];

---

NodeList 对象 length 属性

NodeList 对象 length 属性定义了节点列表中元素的数量。

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

实例解析

获取

元素的集合：

var myNodelist = document.querySelectorAll("p");

显示节点列表的元素个数：

document.getElementById("demo").innerHTML = myNodelist.length;

length 属性常用于遍历节点列表。

// 修改节点列表中所有 
 元素的背景颜色:var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {myNodelist[i].style.backgroundColor = "red";
}

---

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

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

节点列表不是一个数组！

节点列表看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！