当前位置：首页 > news >正文

DOM对象

news 文章来源：https://blog.csdn.net/weixin_71949204/article/details/142528702 2025/5/14 22:46:07

DOM概述

官方定义：

DOM是W3C制定的一个规范(标准)，(Document Object Model，文档对象模型)，是提供了访问和操作网页中各元素的方法，让程序可以动态的修改或改变网页元素的内容、样式、结构。

DOM是W3C制定的一个规范(标准)，而这个规范在浏览器中，以对象的形式得以实现。

在 1998 年，W3C 发布了第一级的 DOM 规范，所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了

提供了访问HTML文档的方法, 允许开发者通过JS对HTML文档进行增, 删, 改, 查

DOM结构（倒树形结构）

HTML DOM 将 HTML 文档视作树结构。结构图中的每一项称为节点(Node)，树状结构叫节点树，结构树反映了各HTML元素之间的层次关系；DOM就通过这种树结构的层次关系，来定位、访问与控制文档中各元素及其内容

DOM按其内容可分为5个部分

核心DOM：可以同时操作HTML和XML两种文档的公共的属性和方法。；
XMLDOM：针对XML操作的接口，也是一些属性和方法
HTML DOM：HTML专用接口，也是一些属性和方法；
DOM事件模型：定义DOM能够响应的事件.比如：onclick、onload、onchange；

DOM的结构

HTML DOM 将 HTML 文档视作树结构。结构图中的每一项称为节点(Node)，树状结构叫节点树.结构树反映了各HTML元素之间的层次关系。DOM就通过这种树结构的层次关系，来定位、访问与控制文档中各元素及其内容。

DOM节点

根据 DOM，HTML 文档中的每个成分都是一个节点，HTML文档的节点类型有5个：

整个文档是一个文档节点，它对应的对象是document对象 9
每个 HTML 标签是一个元素节点 1 div=null
每一个 HTML 属性是一个属性节点 2 属性=属性值
包含在 HTML 元素中的文本是文本节点（它下面不能再有其它子节点） 3 #test=文本
注释属于注释节点 8

<a href=”http://www.baidu.com”>百度</a>
节点对象.nodeType
节点对象.nodeName

节点关系

节点彼此间都存在关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

除文档节点之外的每个节点都有父节点(parentNode)。父节点(parentNode)：当前节点的上一级元素；
大部分元素节点都有子节点。子节点(childNode)：当前节点的下一级元素（1层）；
当节点分享同一个父节点时，它们就是同辈（同级节点）。
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点

只要知道一个节点，按关系找到其它节点

节点信息

节点信息。每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）， nodeValue（节点值），nodeType（节点类型）。

节点名称 obj.nodeName

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text 元素节点的文本内容

节点值 obj.nodeValue

元素节点的 nodeValue 是 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

节点类型 obj.nodeType

DOM中定义了12种节点类型，有些类型是XML专有的，与HTML相关的节点类型如下图所示。

nodeType 是只读的
nodeType 属性规定节点的类型
元素节点的 nodeType 是 1
属性节点的 nodeType 是 2
文本节点的 nodeType 是 3

获取节点对象

获取节点

在访问节点树中节点时，起点是document对象。

获取元素节点

document.getElementById("ID")

document.getElementsByTagName("标签名称")

document.getElementsByClassName("类名");

document.getElementsByName("name属性值")

document.querySelector();

document.querySelectorAll();

document.getElementById('ID').getElementsByTagName("标签名称");

// 获取所有奇数选择器
var sel = document.querySelectorAll("ul li:nth-child(odd)");
for(var i=0; i<sel.length;i++){sel[i].style.backgroundColor = 'red';
}

封装 - 获取元素的方式

function $(selector) {return document.querySelector(selector)
}

获取属性

属性节点包括：clsaa，id，style，name等

obj.attributes[0|'id']; //获取对象的所有的属性的集合

obj.getAttribute(“id”); //获取指定属性名的属性值

obj.getAttributeNode(“id”) //从当前元素中通过名称获取属性节点

获取文本节点

var obj=document.getElementById("mydiv"); 
for(var i=0;i<obj.childNodes.length;i++){if(obj.childNodes[i].nodeType==3){document.write(obj.childNodes[i].nodeType+"<br>");}
}
//注意页面上的回车转行也算一个文本节点

取其他节点获取父、子和同胞节点对象

节点对象.parentNode //父节点
节点对象.childNodes //获取子节点
节点对象.children //获取元素中的子元素对象，不要文本
节点对象.firstChild //获取第一个子节点
节点对象.firstElementChild //获取第一个子节点，不要文本
节点对象.lastChild //获取最后一个子节点
节点对象.lastElementChild //获取最后一个子节点，不要文本
节点对象.previousSibling //获取前一个兄弟元素节点
节点对象.previousElementSibling //获取上一个兄弟元素节点；（只包含元素节点）不包含文本节点；
节点对象.nextSibling //获取下一个兄弟元素
节点对象.nextElementSibling // 获取下一个兄弟元素节点；（只包含元素节点）不包含文本节点；
节点对象.elements // 返回包含表单中所有元素的数组

操作节点对象-改变节点

获取及设置元素节点对象属性

获取元素对象属性：
- 方法1：元素对象.属性名 [class需要使用className]，仅限于当前标签存在的属性，自定义不可以使用
- 方法2：元素对象.getAttribute('属性名')
- 方法3：元素对象.dataset.index【dataset是H5新增的属性】
设置元素对象属性：
- 方法1：元素对象.属性名='属性值'
- 方法2：元素对象.setAttribute('属性名','属性值')
- 方法3：元素对象.dataset.index = '01' （通过dataSet新增自定义属性，一般以data-开头的属性名，为程序员之间默认的格式，认为这是一个自定义属性）
- 元素对象.dataset.defaultColor
移除元素对象属性： removeAttribute("name")
- delete 元素对象.dataset.XXX

案例：获取属性值

<div id='id1' class="active div1" style='color:red'>hello</div>
<script>var div = document.querySelector('#id1');console.log(div.id);console.log(div.className);console.log(div.classList); // 可读div.classList.add('show');// 添加div.classList.remove('div1');// 删除console.log(div.style);
</script>

案例：点击按钮设置data-XX 或者获取data-XX的数据

var oLabel = document.querySelectorAll('.content label');
var num = 1;
for(var i=0;i<oLabel.length;i++){oLabel[i].onclick = function(){this.dataset.index = ++num; // 设置this.setAttribute('data-index',num); // 设置console.log(this.dataset.msg); // 获取data-msg}
}

获取及设置元素节点对象内容

元素对象.innerHTML（从开始标签-结束标签包括html标签）
元素对象.outerHTML（innerHTML的全部和标签本身）
元素对象.innerText（只获取元素总的文本内容）
表单元素对象.value

节点对象操作

创建节点

方法	描述
createElement(tagName)	创建标记名tagName的Element节点。Element节点可以包含文本子节点和属性子节点例如：node_h1=document.createElement(“h1”)
createTextNode(text)	创建包含文本text的文本节点，返回得到的节点如：node_text=document.createTextNode(“hello”)
appendChild(node)	向当前节点添加子节点，子节点被添加在子节点列表的尾部。例如：node_h1.appendChild(node_text)
insertBefore(new,current)	在current节点前插入new节点。 parentNode.insertBefore(new,current)

删除节点对象

父节点对象.removeChild("子节点对象")

节点对象.remove() //移除当前元素

替换节点对象

父节点对象.replaceChild("新节点","旧节点")

克隆节点

element.cloneNode(true)

案例1：评论功能

考：使用createElement和使用innerHTML在页面上添加元素，有什么区别？

var box = document.getElementById('box');
// 1. 使用createElement创建节点的方式
for(var i=0; i<100;i++){var a = document.createElement('a');box.appendChild(a);
}
// 2. 使用innerHTML 字符串拼接的方式
for(var i=0; i<100;i++){var a = '<a>hello</a>';box.innerHTML += a;
}
// 3. 使用innerHTML 数组的方式
var arr = [];
for(var i=0; i<100;i++){arr.push('<a>hello</a>');box.innerHTML  = arr.join('');
}

总结： innerHTML创建多个元素，效率更高（不要使用拼接字符串，使用数组拼接），结构稍微复杂

createElement 创建多个元素效率稍微低一点，但是结构更清晰 innerHTML 的效率比 createElement 高

DOM元素尺寸

获取当前元素的宽度和高度,定位的left和top

属性	描述
box.clientWidth	元素的宽度
box.clientHeight	元素的高度
box.scrollWidth，box.scrollHeight	这组属性可以获取没有滚动条的情况下,元素内容的总高度;
box.offsetLeft，box.offsetTop	偏移值；这组属性可以获取当前元素边框相对于父元素边框的位置

案例：放大镜效果

<style>.content{width: 1200px;height: 800px;margin: 0 auto;}.shop{float: left;width: 400px;height: 470px;}.box{width: 300px;height: 300px;background: url('./bg.png');}.smallImg{display: flex;justify-content: space-between;}.showimg{position: relative;width: 400px;height: 400px;margin-bottom: 10px;}.mask{width: 200px;height: 200px;background:url('./bg.png');position: absolute;top: 0;left: 0;}.bigImg{position: absolute;width: 400px;height: 400px;top: 0;left: 410px;overflow: hidden;}.bigImg img{position: absolute;}
</style>
</head>
<body><div class="content"><div class="shop"><div class="showimg"><img src="./big.jpg" alt=""><div class="mask"></div><div class="bigImg"><img id="bigs" src="./varybig.jpeg" alt=""></div></div><div class="smallImg"><img src="./small1.jpg" alt=""><img src="./small2.jpg" alt=""><img src="./small5.jpg" alt=""><img src="./small2.jpg" alt=""><img src="./small1.jpg" alt=""><img src="./small2.jpg" alt=""></div></div></div>
</body>
<script>var showimg = document.getElementsByClassName('showimg')[0];var mask = document.getElementsByClassName('mask')[0];var bigImg = document.getElementsByClassName('bigImg')[0];var bigs = document.getElementById('bigs');showimg.onmousemove = function(event){// 1. 获取鼠标的x，y值var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;// 2. 把获取到的x，y添加给遮罩层// mask.style.left = x- mask.offsetWidth/2 +'px';// mask.style.top = y- mask.offsetHeight/2 +'px';// 3. 判断遮罩层的边界var maskX = x - mask.offsetWidth/2;var maskY = y - mask.offsetHeight/2;if(maskX <= 0){maskX = 0;}else if(maskX >= showimg.offsetWidth -  mask.offsetWidth){maskX = showimg.offsetWidth -  mask.offsetWidth;}if(maskY <= 0){maskY = 0;}else if(maskY >= showimg.offsetHeight -  mask.offsetHeight){maskY = showimg.offsetHeight -  mask.offsetHeight;}mask.style.left = maskX+'px';mask.style.top = maskY+'px';/*** 4. 计算小图和大图之间的比例关系* 遮罩层：100px* 大图窗口：400px* 遮挡层移动距离/遮挡层最大移动距离 = 大图片移动距离/大图片最大移动距离* bx当前位置 = 800*sx当前位置/400* 大图片移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层最大移动距离*/ // 大图片最大移动距离var bigMax = bigs.offsetWidth - bigImg.offsetWidth;var bigMax = bigs.offsetWidth - bigImg.offsetWidth;// 大图片的移动距离 x yvar bigx = maskX * bigMax / (showimg.offsetWidth -  mask.offsetWidth);var bigy = maskY * bigMax / (showimg.offsetHeight -  mask.offsetHeight);bigs.style.left = -bigx+'px';bigs.style.top = -bigy+'px';}
</script>

DOM元素的其他获取方式

document文档对象的属性OM

document对象拥有大量的属性，这些属性主要用于描述HTML文档中的标题、URL以及HTML文档中的图片、超链接、表单元素等。

属性名	说明
anchors	该属性返回一个数组，代表当前文档中的锚 //anchors.length
forms	form表单对象的数组
images	image对象的数组
links	link对象的数组
lastModified	返回当前文档的最后一次修改时间
title	设置或返回当前文档的标题

常用元素节点对象

document.documentElement html

document.head head

document.title title

document.body body

常用元素节点对象集合

document.all

document.forms

document.images

document.links

document.anchors

遍历节点对象集合

for(var i=0;i<节点对象集合.length;i++){ 节点对象集合[i] 
} for(i in 节点对象集合){ 节点对象集合[i]
}

状态码-status

1XX消息: 这一类型的状态码，代表请求已被接受，需要继续处理。

2XX成功: 200请求已成功

3XX重定向: 301被请求的资源已永久移动到新位置。

4XX请求错误: 404 Not Found。请求失败，请求所希望得到的资源未被在服务器上发现

5XX 服务器错误

端口号

客户端：80http / 443https

数据库：3306

ftp：21

url构成：

https://www.baidu.com:80/index/index.html?page=1&num=10

http / https 协议
:80 端口号，80默认端口号
index：文件夹的名称
index.html：被访问的文件的名称
?后面：传递的参数，get传參;多个参数用&连接
www.baidu.com：域名