初识前端DOM

最新推荐文章于 2023-09-11 23:04:57 发布

烬欢yu

最新推荐文章于 2023-09-11 23:04:57 发布

阅读量246

点赞数

分类专栏： JS 文章标签： js javascript

本文链接：https://blog.csdn.net/m0_54446654/article/details/117173183

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是DOM

DOM即文档对象模型，DOM是W3C的标准，定义了表示和修改文档所需的方法。

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

DOM对象用来操作HTML和XML功能的一类对象的集合，也可以说DOM是对HTML和XML的标准编程接口。

HTML DOM是针对 HTML 文档的标准模型：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准
HTML DOM即为关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM节点

DOM Nodes

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

DOM 节点四个属性

nodeName
元素标签名，以大写形式表示，只读
nodeValue
节点的文本内容，只读
nodeType
节点的类型，只读，元素节点为1，属性节点为2
attributes
节点的属性集合，只读

DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
在这里插入图片描述

点父、子和同胞
节点树中的节点彼此拥有层级关系。

我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）。
每个节点都有父节点、除了根（它没有父节点）。
一个节点可拥有任意数量的子节点。
同胞是拥有相同父节点的节点。

DOM的基本操作

方法是我们可以在节点（HTML 元素）上执行的动作。DOM的基本操作是对节点的增删改查。

编程接口
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是能够执行的动作（比如添加或修改元素）。
属性是能够获取或设置的值（比如节点的名称或内容）。

获取元素

document代表整个文档
getElementById(id)
返回带有指定id的元素，ie8以下不区分大小写
getElementsByTagName(tagName)
返回带有指定标签名称的所有元素列表（类数组）
getElementsByClassName(className)
返回带有指定类名的所有元素列表，ie8以及ie8以下版本没有
getElementsByName(name)
只有部分标签的name有效
querySelector(selector)
通过css选择器的形式选择元素，返回满足条件的第一个元素，ie7及ie7以下版本没有。
querySelectorAll(selector)
返回满足条件的所有元素(Static NodeList)

遍历节点

遍历节点

Node.parentNode 父节点
childNodes 子节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 后一个兄弟节点
previousSibling 前一个兄弟节点

遍历元素节点

parentElement 返回当前元素的父节点
children 返回当前元素的子节点
childElementCount 当前元素子节点的个数
firstElementChild 当前元素第一个子节点
lastElementChild 当前元素最后一个子节点
nextElementSibling / previousElementSibling 前一个/后一个兄弟元素节点，除了children以外，其他属性ie7以下都不支持。

创建节点

document.createElement(tagName) 创建元素节点
document.createTextNode(text) 创建文本节点
document.createComment(comment) 创建注释节点
document.createDocumentFragment() 创建文档碎片节点
document.createEvent(event) 创建事件对象

增加节点

appendChild。appendChild执行的类似于push和剪切的操作。
insertBefore。Node.insertBefore(nodeA, nodeB) 将nodeA插入到nodeB前面。

删除节点

removeChild。删除Node下的一个子节点，返回被删除元素

替换节点

replaceChild。替换元素

元素操作

改变元素内容

element.innerText
从起始位置到终止位置的内容，但它去除HTML标签，同时空格换行也一并去除
innerText不识别HTML标签，不保留换行和空格。
element.innerHTML
起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行。
innerHTML能识别HTML标签，可以获取元素里面的内容。

表单元素操作

DOM可以操作如下表单元素的性质：

type、value、checked、selected、disabled。

样式属性操作

通过JS修改元素大小、颜色、位置等样式。

element.style 行内样式操作
element.className类名样式操作

JS修改style操作，产生的是行内式，权重较高。

操作元素总结

在这里插入图片描述

DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：onclick=JavaScript

HTML 事件的例子：

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

//当用户点击时，会改变 <h1> 元素的内容：
<script>
function changetext(id){
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
 
<h1 onclick="changetext(this)">点击文本!</h1>

事件对象

在这里插入图片描述

事件类型

鼠标事件：click, mouseover, mousedown, mouseup,mouseout,mousemove,mouseenter,mouseleave等
键盘事件：keydown,keypress,keyup,keyCode等
文本框操作事件：input, focus, blur, change window的事件：load, srcoll

事件绑定

在这里插入图片描述

1.element.on+事件类型 = js code
element.on+事件类型 = function(event){}
兼容性好，一次只能绑定一个事件处理函数

<div></div>

var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
	alert(1);
};
div.onclick = function(){
	alert(2);
};

//最后只弹出2

2.obj.addEventListener(event, function, useCapture)
type事件类型，function事件处理函数，useCapture是否在捕获或冒泡阶段执行(true or false)
ie9以下不支持，一次可以绑定多个事件处理函数

<div></div>

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click', function(){alert(1)}, false);
div.addEventListener('click', function(){alert(2)}, false);

// 1和2先后弹出

事件解绑

在这里插入图片描述

事件冒泡与事件捕获

在这里插入图片描述

事件捕获

当父子元素绑定同一事件类型时，父级元素先触发，子级元素后触发（自顶向下）

<style type="text/css">
	.box1{
		width:300px;
		height:300px;
		background:red;
	}

	.box2{
		width:200px;
		height:200px;
		background:green;
	}
	
	.box3{
		width:100px;
		height:100px;
		background:blue;
	}
</style>

<div class="box1">
	<div class="box2">
		<div class="box3"></div>
	</div>
</div>

<script>
	var div = document.getElementsByTagName('div');
	div[0].addEventListener('click', function(){alert('我是box1')}, false);
	div[1].addEventListener('click', function(){alert('我是box2')}, false);
	div[2].addEventListener('click', function(){alert('我是box3')}, false);
</script>

事件委托

在这里插入图片描述

注：文章部分参考 BH13.

烬欢yu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识前端DOM

初识前端DOM什么是DOMDOM节点DOM NodesDOM 节点四个属性DOM 节点树DOM的基本操作获取元素遍历节点创建节点增加节点删除节点替换节点元素操作改变元素内容表单元素操作样式属性操作操作元素总结DOM事件事件对象事件类型事件绑定事件解绑事件冒泡与事件捕获事件委托什么是DOMDOM即文档对象模型，DOM是W3C的标准，定义了表示和修改文档所需的方法。“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”DOM对象用来操
复制链接

扫一扫