学习笔记整理-DOM-01-基础知识

一、DOM基本概念

1. DOM基本概念

  • DOM是JS操控HTML和CSS的桥梁。
  • DOM是JS操作HTML变得优雅。
  • DOM(Document Object Model，文档对象模型)是JavaScript操作HTML文档的接口，使文档操作变得非常优雅、简便。
  • DOM最大的特点就是将文档表示为节点树。

dom-tree

  • 节点的nodeType属性可以显示这个节点具体的类型。
    nodeType值节点类型
    1元素节点，例如<p>和<div>
    3文字节点
    8注释节点
    9document节点
    10DTD节点

二、节点访问和位置关系

1. 访问元素节点

  • 所谓"访问"元素节点，就是指"得到"、"获取"页面上的元素节点。
  • 对节点进行操作，第一步就是要得到它。
  • 访问元素节点主要依靠document对象。

  • 认识document对象

    • document对象是DOM中最重要的东西，几乎所有DOM的功能都封装在了document对象中.
    • document对象也表示整个HTML文档，它是DOM节点树的根。
    • document对象的nodeType属性值是9。

  • 访问元素节点的常用方法

    方法功能兼容性
    document.getElementById()通过id得到元素IE6
    document.getElementByTagName()通过标签名得到元素数组IE6
    document.getElementByClassName()通过类名得到元素数组IE9
    document.querySelector()通过选择器得到元素IE8部分兼容 IE9完全兼容
    document.querySelectorAll()通过选择器得到元素数组IE8部分兼容 IE9完全兼容

  • document.getElementById()功能是通过id得到元素节点

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 给window对象添加onload事件监听。onload表示页面都加载完毕了。window.onload = function () {// 得到盒子1var box1 = document.getElementById('box1');// 得到盒子2var box2 = document.getElementById('box2');console.log(box1);console.log(box2);};</script>
</head><body><div id="box1">我是盒子1</div><div id="box2">我是盒子2</div>
</body></html>
    • 参数就是元素节点的id，注意不要写#号
    • 通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点。
    • 可以使用window.onload = function(){}事件，使页面加载完毕后，再执行指定的代码。
    • 如果页面上有相同id的元素，则只能得到第一个
    • 不管元素藏的位置有多深，都能通过id把它找到。

  • document.getElementByTagName()功能是通过标签名得到节点数组。

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box1"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><div id="box2"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><script>// 先得到box1var box1 = document.getElementById('box1');// 得到box1中的p标签的数组var ps_inbox1 = box1.getElementsByTagName('p');console.log(ps_inbox1);</script>
</body>
</html>
    • 数组方便遍历，从而可以批量操控元素节点
    • 即使页面只有一个指定标签名的节点，也将得到长度为1的数组
    • 任何一个节点元素也可以调用getElementsByTagName()方法，从而得到其内部的某种类的元素节点。

  • document.getElementByClassName()功能是通过类名得到节点数组

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="spec"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><div class="spec"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><script>// boxvar box = document.getElementsByClassName('spec');console.log(box);</script>
</body>
</html>
    • 注意不要写.号
    • document.getElementByClassName()方法从IE9开始兼容。
    • 某个节点元素也可以调用document.getElementByClassName()方法，从而得到其他内部的某类名的元素节点。

  • querySelector()方法的功能是通过选择器得到元素

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box1"><p class="spec">我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><script>var p = document.querySelector('#box1 .spec');console.log(p);</script>
</body>
</html>
    • querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素。
    • querySelector()方法从IE8开始兼容，但从IE9开始支持CSS3的选择器，但从IE9开始支持CSS3的选择器，
      如：nth-child()、:[src^='dog']等CSS3选择器形式都支持良好。

  • querySelectorAll()方法的功能是通过选择器得到元素数组。

    • 即使页面上只有一个符合选择器的节点，也将得到长度为1的数组

2. 节点的关系

关系考虑所有节点
子节点childNodes
父节点parentNodes
第一个子节点fristChild
最后一个子节点lastChild
前一个兄弟节点previousSibling
后一个兄弟节点nextSibling

node

  • DOM中，文本节点也属于节点，在使用节点的关系时一定要注意

  • 在标准的W3C规范中，空白文本节点也应该算作节点，但是在IE8及以前的浏览器会有一定的兼容问题，它们不把空白文本节点当做节点。

  • 排除文本节点的干扰，从IE9开始支持一些"只考虑元素节点"的属性

    关系考虑所有节点只考虑元素节点
    子节点childNodeschildren
    父节点parentNodeschildren
    第一个子节点fristChildfristElementChild
    最后一个子节点lastChildlastElementChild
    前一个兄弟节点previousSiblingpreviousElementSibling
    后一个兄弟节点nextSiblingnextElementSibling
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box"><p>我是段落A</p><p id="para">我是段落B</p><p>我是段落C</p></div><script>var box = document.getElementById('box');var para = document.getElementById('para');// 所有子节点console.log(box.childNodes);// 所有的元素子节点（IE9开始兼容）console.log(box.children);// 第一个子节点console.log(box.firstChild);console.log(box.firstChild.nodeType);// 第一个元素子节点（IE9开始兼容）console.log(box.firstElementChild);// 最后一个子节点console.log(box.lastChild);console.log(box.lastChild.nodeType);// 最后一个元素子节点（IE9开始兼容）console.log(box.lastElementChild);// 父节点console.log(para.parentNode);// 前一个兄弟节点console.log(para.previousSibling);// 前一个元素兄弟节点（IE9开始兼容）console.log(para.previousElementSibling);// 后一个兄弟节点console.log(para.nextSibling);// 后一个元素兄弟节点（IE9开始兼容）console.log(para.nextElementSibling);</script>
</body>
</html>

  • IE6也能兼容的"寻找所有元素子节点"函数

  • IE6也能兼容的"寻找前一个元素兄弟节点"函数

  • 获取某元素的所有兄弟节点

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="box"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p id="fpara">我是段落fpara</p>我是文本<!-- 我是注释 --><p id="para">我是段落para<span>1</span><span>2</span><span>3</span></p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><script>var box = document.getElementById('box');var para = document.getElementById('para');var fpara = document.getElementById('fpara');// 封装一个函数，这个函数可以返回元素的所有子元素节点（兼容到IE6），类似children的功能function getChildren(node) {// 结果数组var children = [];// 遍历node这个节点的所有子节点，判断每一个子节点的nodeType属性是不是1// 如果是1，就推入结果数组for (var i = 0; i < node.childNodes.length; i++) {if (node.childNodes[i].nodeType == 1) {children.push(node.childNodes[i]);}}return children;}console.log(getChildren(box));console.log(getChildren(para));// 封装一个函数，这个函数可以返回元素的前一个元素兄弟节点（兼容到IE6），类似previousElementSibling的功能function getElementPrevSibling(node) {var o = node;// 使用while语句while (o.previousSibling != null) {if (o.previousSibling.nodeType == 1) {// 结束循环，找到了return o.previousSibling;}// 让o成为它的前一个节点，就有点“递归”的感觉o = o.previousSibling;}return null;}console.log(getElementPrevSibling(para));console.log(getElementPrevSibling(fpara));// 封装第三个函数，这个函数可以返回元素的所有元素兄弟节点function getAllElementSibling(node) {// 前面的元素兄弟节点var prevs = [];// 后面的元素兄弟节点var nexts = [];var o = node;// 遍历node的前面的节点while(o.previousSibling != null) {if(o.previousSibling.nodeType == 1){prevs.unshift(o.previousSibling);}o = o.previousSibling;}o = node;// 遍历node的后面的节点while(o.nextSibling != null) {if(o.nextSibling.nodeType == 1){nexts.push(o.nextSibling);}o = o.nextSibling;}// 将两个数组进行合并，然后返回return prevs.concat(nexts);}console.log(getAllElementSibling(para));</script>
</body></html>

三、节点操作

1. 节点操作

  • 如何改变元素节点中的内容

    • 改变元素节点中的内容可以使用两个相关的属性：
      • innerHTML
      • innerText
    • innerHTML属性能以HTML语法设置节点中的内容。
    • innerText属性只能以单纯文本的形式设置节点中的内容。
      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box"></div><script>var oBox = document.getElementById('box');oBox.innerHTML = '张三';oBox.innerHTML = '<ul><li>牛奶</li><li>咖啡</li></ul>';</script>
</body>
</html>

  • 如何改变元素节点的CSS样式

    • 改变元素节点的CSS样式需要使用这样的语句
      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;border: 1px solid #000;}</style>
</head>
<body><div class="box" id="box">你好</div><script>var oBox = document.getElementById('box');// oBox.style.backgroundColor = 'rgb(100, 200, 123)';// oBox.style.backgroundColor = '#f80';// oBox.style.backgroundImage = 'url(https://www.imooc.com/static/img/index/logo-recommended.png)';// oBox.style.backgroundSize = 'contain';oBox.style.fontSize = '50px';</script>
</body>
</html>

  • 如何改变元素节点的HTML属性

    • 标准W3C属性，如src、href等等，只需要直接打点进行更改即可

    • 不符合W3C标准的属性，要使用setAttribute()和getAttribute()来设置、读取

      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="images/1.jpg" id="pic"><a href="http://www.baidu.com" id="link">去百度</a><script>var oPic = document.getElementById('pic');var oLink = document.getElementById('link');oPic.src = 'images/2.jpg';oLink.href = 'http://www.baidu.com';oLink.innerText = '去百度';</script>
</body>
</html>
      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="box"></div><script>var box = document.getElementById('box');box.setAttribute('data-n', 10);var n = box.getAttribute('data-n');alert(n);</script>
</body>
</html>

2. 节点创建

  • document.createElement()方法用于创建一个指定tagName的HTML元素

  • 孤儿节点

    • 新创建的节点是"孤儿节点"，这意味着它并没有被挂载到DOM树上，我们无法看到它。
    • 必须继续使用appendChild()或者insertBefore()方法将孤儿节点插入到DOM树上。

  • appendChild()方法

    • 任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂载到它的内部，成为它的最后一个子节点

  • insertBefore()方法

    • 任何已经在DOM树上的节点，都可以调用insertBefore()方法，它可以将孤儿节点挂载到它的内部，成为它的"标杆子节点"之前的节点

3. 移动节点

  • 如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动
  • 这意味着一个节点不能同时位于DOM树的两个位置

4. 删除节点

  • removeChild()方法从DOM中删除一个子节点
  • 节点不能主动删除自己，必须由父节点删除它

5. 克隆节点

  • cloneNode()方法可以克隆节点，克隆出的节点是"孤儿节点"
  • 参数是一个布尔值，表示是否采用深度克隆：如果为true，则该节点的所有后代节点也都会被克隆，如果为false，则只克
    隆该节点本身

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

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

相关文章

【数据结构与算法】十大经典排序算法-选择排序

【数据结构与算法】十大经典排序算法-选择排序

&#x1f31f;个人博客&#xff1a;www.hellocode.top &#x1f3f0;Java知识导航&#xff1a;Java-Navigate &#x1f525;CSDN&#xff1a;HelloCode. &#x1f31e;知乎&#xff1a;HelloCode &#x1f334;掘金&#xff1a;HelloCode ⚡如有问题&#xff0c;欢迎指正&#…
阅读更多...
opencv基础55-获取轮廓的特征值及示例

opencv基础55-获取轮廓的特征值及示例

轮廓自身的一些属性特征及轮廓所包围对象的特征对于描述图像具有重要意义。本节介绍几个轮廓自身的属性特征及轮廓所包围对象的特征。 宽高比 可以使用宽高比&#xff08;AspectRation&#xff09;来描述轮廓&#xff0c;例如矩形轮廓的宽高比为&#xff1a; 宽高比 宽度&am…
阅读更多...
Vue3使用vue-print-nb插件调起打印功能

Vue3使用vue-print-nb插件调起打印功能

一、效果图 二、使用方式 安装插件 //Vue2.0版本安装方法 npm install vue-print-nb --save yarn add vue-print-nb//Vue3.0版本安装方法&#xff1a; npm install vue3-print-nb --save yarn add vue3-print-nb在全局引用 import Print from vue-print-nb Vue.use(Print)打…
阅读更多...
Stable Diffusion WebUI 从零基础到入门

Stable Diffusion WebUI 从零基础到入门

本文主要介绍Stable Diffusion WebUI的实际操作方法&#xff0c;涵盖prompt推导、lora模型、vae模型和controlNet应用等内容&#xff0c;并给出了可操作的文生图、图生图实战示例。适合对Stable Diffusion感兴趣&#xff0c;但又对Stable Diffusion WebUI使用感到困惑的同学&am…
阅读更多...
序列模型和循环网络

序列模型和循环网络

Sequence Modeling and Recurrent Networks Sequence modeling tasks 在以往的模型中&#xff0c;各个输入之间是独立分布的 x ( i ) x^{(i)} x(i) 之间是相互独立的&#xff0c;同样输出 y ( i ) y^{(i)} y(i)之间也是相互独立的。 但是在序列模型中&#xff0c;输入输出是…
阅读更多...
STM32基于CubeIDE和HAL库 基础入门学习笔记：功能驱动与应用

STM32基于CubeIDE和HAL库 基础入门学习笔记：功能驱动与应用

文章目录&#xff1a; 一&#xff1a;LED与按键驱动程序 main.c 1.闪灯 led.h led.c 2.按键控制LED亮灭 key.h key.c 二&#xff1a;蜂鸣器与继电器驱动程序 main.c 1.蜂鸣器 buzzer.h buzzer.c delay.h delay.c 2.继电器 relay.h relay.c 三&#xff1…
阅读更多...
“MongoDB基础知识【超详细】

“MongoDB基础知识【超详细】

"探索MongoDB的无边之境&#xff1a;沉浸式数据库之旅" 欢迎来到MongoDB的精彩世界&#xff01;在这个博客中&#xff0c;我们将带您进入一个充满创新和无限潜力的数据库领域。无论您是开发者、数据工程师还是技术爱好者&#xff0c;MongoDB都将为您带来一场令人心动…
阅读更多...
PLY模型格式详解【3D】

PLY模型格式详解【3D】

本文介绍PLY 多边形文件格式&#xff0c;这是一种用于存储被描述为多边形集合的图形对象。 PLY文件格式的目标是提供一种简单且易于实现但通用的格式足以适用于各种模型。 PLY有两种子格式&#xff1a;易于入门的 ASCII 表示形式和用于紧凑存储和快速保存和加载的二进制格式。 …
阅读更多...
搭建 Python 环境 | Python、PyCharm

搭建 Python 环境 | Python、PyCharm

计算机 计算机能完成的工作&#xff1a; 算术运算逻辑判断数据存储网络通信…更多的更复杂的任务 以下这些都可以称为 “计算机”&#xff1a; 一台计算机主要由以下这几个重要的组件构成 CPU 中央处理器&#xff1a;大脑&#xff0c;算术运算&#xff0c;逻辑判断 存储器&…
阅读更多...
Redis——常见数据结构与单线程模型

Redis——常见数据结构与单线程模型

Redis中的数据结构 Redis中所有的数据都是基于key&#xff0c;value实现的&#xff0c;这里的数据结构指的是value有不同的类型。 当前版本Redis支持10种数据类型&#xff0c;下面介绍常用的五种数据类型 底层编码 Redis在实现上述数据结构时&#xff0c;会在源码有特定的…
阅读更多...
Docker数据卷容器

Docker数据卷容器

1.数据卷容器介绍 即使数据卷容器c3挂掉也不会影响c1和c2通信。 2.配置数据卷容器 创建启动c3数据卷容器&#xff0c;使用-v参数设置数据卷。volume为目录&#xff0c;这种方式数据卷目录就不用写了&#xff0c;直接写宿主机目录。 创建c1、c2容器&#xff0c;使用–volum…
阅读更多...
三星霸主地位“无可撼动“，DRAM内存市场份额创近 9 年新低仍第一

三星霸主地位“无可撼动“，DRAM内存市场份额创近 9 年新低仍第一

三星电子在DRAM市场的竞争地位一直备受关注。据报告显示&#xff0c;除了市场份额下降外&#xff0c;三星电子在上半年的销售额也出现了下滑。这主要是由于全球消费电子产品需求下滑&#xff0c;导致三星电子的芯片需求减少。 存储芯片业务所在的设备解决方案部门的营收和利润也…
阅读更多...
TCP服务器（套接字通信）

TCP服务器（套接字通信）

服务器 客户端 结果
阅读更多...
24届近3年上海电力大学自动化考研院校分析

24届近3年上海电力大学自动化考研院校分析

今天给大家带来的是上海电力大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、上海电力大学 学校简介 上海电力大学&#xff08;Shanghai University of Electric Power&#xff09;&#xff0c;位于上海市&#xff0c;是中央与上海市共建、以上海市管理为主的全日…
阅读更多...
经典人体模型SMPL介绍（一）

经典人体模型SMPL介绍（一）

SMPL是马普所提出的经典人体模型&#xff0c;目前已成为姿态估计、人体重建等领域必不可少的基础先验。SMPL基于蒙皮和BlendShape实现&#xff0c;从数千个三维人体扫描结果得来&#xff0c;后通过PCA统计学习得来。 论文&#xff1a;SMPL: A Skinned Multi-Person Linear Mode…
阅读更多...
基于Python的HTTP代理爬虫开发初探

基于Python的HTTP代理爬虫开发初探

前言 随着互联网的发展&#xff0c;爬虫技术已经成为了信息采集、数据分析的重要手段。然而在进行爬虫开发的过程中&#xff0c;由于个人或机构的目的不同&#xff0c;也会面临一些访问限制或者防护措施。这时候&#xff0c;使用HTTP代理爬虫可以有效地解决这些问题&#xff0…
阅读更多...
普华永道踩坑MOVEit漏洞，泄露银行8万名储户的信息

普华永道踩坑MOVEit漏洞，泄露银行8万名储户的信息

8月14日&#xff0c;波多黎各自治区最大的银行——人民银行向缅因州司法部长提交了一份客户信息泄露报告。该报告指出&#xff0c;由于供应商普华永道使用的MOVEit软件存在安全漏洞&#xff0c;导致银行82217名储户的个人信息被泄露。 目前&#xff0c;波多黎各人民银行已经陆续…
阅读更多...
javaScript:数组方法（增删/提取类/截取/操作方法等）

javaScript:数组方法（增删/提取类/截取/操作方法等）

目录 一.数组的增删方法 1.push()数组末尾添加元素 解释 代码 运行截图 2.unshift()向数组的头部添加数组 解释 代码 运行截图 3.pop()数组的尾部删除一个元素 解释 代码 运行截图 4.shift()数组的头部删除一个元素 解释 代码 运行截图 5. splice()任意位…
阅读更多...
使用 Visual Studio Code 调试 CMake 脚本

使用 Visual Studio Code 调试 CMake 脚本

之前被引入到 Visual Studio 中的 CMake 调试器&#xff0c;现已在 Visual Studio Code 中可用。 也就是说&#xff0c;现在你可以通过在 VS Code 中安装 CMake 工具扩展&#xff0c;来调试你的 CMakeLists.txt 脚本了。是不是很棒? 背景知识 Visual C 开发团队和 CMake 的维…
阅读更多...
最全的【DDD领域建模】小白学习手册（文末附资料）

最全的【DDD领域建模】小白学习手册（文末附资料）

1、前言&#xff1a; 在当时的环境下&#xff0c;单体应用仍然是市场的主体&#xff0c;但是大型复杂软件系统已经出现&#xff0c;给团队的设计和开发工作带来了比较大的挑战。 DDD提供了一种新的设计思路&#xff0c;通过对于业务子域和限界上下文的划分&#xff0c;建立跨…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发