DOM对象

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
formsform表单对象的数组
imagesimage对象的数组
linkslink对象的数组
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:域名

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/55856.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

回南天,即使没有除湿机,也能除湿

前几天收到网友私信&#xff0c;询问烘干机干衣吹热风&#xff0c;这个比较好理解&#xff0c;热气吹到衣服上加速水分蒸发。但空调除湿为什么不吹热风了&#xff0c;而吹冷风呢&#xff1f;以及除湿机的原理等的问题。 因为我在南京总是觉得干&#xff0c;加湿器24小时不停&a…

The 2024 ICPC Kunming Invitational Contest K. Permutation(交互 期望)

在知乎内查看 题目 思路来源 题解 首先特判n1的情况&#xff0c;其实也不用问 分治&#xff0c;假设当前解决到[l,r]&#xff0c;要递归的vector是x&#xff0c; 维护两个vector L、R&#xff0c;代表下一步要在[l,mid]和[mid1,r]分治的vector 每次将x random_shuffle后&a…

易基因:J Hazard Mater/IF12.2:RRBS揭示农药诱导胰腺全基因组DNA甲基化跨代改变与代谢表型相关

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 人造化学品的不当使用会对生物多样性和人类健康构成重大威胁&#xff0c;某些化学物质&#xff08;如农药&#xff09;可能通过表观遗传机制&#xff08;如DNA甲基化&#xff09;对代谢健…

如何批量找到企业联系电话

在拓展业务的过程中&#xff0c;找到企业的联系电话是必不可少的一步。然而&#xff0c;手动查找不仅耗时费力&#xff0c;效率也低下。对于需要批量获取客户信息的销售人员或企业来说&#xff0c;寻找一种快速、精准的方式批量获取企业联系电话显得尤为重要。本文将为你介绍几…

MPLS LDP协议

文章目录 LDP标签分发协议工作原理LDP应用倒数第二跳弹出 LDP标签分发协议 基于FEC自动分配标签构建LSP用于建立动态LSPLDP报文头部结构信息类型 工作原理 LDP工作过程 发送Hello消息用于发现邻居&#xff1b;UDP发送LSR_1主动发起并建立TCP连接&#xff1b;TCP进行建立主动方发…

怎么利用商品详情API接口实现数据获取与应用?

在当今数字化的商业时代&#xff0c;高效获取和利用商品数据对于企业和开发者来说至关重要。商品详情 API 接口为我们提供了一种便捷的方式来获取丰富的商品信息&#xff0c;从而实现各种有价值的应用。本文将深入探讨如何利用商品详情 API 接口实现数据获取与应用。 一、商品…

STM32 HAL库UART查询方式实例

本文中介绍USART编程涵盖了三种主要方法&#xff0c;详细介绍STM32F407微控制器结合HAL库&#xff0c;通过UART的查询方式来实现一个实用的密码验证程序。提示用户键入一个字符作为密码。只有当用户精准地输入字符6时&#xff0c;系统才会反馈“密码正确”的确认信息。反之&…

【重学 MySQL】五十六、位类型

【重学 MySQL】五十六、位类型 定义赋值与使用注意事项应用场景 在MySQL数据库中&#xff0c;位类型&#xff08;BIT类型&#xff09;是一种用于存储位字段值的数据类型。 定义 BIT(n)表示n个位字段值&#xff0c;其中n是一个范围从1到64的整数。这意味着你可以存储从1位到64…

requestidlecallback与分时函数

前言 我们知道GUI 渲染线程与 JS 引擎线程是互斥的。当JS程序执行时间过长&#xff0c;会阻塞页面渲染和事件响应。那么针对一些优先级较低的任务&#xff0c;我们可以利用分时函数在主线程空闲时执行&#xff0c;减少卡顿。其本质是将一个长任务拆分成数个短任务&#xff0c;…

国产工具链GCKontrol-GCAir助力控制律开发快速验证

前言 随着航空领域技术的不断发展&#xff0c;飞机的飞行品质评估和优化成为了航空领域的一个重要任务&#xff0c;为了确保飞行器在各种复杂条件下的稳定性&#xff0c;控制律设计过程中的模型和数据验证需要大量仿真和测试。 本文将探讨基于世冠科技的国产软件工具链GCKont…

Leetcode 37. 解数独

1.题目基本信息 1.1.题目描述 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 33 宫内只能出现一次。&#xff08;请参考…

如何设置 GitLab 密码长度?

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 学习极狐GitLab 的相关资料&#xff1a; 极狐GitLab 60天专业…

cudnn8编译caffe过程(保姆级图文全过程,涵盖各种报错及解决办法)

众所周知,caffe是个较老的框架,而且只支持到cudnn7,但是笔者在复现ds-slam过程中又必须编译caffe,我的cuda版本是11.4,最低只支持到8.2.4,故没办法,只能编译了 在此记录过程、报错及解决办法如下; 首先安装依赖: sudo apt-get install git sudo apt-get install lib…

facebook受众选择设置策略的最佳方式

在进行Facebookguanggao投放时&#xff0c;受众的选择是一个至关重要的步骤。正确的受众选择不仅能够帮助我们更好地定位目标用户&#xff0c;还能显著提高guanggao的转化率和投资回报率&#xff08;ROI&#xff09;。然而&#xff0c;受众选择的数量和范围同样是需要认真考虑的…

【Tor】使用Debian系统搭建obfs4 Bridge网桥

你好 我是无聊的木子。 目录 前言 写作の原因 网桥是个啥? 正文 - 到底咋搭建捏 搞台机子先 比较简便の方法 - 买台云服务器 首月五折 一元试用 远程连接服务器 更加复杂の办法 - 自己拿物理机做网桥 开始搭建网桥 先安装Tor 然后配置网桥 最后组合网桥 找到fin…

大数据面试-笔试SQL

一个表table: c_id u_id score&#xff1b;用SQL计算每个班级top5学生的平均分&#xff08;腾讯&#xff09; select class_id,avg(score) as score_avg from (select *,row_number() over(partition by class_id order by score desc) as score_rank from table ) t1 where t…

AI推理部署工具之大汇总,后面会逐步补充

目录 1、FastDeploy 1.1 安装 1.2 yolo推理部署示例 1.3 推理部署思路 1、FastDeploy FastDeploy 通过提供简洁的API接口&#xff0c;让AI推理部署变得更加高效和灵活。适用于多种主流算法模型&#xff0c;且支持跨平台、多硬件兼容等优势。 支持 GPU、CPU、Jetson、ARM …

研发中台拆分之路:深度剖析、心得总结与经验分享

背景在 21 年&#xff0c;中台拆分在 21 年&#xff0c;以下为中台拆分的过程心得&#xff0c;带有一定的主观&#xff0c;偏向于中小团队中台建设参考&#xff08;这里的中小团队指 3-100 人的团队&#xff09;&#xff0c;对于大型团队不太适用&#xff0c;毕竟大型团队人中 …

Qt源码-Qt多媒体音频框架

Qt 多媒体音频框架 一、概述二、音频设计1. ALSA 基础2. Qt 音频类1. 接口实现2. alsa 插件实现 一、概述 环境详细Qt版本Qt 5.15操作系统Deepin v23代码工具Visual Code源码https://github.com/qt/qtmultimedia/tree/5.15 这里记录一下在Linux下Qt 的 Qt Multimedia 模块的设…

Java | Leetcode Java题解之第472题连接词

题目&#xff1a; 题解&#xff1a; class Solution {Trie trie new Trie();public List<String> findAllConcatenatedWordsInADict(String[] words) {List<String> ans new ArrayList<String>();Arrays.sort(words, (a, b) -> a.length() - b.length(…