HTML DOM基础入门

quanxiaoqing

已于 2023-12-02 10:26:43 修改

阅读量41

点赞数

分类专栏： Javascript 文章标签： html 前端 javascript es6

于 2023-12-01 23:07:06 首次发布

本文链接：https://blog.csdn.net/quanxiaoqing/article/details/134744764

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML DOM基础入门

什么是HTML DOM
Script使用DOM可以实现能力
事件冒泡vs事件捕获
事件句柄的跨浏览器解决方法:
HTMLCollection 和 NodeList 的区别

什么是HTML DOM

当网页被加载的时候，浏览器会创建页面的文档对象模型（Document Object Model），我们简称DOM，在script脚本使用DOM对象完成页面内容、样式或者行为的操作（开启script的编程），HTML DOM模型是一个模型树，DOM的操作建立在模型树的结构上，如下：

从DOM模型的树型图可以看出，DOM的编写需要先获取到某一个层的Element然后再对 elemnt的text或者attribute进行操作，通过下面的示例我们来体验下

Script使用DOM可以实现能力

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

使用DOM获取HTML 元素

实现DOM的对元素、属性、样式或者行为的操作，首先需要获取对应的元素，
获取HTML元素方法：

通过id找到 HTML 元素，语法：var x=document.getElementById(“intro”);
通过标签名找到HTML元素，语法：var x=document.getElementsByTagName(“p”);
通过类名找到HTML元素，语法：var x=document.getElementsByClassName(“intro”);
注意：Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

代码示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML DOM Study</title>
</head>
<body>
	<div id="mydiv">
	<p id="myp">Hello World!</p>
	<p class="myp2">DOM Study：getElementById</p>
	</div>
	
	<script>
	/*
	通过标签名获取HTML元素
	var y=document.getElementById("mydiv");
	var x=y.getElementsByTagName("p");
	document.write("<p>文本来自 id 为 my 段落: " + x[0].innerHTML + "</p>");
	通过类名获取HTML元素
	var x=document.getElementsByClassName("myp2");
	document.write("<p>文本来自 id 为 my 段落: " + x[0].innerHTML + "</p>");
	*/
	// 通过ID获取HTML元素
	var x=document.getElementById("myp");
	document.write("<p>文本来自 id 为 my 段落: " + x.innerHTML + "</p>");
	</script>
</body>
</html>

getElementsByTagName() 方法返回 HTMLCollection 对象，getElementsByClassName()）返回的是 NodeList 对象，两种对象对可以简单看做是数组，可以通过下标idx访问。

改变页面的HTML元素

直接在HTML创建内容，语法：document.write(Date());
修改HTML元素内容，使用元素innerHTML属性，语法：document.getElementById(“p1”).innerHTML=“新文本!”;

改变页面的HTML属性

语法：document.getElementById(id).attribute=新属性值;
其他中attribute代表属性，例如<img arc=“xx”>中的src

改变页面的CSS样式

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

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="myp">Hello City!</p>
<img id="myimage" src="t.gif"></img>
<p id="p2">Hello World!</p>
<script>
// HTML输出流
document.write(Date());
// 改变元素内容
document.getElementById("myp").innerHTML="Hello World!";
//改变元素属性
document.getElementById("myimage").src="s.jpg";
// 改变元素样式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>
</html>

对页面的事件处理

向HTML标签中增加事件属性，可以调用Javascript代码
例如<p οnclick=“func()”>点击触发javascript的func方法</p>

HTML事件属性：

当用户点击鼠标时：onclick
当网页已加载时事件和退出页面：onload、onunload
当鼠标移动到元素上时和移开事件：onmouseover、onmouseoutut
获取到元素焦点的事件和失去焦点事件：onfocus、onblur
鼠标按钮被按下事件和松开事件：onmousedown、onmouseup

事件概括起来包括了：鼠标事件、键盘事件、框架/对象（Frame/Object）事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体（Media）事件、动画事件、过渡事件¹

代码示例

<!DOCTYPE html>
<html>
<head>
	<script>
	function changetext(id) {
	    id.innerHTML="Hello World！";
	}
	</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

分配事件示例：
<button id="mybtn">点这里</button>
<p id="demo"></p>
<script>
// 使用HTML DOM来分配事件
document.getElementById("mybtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>

分配事件的好处是不用在标签中增加事件属性，在不改原来代码的情况下增加对于事件，或者用单独js文件中管理，更加高效。

另一种处理事件的方式为：向元素添加事件句柄
语法：element.addEventListener(“click”, function(){ alert(“Hello World!”); });

其中第一个参数为上面提到的事件属性去掉on；
第二个参数为script函数地址，不带“（）”

可以同一个元素添加多个事件句柄，addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：
element.addEventListener(“click”, myFunction);
element.addEventListener(“click”, mySecondFunction);
你可以向同个元素添加不同类型的事件：
element.addEventListener(“mouseover”, myFunction);
element.addEventListener(“click”, mySecondFunction);
element.addEventListener(“mouseout”, myThirdFunction);

代码示例

<body>
<p>使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="mytn">hello</button>
<script>
document.getElementById("mytn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>
</body>

创建新的HTML元素（节点）

appendChild() 方法，它用于添加新元素到尾部。
insertBefore() 方法，它用于添加新元素到开始位置。
replaceChild() 方法来替换 HTML DOM 中的元素。

事件冒泡vs事件捕获

事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。例如：

<div onclick="myClick()">
<p onclick="myClick()">hello</p>
</div>

点击“hello”（<p>元素）, 哪个元素的 “click” 事件先被触发呢？

在冒泡中：内部元素的事件会先被触发，然后再触发外部元素，即：<p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型，语法：addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

事件句柄的跨浏览器解决方法:

增加事件语法：document.getElementById(“myDiv”).addEventListener(“click”, myFunction, true);

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用attachEvent() 和 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);
}