文档对象模型DOM

已于 2022-03-08 15:33:34 修改
阅读量384 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
于 2022-03-01 17:50:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chonger_feifei/article/details/123207383
版权

是JS操作HTML和CSS的桥梁；

基本概念

Document Object Model文档对象模型；是JS操作HTML文档的接口
最大的特点：将文档表示为节点树；“节点思维”

节点分类

元素节点、属性节点、文本节点
在这里插入图片描述

访问节点

指得到/获取页面上的元素节点

document对象

DOM的功能几乎都封装在了document对象中
也表示整个HTML文档
是DOM节点树的根

常用方法

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

getElementById()

若有多个相同id的元素只能得到第一个

<body>
  <div id='box1'>我是盒子1</div>
  <div id='box2'>我是盒子2</div>
  <script>
      //得到盒子1
      var box1 = document.getElementById('box1');
      //得到盒子2
      var box2 = document.getElementById('box2');
  </script>
</body>

getElementsByTagName()

得到数组
方便批量操控元素节点

<body>
  <div id='box1'>
      <p>我是段落1</p>
      <p>我是段落2</p>
      <p>我是段落3</p>
  </div>
  <div id='box2'>
      <p>我是段落4</p>
      <p>我是段落5</p>
      <p>我是段落6</p>
  </div>
  <script>
      //1）得到所有p标签数组
      var ps = document.getElementsByTagName('p');
      console.log(ps);
      //2）得到box1中的p标签数组：先得到box1
      var box1 = document.getElementById('box1');
      var pss = box1.getElementsByTagName('p');
      console.log(pss);
  </script>
</body>

getElementsByClassName()

querySelector（）

只能得到一个元素
若有多个元素符合条件，则只能得到第一个

<div id="box">
      <p>我是段落</p>
      <p class="spec">我是段落2</p>
      <p class="spec">我是段落3</p>
      <p>我是段落</p>
  </div>
  <script>
      // 只能选择到第一个spec
      var the_p = document.querySelector('#box .spec');
      // 如何选择第二个spec
      // 方法一：CSS3中的序号选择器
      var the_p = document.querySelector('#box p:nth-child(2)');
      // 方法二：得到数组
      var the_p = document.querySelector('#box p');
      console.log(the_p[1]);
  </script>

querySelectorAll()

得到元素数组
注：
延迟运行
在测试DOM代码时，通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点
window.οnlοad=function（）{}事件可使页面加载完毕后，再执行指定的代码

<script>
  //给window对象添加onload事件监听；
  //onload表示页面加载完毕；
  //BOM中介绍window对象
Window.onload = function () {
      //得到盒子1
      var box1 = document.getElementById('box1');
      //得到盒子2
      var box2 = document.getElementById('box2');
      console.log(box1);
      console.log(box2);
  }
</script>
<body>
  <div id='box1'>我是盒子1</div>
  <div id='box2'>我是盒子2</div>
</body>

节点关系

在这里插入图片描述

关系考虑所有（文本、元素、属性、注释等）节点只考虑元素节点，IE9开始兼容
子节点childNodeschildren
父节点parentNode同
第一个子节点firstchildfirstElementChild
最后一个子节点lastchildlastElementChild
前一个兄弟节点previoussiblingpreviousElementsibling
后一个兄弟节点nextsiblingnextElementsibling

注：
在标准的W3C规范中，空白文本节点是节点，但IE8及以前不是

<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');
  // box所有子节点
  console.log(box.childNodes);//NodeList(7)
  // box所有子元素节点
  console.log(box.children);//HTMLCollection(3)
  // para的所有父节点
  console.log(para.parentNode);//div完整内容
  // box第一个子节点
  console.log(box.firstChild);//#text
  // box第一个子元素节点
  console.log(box.firstElementChild);//<p>我是段落A</p>
  // box最后一个子节点
  console.log(box.lastChild);//#text
  // box最后一个子元素节点
  console.log(box.lastElementChild);//<p>我是段落C</p>
  // para前一个兄弟节点
  console.log(para.previousSibling);//#text
  // para前一个兄弟元素节点
  console.log(para.previousElementSibling); //<p>我是段落A</p>
  // para后一个兄弟节点
  console.log(para.nextSibling);//#text
  // para后一个兄弟元素节点
  console.log(para.nextElementSibling);//<p>我是段落C</p>
</script>

常见的节点关系函数

<div id="box">
<p>我是段落1</p>
<p>我是段落2</p>
<p id="fpara">我是段落3</p>
我是文本
<!-- 我是注释-->
<p id="para">
 我是段落4
 <span>41</span>
 <span>42</span>
 <span>43</span>
</p>
<p>我是段落5</p>
<p>我是段落6</p>
</div>
<script>
var box = document.getElementById("box");
var para = document.getElementById("para");
var fpara = document.getElementById("fpara");
</script>

封装函数-返回所有子元素节点（兼容到IE6）

类似children（兼容到IE9）的功能

    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（兼容到IE9）的功能

function getElePresSibling(node) {
  var pres = [];
  // o-object对象,浅克隆，仅复制所考虑的对象，而不复制它所引用的对象
  // 即仅复制node中的第一层节点，而不复制其下边的子节点
  var o = node;
  // 非null：前面有节点,也就是没有到头
  // 遍历node的前面节点
  while (o.previousSibling != null) {
    if (o.previousSibling.nodeType == 1) {
      pres.unshift(o.previousSibling);
    }
    // 让o成为它的第一个节点,类似递归,前一个的前一个往前找
    // 最终前面所有节点都被找到并验证
    o = o.previousSibling;
  }
  return pres;
}
console.log(getElePresSibling(para));
console.log(getElePresSibling(fpara));

封装函数-返回所有的元素兄弟节点

两种思路
思路一: 先找该元素父节点, 再找其所有元素子节点;
思路二: 找其前面的兄弟元素节点, 并找其后面的兄弟元素节点

function getAllEleSibling(node) {
// 前面的元素兄弟节点
var pres = [];
// 后面的元素兄弟节点
var nexts = [];
var o = node;
// 遍历node的前面节点
while (o.previousSibling != null) {
if (o.previousSibling.nodeType == 1) {
	 // unshift前端插入,push后端推入
	 pres.unshift(o.previousSibling);
}
o = o.previousSibling;
}
// o再次赋值
o = node;
// 遍历node的后面节点
while (o.previousSibling != null) {
if (o.previousSibling.nodeType == 1) {
	  // unshift前端插入,push后端推入
	  nexts.push(o.previousSibling);
}
o = o.previousSibling;
}
//前后两个数组合并并返回, concat数组合并
return pres.concat(nexts);
}
console.log(getAllEleSibling(para));
</script>

节点属性

nodeName

节点类型nodeName属性值
元素节点与标签名相同
属性节点属性的名称
文本节点#text
文档节点#document

nodeValue

节点类型nodeValue属性值
元素节点undefined 或 null
文本节点文本自身
属性节点属性的值

nodeType

显示节点具体的类型

nodeType属性值节点类型
1元素节点，例：<p>、<div>
3文字节点
8注释节点
9document对象/节点
10DTD节点

改变节点的HTML内容

两个相关属性：
innerHTML以HTML语法设置节点中的内容
innerText以纯文本的形式设置节点中的内容

<div id="box"></div>
<script>
   var oBox = document.getElementById('box');
   //1.1 改变节点中的纯文本内容
   o.Box.innerHTML = '慕课网';
   //1.2 可解析HTML格式(切记不能换行),以改变节点中的内容
   o.Box.innerHTML = '<ul><li>牛奶</li><li> 咖啡</li></ul >';
   // 2.1改变节点中的纯文本内容
   o.Box.innerText = '慕课网';
   // 2.2不能解析HTML格式,会直接输出
   o.Box.innerText = '<ul><li>牛奶</li><li> 咖啡</li></ul >';
</script>

改变节点的CSS样式

实现形式：增添行内样式

// CSS属性写成驼峰形式
o.Box.style.backgroundColor = 'red';
// CSS属性值设置成完整形式
o.Box.style.backgroundImage = 'url(images/1.jpg)';
// 注意带单位
o.Box.style.fontsize = '32px';

改变节点的HTML属性

W3C属性

例：src、href等
实现形式：打点

<img id='pic' src="images/1.jpg" alt="">
<a id='link' href="http://www.baidu.com">去百度</a>
<script>
var opic = document.getElementById('pic');
var olink = document.getElementById('link');
opic.src = 'images/2.jpg';
olink.herf = 'http://www.imooc.com';
olink.innerText = '去慕课网';
</script>

非W3C属性

实现形式：setAttribute()设置、getAttribute()读取

<div class="box"></div>
<script>
var obox = document.getElementById('box');
// 直接打点方式失效
// obox.data - n='10';
// 设置自定义属性
obox.setAttribute('data-n', 10);
// 读取自定义属性
var n = obox.getAttribute('data-n');
alert(n);
</script>

创建节点

创建指定tagname的HTML元素
创建方法：document.createElement()

孤儿节点

新创建出的节点是“孤儿节点"，需要挂载到DOM树上

挂载节点

appendChild()

挂载到最后
语法：父节点.appendChild（孤儿节点）；

insertBefore()

挂载到“标杆子节点”之前
语法：父节点.insertBefore（孤儿节点，标杆节点）；

<div id="box">
      <p>我是原段落1</p>
      <p>我是原段落2</p>
      <p>我是原段落3</p>
  </div>
  <script>
      var oBox = document.getElementById('box');
      var oPs = document.getElementsByTagName('p');
      // 1:创建孤儿节点
      var oP = document.createElement('p');
      // 设置内部文字
      oP.innerText = '我是新段落';
      // 2:挂载,只能挂载一次
      // 追加到最后
      oBox.appendChild(oP);
      // 插入到最前
      // oBox.insertBefore(oP, oPs[0]);
      // 插入到第2个p之前
      // oBox.insertBefore(oP, oPs[1]);
</script>

移动节点

两种方法：
新父节点.appendChild（已经有父亲的节点）；
新父节点.insertBefore（已经有父亲的节点，标杆子节点）；
意味着节点只能挂载一次

<div id="box1">
  <p id="para">
      我是box1的段落
  </p>
</div>
<div id="box2">
  <p>我是box2的原段落1</p>
  <p>我是box2的原段落2</p>
</div>
<script>
  var box1 = document.getElementById('box1');
  var box2 = document.getElementById('box2');
  var para = document.getElementById('para');
  // 获取元素范围是box2
  var ps_inbox2 = box2.getElementsByTagName('p');
  // box2.appendChild(para);
  box2.insertBefore(para, ps_inbox2[0]);
</script>

删除节点

父节点.removeChild（要删除子节点）；
要由父节点删除它

<div id="box">
  <p>我是段落1</p>
  <p>我是段落2</p>
  <p>我是段落3</p>
</div>
<script>
  var box = document.getElementById('box');
  // 删除段落1
  var the_first_p = box.getElementsByTagName('p')[0];
  box.removeChild(the_first_p);
</script>

克隆节点

cloneNode（）
语法：var 孤儿节点=老节点.cloneNode(true);其中参数为true采用深度克隆；为false，则只克隆该节点本身
得到的节点依然是“孤儿节点"

<div id="box1">
  <ul>
      <li>牛奶</li>
      <li>咖啡</li>
      <li>酒</li>
  </ul>
</div>
<div id="box2"></div>
<script>
  var box1 = document.getElementById('box1');
  var box2 = document.getElementById('box2');
  // 注意[0]很有必要
  var theul = box1.getElementsByTagName('ul')[0];
  // 克隆节点- 浅克隆
  var new_ul = theul.cloneNode();
  // 克隆节点-深克隆
  // var new_ul = theul.cloneNode(true);
  box2.appendChild(new_ul);
</script>

案例1-创建新节点&改变CSS样式

<body>
	<button id="btn">按我添加新的li列表项</button>
	<ul id="list">
	<li>默认项</li>
	<li>默认项</li>
	<li>默认项</li>
	</ul>
	<script>
		var oBtn = document.getElementById("btn");
		var oList = document.getElementById("list");
		oBtn.onclick = function () {
			// 创建一个新的li
			var oLi = document.createElement("li");
			oLi.innerHTML = "我是列表项";
			oList.appendChild(oLi);
			oLi.onclick = function () {
				// 改变CSS样式
				  this.style.color = "red";
			};
		};
	</script>
</body>

案例2-动态创建20行12列的表格

<style>
	td {
		width: 20px;
		height: 20px;
		border: 1px solid black;
	}
</style>
<body>
	<table id="mytable"></table>
	<script>
		var oMytable = document.getElementById("mytable");
		for (var i = 0; i < 20; i++) {
			var tr = document.createElement("tr");
			for (var j = 0; j < 12; j++) {
				var td = document.createElement("td");
				tr.appendChild(td);
			}
			oMytable.appendChild(tr);
		}
	</script>
</body>

案例3-动态创建乘法表

<style>
	td {
		width: 20px;
		height: 20px;
		border: 1px solid black;
	}
</style>
<body>
	<table id="mytable"></table>
	<script>
		var oMytable = document.getElementById("mytable");
		for (var i = 1; i <= 9; i++) {
			var tr = document.createElement("tr");
			for (var j = 1; j <= i; j++) {
				var td = document.createElement("td");
				// 设置td内部的文字
				td.innerText = i + "*" + j + "=" + i * j;
				tr.appendChild(td);
			}
			oMytable.appendChild(tr);
		}
	</script>
</body>

指用户与网页的交互动作
例如：
·当用户点击元素时
·当鼠标移动到元素上时
·当文本框的内容被改变时
·当键盘在文本框中被按下时
·当网页已加载完毕时
……

chonger_feifei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM(文档对象模型)
m0_68870440的博客
06-23 1778
DOM(文档对象模型)
文档对象模型DOM通俗讲解
09-04
文档对象模型（DOM）是Web开发中的一个关键概念，它为HTML和XML文档提供了一个结构化的表示，并允许程序和脚本动态地访问和更新文档内容、结构和样式。DOM是独立于语言的标准，这意味着任何支持DOM的编程语言都可以...
一篇文带你了解文档对象模型DOM（Document Object Model）
cai niaoyihao_的博客
06-06 2702
一篇文带你了解文本对象模型DOM（Document Object Model）
DOM（文档对象模型）
weixin_68705721的博客
04-27 329
文DOM（文档对象模型） 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。一个 web 页面是一个文档。这个文档可以在浏览器窗口或作为 HTML 源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。
文档对象模型dom_详细了解文档对象模型（DOM）
cune1359的博客
07-05 535
我们都听说过不时提到与JavaScript相关的DOM或文档对象模型 。 DOM是Web开发中一个非常重要的概念。 没有它，我们将无法在浏览器中动态修改HTML页面 。 学习和理解DOM可以更好地访问，更改和监视 HTML页面的不同元素。 文档对象模型还可以帮助我们减少脚本执行时间的不必要增加 。 另请参阅： Web开发人员用于DOM操作的15种JavaScript方法 数据结构树...
Dom 文档对象模型
nknmn
04-20 319
< DOM > 1.文档：一个页面就是一个文档，DOM中使用document表示 2.元素：页面中的标签都是元素，DOM中使用element表示 3.节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 DOM把以上内容都看做是对象 1.获取页面元素： （1）根据ID获取： document.getElementById() // 1.因为文档页面是从上往下加载的，先得有标签， 所...
什么对象表示html的整个页面文档,文档对象模型DOM知多少？
weixin_42207707的博客
06-05 433
原标题：文档对象模型DOM知多少？ 1、什么是DOM？文档对象模型DOM是针对XML但经过扩展用于HTML的应用程序编程接口API，DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。通过DOM创建的表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如地删除、添加、替换或...
文档对象模型dom_什么是DOM（文档对象模型）？
cunjiu9486的博客
10-11 544
文档对象模型domThe DOM or Document Object Model is the representation of objects and hierarchy in a document which is generally an HTML or XML document. DOM is the skeleton of a document where changes over ...
DOM——文档对象模型（Document Object Model）
qq_20006765的博客
08-23 788
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。
文档对象模型DOM概述及DOM树
hongcaixia的博客
11-28 3284
DOM技术 1.Dom概述？ * 什么是DOM？  docuemnt object model 文档对象模型 * 它的作用？   重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目 * 分类？    Core DOM :   定义了一套标准的针对任何结构化文档的对象  XML  DOM :   定义了一套标准的针对 XML 文档的对象  HTML DOM :   定义
文档对象模型DOM简介
11-25
### 文档对象模型DOM简介 #### 一、DOM概述 文档对象模型（Document Object Model，简称DOM）是一种标准的编程接口，它允许开发者通过对象化的形式来操作文档内容。无论文档是HTML还是XML格式，DOM都能为其提供...
AJAX文档对象模型DOM
10-29
文档对象模型（DOM）是Web开发中的核心技术，它允许开发者通过JavaScript等脚本语言来动态地访问和修改HTML或XML文档的结构、内容和样式。DOM是一个标准的接口，它将文档表示为一棵由节点组成的树，每个节点代表文档...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 348
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1203
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 1064
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 217
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 176
【代码】vue el-select的下拉树形结构。
XML文档对象模型DOM详解
"XML中的DOM，即文档对象模型，是一种用于表示和处理HTML或XML文档的标准化接口，由W3C组织定义。它将文档解析为节点对象树，允许程序员动态创建、遍历、修改和删除文档内容。" DOM（Document Object Model）是Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值