DOM的学习笔记

最新推荐文章于 2024-08-21 20:49:33 发布
最新推荐文章于 2024-08-21 20:49:33 发布
阅读量122 收藏
点赞数
文章标签： node.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45334571/article/details/120225196
版权

文章目录

一、DOM是什么？

- Document Object Model
- 文档对象模型，通过DOM可以来任意修改网页中各个内容
- 文档
      文档指的是网页，一个网页就是一个文档
- 对象
      对象指将网页中的每一个节点都转换为对象
      转换为对象后，就可以以一种纯面向对象的形式来操作网页了
- 模型
     模型用来表示节点和节点之间的关系，方便操作页面

1.节点(Node)

- 节点是构成网页的最基本的单位，网页中的每一个部分都可以称为一个节点
- 每个结点的类型都是不同的
- 常用的节点
         - 文档节点(Document)，代表整个网页
         - 元素节点(Element)，代表网页中的标签
         - 属性节点(Attribute)，代表标签中的属性
         - 文本节点(Text)，代表网页中的文本内容

2.节点树

 - 一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。
 - 它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点。
-  就这样层层衍生出一个金字塔结构，倒过来就像一棵树。

在这里插入图片描述

二、Node接口的属性

nodeType

nodeType属性返回一个整数值，表示节点的类型。

  • 不同节点的nodeType属性值和对应的常量如下。

    文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE
注释节点（Comment）：8，对应常量Node.COMMENT_NODE

console.log(document.nodeType); //9

nodeName

nodeName属性返回节点的名称。

  • 不同节点的nodeName属性值如下。

    文档节点（document）：#document
元素节点（element）：大写的标签名
属性节点（attr）：属性的名称
文本节点（text）：#text
文档片断节点（DocumentFragment）：#document-fragment
文档类型节点（DocumentType）：文档的类型
注释节点（Comment）：#comment

<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeName); //DIV
</script>

nodeValue

nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值。

<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeValue); // null
  // 读
  console.log(div.firstChild.nodeValue); //hello world
  // 写
  div.firstChild.nodeValue = '123';
</script>

textContent

textContent属性返回当前节点和它的所有后代节点的文本内容。

<div id="d1">Hello <span>JavaScript</span> DOM</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.textContent); //Hello JavaScript DOM
</script>

nextSibling

nextSibling属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div1.nextSibling); //<div id="d2">world</div>
  console.log(div1.nextSibling === div2); // true
</script>

previousSibling

previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div2.previousSibling); //<div id="d1">hello</div>
  console.log(div2.previousSibling === div1); // true
</script>

parentNode

parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）。

<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentNode); // body
</script>

parentElement

parentElement属性返回当前节点的父元素节点。如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null。

<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentElement); // body
  // 将父元素节点的背景颜色设置为红色
  div1.parentElement.style.backgroundColor = 'red';
</script>

firstChild、lastChild

firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。
lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。用法与firstChild属性相同。

<div id="d1">hello world<div>我是子节点</div></div>
<div id="d2"><div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.firstChild); // hello world
  console.log(div1.lastChild); // <div>我是子节点</div>
  var div2 = document.getElementById('d2');
  console.log(div2.firstChild); // <div>我是子节点</div>
</script>

childNodes

childNodes属性返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点。

<div id="d1">hello world<div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.childNodes); //NodeList[text, div]
</script>

三、Node 接口的方法

appendChild

appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

insertBefore()

insertBefore方法用于将某个节点插入父节点内部的指定位置。

insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面。返回值是插入的新节点newNode。

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>
<script>
  //创建一个新的、普通的<span>元素
  var sp1 = document.createElement("span");
  // 向span标签插入内容
  sp1.innerHTML = '我是span标签'
  //插入节点之前，要获得节点的引用
  var sp2 = document.getElementById("childElement");
  //获得父节点的引用
  var parentDiv = sp2.parentNode;
  //在DOM中在sp2之前插入一个新元素
  parentDiv.insertBefore(sp1, sp2);
</script>

removeChild()

removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  span1.parentNode.removeChild(span1);
</script>

replaceChild()

replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  //创建一个新的div标签
  var div1 = document.createElement("div");
  // 向div标签插入内容
  div1.innerHTML = '我是div1标签';
  // 节点替换
  span1.parentNode.replaceChild(div1, span1);
</script>

四、Document类型

getElementById()

返回匹配指定 id 的一个元素。

<div id="d1">我是一个div标签</div>
<script>
  // 查找id为d1的标签
  var div = document.getElementById('d1');
  console.log(div);
</script>

getElementsByTagName()

返回一个HTMLCollection(伪数组)，包含匹配指定标签名的所有元素。

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
  // 查找所有p标签
  var p = document.getElementsByTagName('p');
  console.log(p);
</script>

getElementsByClassName()

返回一个HTML集合HTMLCollection(伪数组)，包含匹配指定类名的所有元素。

<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<script>
  // 查找class为div1的标签
  var div = document.getElementsByClassName('div1');
  console.log(div);
</script>

document.querySelector()

返回文档中匹配指定的CSS选择器的第一元素

<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
  document.querySelector("#div1").innerHTML = "Hello World!";
</script>

document.querySelectorAll()

document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
  console.log(document.querySelectorAll(".div1"));
  var x = document.querySelectorAll(".div1");
  x[0].innerHTML = '我是新的div';
</script>

document.createElement(element)

创建一个新的HTML元素，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

document.write()

向文档写入文本或 HTML 表达式 或 JavaScript 代码。

<script>
  document.write("<p>Hello world!</p>");
  document.write("<span>Hello DOM!</span>");
  document.write("Hello Weekend!");
</script>

五、Element类型

element.innerHTML

属性设置或获取HTML语法表示的元素的后代。

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取
  console.log(d1.innerHTML);
  // 设置
  d1.innerHTML = '我是新的内容'
</script>

element.attribute = value

修改已经存在的属性的值

<div id="div1">123</div>
<script>
  var d1 = document.getElementById('div1');
  // 直接将已经存在的属性进行修改
  d1.id = 'div2';
</script>

element.getAttribute()

返回元素节点的指定属性值。

<div id="div1">我是一个div</div>
<script>
  var div = document.getElementById('div1');
  console.log(div.getAttribute('id')); // div1
</script>

element.setAttribute(attribute, value)

把指定属性设置或更改为指定值。

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 设置div1的class为divCla
  d1.setAttribute('class', 'divCla');
</script>

element.style.property

设置或返回元素的 style 属性。

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取div1的style样式
  console.log(d1.style);
  // 设置div1的style
  d1.style.backgroundColor = 'red';
</script>

六、Text类型

appendData(text)

​ 追加文本

deleteData(beginIndex,count)

​ 删除文本

insertData(beginIndex,text)

​ 插入文本

replaceData(beginIndex,count,text)

​ 替换文本

splitText(beginIndex)

​ 从beginIndex位置将当前文本节点分成两个文本节点

document.createTextNode(text)

​ 创建文本节点，参数为要插入节点中的文本

substringData(beginIndex,count)

​ 从beginIndex开始提取count个子字符串

<div id="container"></div>
<script>
  // 创建文本节点
  var textNode = document.createTextNode('Hello World!');
  // 获取container
  var div = document.getElementById('container');
  // 将文本节点插入container
  div.appendChild(textNode);
  // 替换文本
  textNode.replaceData(0,5,'Hi');
  // 插入文本
  textNode.insertData(0, 'Hello')
</script>
̶i̶̶l̶o̶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
docment对象详细说明
于明远的专栏
03-01 2665
docment对象详细说明  document对象详解document 文挡对象 - JavaScript脚本语言描述---------------------------------------------------------------------注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写   否则会提示你一个错误信息 "引用的元素为空或者不是对象"-
DOM学习笔记
kun的博客
11-20 466
DOM（文档对象模型，Document文档，Object对象，Model模型）        在开发中的地位和作用 1、解释下面名词    HTML XHTML DHTML XML：    HTML：超文本标记语言，专门编写网页内容的语言        --元素定义可大小写    XHTML：严格的HTML语言标准                                   ...
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象（JavaScript语言对象。如Math，Array）、宿主对象（浏览器对象） 3. “M”:Model,值得是Model，某种事物的表现形式 二、节点 1. 元素节点 ：<body> <p> <ul>等 2. 文本节点：<p>文本节点</p>、<li>文本节点</li>等 3. 属性节点：title id class 等 三、获取元素 三种方法：通过
document对象详解
02-02 959
document对象详解document 文挡对象 - JavaScript脚本语言描述---------------------------------------------------------------------注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写   否则会提示你一个错误信息 "引用的元素为空或者不是对象"----------------
DOM（Document）模型
weixin_72786602的博客
08-12 147
DOM（Document）模型
JS的Document类型
一心向晚
09-15 9362
Document HTMLDocument继承自Document。 在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用 1.属性 documentElement指向HTML页面中的<html>元素。 title 获取文档的标题 URL 获取URL domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。 referrer 取得链接到当前页面的那个页面的URL...
DOM学习篇 一
限定小码农的博客
07-23 140
DOM的介绍 Document Object Model：文档对象模型 是XML解析文档；DOM操作，可以简单理解成“元素操作” 原理：将html文档，看成一颗节点树，然后，使用dom提供的API,对应的节点进行增删改查；从而使用通过js 去动态操作html元素 将其用树形表示是为了更好地给每一个元素进行定位，以便让我们找到想要的元素 每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作 一、查看节点 du
JavaScript HTML DOM学习笔记.emmx
02-11
从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走
JavaScript高级程序设计 DOM学习笔记
10-28
根据给定的文件信息，以下是关于JavaScript中DOM（文档对象模型）的相关知识点详解： DOM是文档对象模型（Document Object Model）的缩写，它是一个跨平台的接口，由W3C组织制定标准，用于在HTML或XML文档中创建和...
js DOM学习笔记11
08-08
JavaScript DOM 学习笔记 JavaScript DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，它提供了一种访问和操作文档结构和内容的方式。DOM 将文档表示为一个树状结构，其中每个节点都代表文档中的一个...
比较详细的javascript DOM 学习笔记第1/2页
10-30
通过学习DOM节点层次、接口和方法，开发者能够更好地控制和操作网页内容，从而创建更加丰富、动态的用户体验。在学习过程中，掌握如何通过各种属性和方法来访问、添加、删除或修改节点是至关重要的，这些技能是进行...
js根据CSS选择器来获取DOM元素
2203_75410429的博客
05-12 791
第一个第一个。
Html怎样转换为document,html中的document对象是什么？
weixin_39860280的博客
05-31 1070
首先我们来介绍一下HTML中的document对象：文档对象(document)代表浏览器窗口中的文档，该对象是window对象的子对象，由于window对象是DOM对象模型中的默认对象，因此window对象中的方法和子对象不需要使用window来引用。通过document对象可以访问HTML文档中包含的任何HTML标记并可以动态的改变HTML标记中的内容。例如表单、图像、表格和超链接等。再来看看...
docment对象
wu964521的博客
09-27 189
bar               box   bar   main     
DOM获取各种元素操作
车明强的博客
10-18 481
获取一个元素 通过 js 代码来获取页面中的标签 获取到以后我们就可以操作这些标签了 geyElementById 是通过标签的id名称来获取标签的 因为在一个页面中 id 是唯一的，所以获取到的就是一个元素 <div id="box"></div> <script> var box =document.getElementById('box'); console.log(box); </script
JS中document对象 && window对象
若末lan的博客
05-14 1万+
所有的全局函数和对象都属于Window对象的属性和方法。区别: 1、window 指窗体。Window 对象表示浏览器中打开的窗口。 document指页面。document是window的一个子对象、一个对象属性。 2、用户不能改变 document.location(因为这是当前显示文档的位置)。 但是,可以改变window.location (用其它文档取代当前文档) ...
通过document.domain实现跨域访问
热门推荐
拈花的专栏
03-10 4万+
由于JavaScript同源策略的限制，脚本只能读取和所属文档来源相同的窗口和文档的属性。 对于已经有成熟产品体系的公司来说，不同的页面可能放在不同的服务器上，这些服务器域名不同，但是拥有相同的上级域名，比如id.qq.com、www.qq.com、user.qzone.qq.com，它们都有公共的上级域名qq.com。这些服务器上的页面之间的跨域访问可以通过document.domain来进行...
Node.js 安装教程
最新发布
weixin_58462329的博客
08-21 343
在官方网站首页，你会看到两个版本的下载链接：LTS（长期支持版）和 Current（最新版）。首先，访问 Homebrew 官方网站，这是 macOS 上的一个包管理器，可以方便地安装各种软件。点击对应的下载链接，下载 Windows 安装包（.msi 文件）。如果分别显示 Node.js 和 npm 的版本号，说明安装成功。如果分别显示 Node.js 和 npm 的版本号，说明安装成功。如果分别显示 Node.js 和 npm 的版本号，说明安装成功。首先，打开浏览器，访问 Node.js 官方网站。
JavaScript DOM学习笔记：基础与节点解析
"这是一份关于JavaScript DOM学习的详细笔记，涵盖了DOM基础和一些主要的节点类型。笔记内容包括对各种节点对象的解释，如Document、Element、Text、Comment等，并提到了getElementsByTagName()方法的使用。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值