JS与DOM

最新推荐文章于 2022-06-05 20:25:00 发布
最新推荐文章于 2022-06-05 20:25:00 发布
阅读量118 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjc256/article/details/88577024
版权

文章目录

DOM节点

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。

文档节点是每个文档的根节点，在HTML中，文档节点只有一个子节点，即<html>元素，称之为文档元素，文档中的其他所有元素都包含在文档元素之中并且每个文档只能有一个文档元素。

文档中的每一个标记都可以通过树中的一个节点来表示，HTML元素通过元素节点表示，属性(Attributes)通过属性节点来表示，文档类型通过文档类型节点来表示，注释通过注释节点来表示，等等。一共有12个节点类型，而这些类型都继承自一个基类型Node。

Node类型

在DOM1级中定义了一个Node接口，这个接口在JavaScript中是作为Node类型来实现的。JavaScript中的所有节点都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个用于表明节点类型的nodeType属性，该属性的值主要由12个常数来表示，一一对应12个Node类型。

  • Node.ELEMENT_NODE:1
  • Node.ATTRIBUTE_NODE:2
  • Node.TEXT_NODE:3
  • Node.CDATA_SECTION_NODE:4
  • Node.ENTITY_REFERENCE_NODE:5
  • Node.ENTITY_NODE:6
  • Node.PROCESSING_INSTRUCTION_NODE:7
  • Node.COMMENT_NODE:8
  • Node.DOCUMENT_NODE:9
  • Node.DOCUMENT_TYPE_NODE:10
  • Node.DOCUMENT_FRAGMENT_NODE:11
  • Node.NATATION_NODE:12

节点关系

节点与节点之间的关系可以用一棵树来形容。例如<body>元素就是<html>的子元素，而<head>元素就是<body>元素的兄弟元素。

每个节点都有一个childNodes属性，这个属性指向一个NodeList对象。NodeList对象。是一个类数组对象，可以通过方括号加索引值访问内部元素，也具有length属性。

NodeList对象的特殊之处在于它是一个基于DOM结构动态执行查询的结果，而不是某个时间点的快照，因此DOM结构的变化能够自动反映到NodeList对象。

此外，每个节点还都有一个parentNode属性，顾名思义，是指向该节点的父节点的。在同一个NodeList中的节点具有相同的parentNode属性。

在同一个NodeList中的节点之间都是兄弟节点，通过访问previouSibling或nextSibling属性，可以访问到该节点在NodeList中后一个或前一个节点。

父元素与其第一个和最后一个子元素也有一些联系，父元素可以通过firstChild和lastChild分别访问父元素的第一个和最后一个子元素。

最后，所有元素都还拥有一个ownerDocument属性，该属性指向表示整个文档的文档节点。

操作节点

DOM提供了一些操作节点的方法，其中最常用的方法是appendChild()，用于向childNodes的末尾添加一个节点。

如果被传入到appendChild()的节点本身已经是文档的一部分了，那该操作的结果就是将该节点从原来的位置转移到新位置。

如果需要把节点放在某个特定的位置上，而不是放在末尾，那么可以使用insertBefore()方法，这个方法接受两个参数，分别是要插入的节点和作为参照的节点。

如果想要替换节点则可以使用replaceChild()，同样接受两个参数，要插入的节点和要被替换的节点。被替换之后的节点，理论上说它还在文档之中，但是在文档中已经没有了它的位置。

如果是想直接移除而非替换的话，可以使用removeChild()方法。

还有一个所有类型的节点都有的方法，cloneNode()。可以用于创建调用这个方法的节点的副本，这个方法接受一个布尔值参数，表示是否执行深拷贝，也就是复制节点和整个子节点树。复制返回的节点副本属于文档，但是并没有父节点，需要通过上面介绍的方法添加到文档之中。

Document类型

JavaScript通过Document类型表示文档，在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。而且document对象是window对象的一个属性，因此可以将其作为全局对象来访问。

文档的子节点

document对象内置了几个访问子节点的快捷方式，首先就是documentElement属性，该属性始终指向<html>元素。

注：document的firstChild并不是<html>元素，而是<!doctype html>，<!doctype html>也可以通过document.doctype来访问。

除此之外还有body属性指向<html>元素的<body>子元素。

文档信息

document对象还有一些代表网页信息的属性

首先就是title属性，这个不必多说。

然后还有三个与对网页请求有关的属性：

  • URL：页面完整的URL
  • domain：只包含页面的域名
  • referer：链接到当前页面的那个页面的URL，如果没有来源页面可能为空。

注：这三个属性里面只有domain是可以设置的。

查找元素

Document类型为查找对象定义了两个方法，getElementsByTagName和getElementById。

顾名思义，一个是通过标签名来查找，而另一个则是通过id来查找。

而通过标签名来查找会返回一个HTMLCollection对象，这个对象也是一个类数组对象，与前面介绍的NodeList非常相似。

HTMLCollection还有一个namedItem()的方法，通过它，可以在HTMLCollection中找到有相应name属性的项。

而HTMLDocument类型还定义了一个getElementsByName的方法，这个方法会返回带有给定name属性的所有元素。

特殊集合

  • document.anchors：包含问答那个中所有带name属性的<a>元素
  • document.forms：包含文档中所有的<form>元素
  • document.images：包含文档中所有的元素
  • document.links：包含文档中所有带href特性的<a>元素。

Element类型

HTML元素

所有的HTML元素都由HTMLElement类型表示。HTMLElement类型直接继承自Element并添加了一些属性。

获取、设置、移除属性

操作属性的DOM方法主要是3个

  • getAttribute()
  • setAttribute()
  • removeAttribute()
Meskjei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中 DOM 的概念解释
norang的博客
06-04 1859
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
JS-DOM
weixin_51077152的博客
09-16 166
1.1.什么是DOM 文档对象模型 DOM document object model文档对象模型 DOM规定了一套管理HTML文档的机制,它不是一个对象，主要使用document对象操作文档中的内容，整个文档就是有这些节点构成的树形结构 DOM规定HTML一切内容都称为节点 1）HTML的元素称为元素节点（element node） 2）HTML元素之间的文本称为文本节点（text node） 3）HTML元素的属性称为属性节点（attribute node） 4）HTML文档称为文档节点 5）HTM
JavaScript与DOM编程
寻梦&之璐
05-05 6199
文章目录JS简介常量与变量 JS简介 JS是一种在浏览器中运行的解释性脚本语言。JS是由ES（ECMAScript），DOM（文档对象模型），BOM（浏览器对象模型）组成 ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在2015年6月发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，称为企业级开发语言 Node.js是一个基于Chrome V8引擎的JavaScript运行环境，是让JS运行在服务端的开发平台，它使得JS成为与PHP，Py
JavaScript之DOM
qq_43751200的博客
06-05 1754
DOM
JavaScript与DOM组合动态创建表格实例
12-12
简介　这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地...
JavaScript dom操作 趣味案例
最新发布
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
JavaScript-DOM:JS学习者使用JavaScript DOM的最小项目
04-27
JavaScript DOM（Document Object Model）是Web开发中的一个关键概念，它是HTML或XML文档的...对于初学者，这是一个很好的起点，因为它提供了一个简单但完整的实践场景，能够让他们深入理解JavaScript与DOM的互动方式。
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
getElementsBy系列方法和querySelectorAll方法
Meskjei的博客
03-18 3862
文章目录getElementsBy系列方法querySelectorAll方法 getElementsBy系列方法 getElementsByTagName() getElementsByClassName() getElementsByName() 这几个方法都是用来获取多个DOM对象的，只是通过不同的属性来查询。 而这三个方法里又属getElementsByName方法为特殊。因为只有它返...
JS中对数组进行求和
Meskjei的博客
03-14 3489
如果在一个数组想对数组中的所有项进行求和（当然每项都得是Number对象）该怎么做呢？ 可以使用Array对象的reduce或reduceRight方法。这两个方法会遍历数组中的每个对象，并最终返回一个值。 这两个方法都接受两个参数： 在每一项上调用的函数，这个函数包含4个参数 total：初始值，或者是每一次函数调用完之后的返回值 currentValue：当前值，当前所遍历到的值 curr...
对象的扩展运算符
Meskjei的博客
03-07 3261
之前我写过一篇笔记就是说扩展运算符的。可是那个笔记说的并不全面。以前我一直片面的认为，扩展操作符只能作用于数组而不能作用于对象，而且只能在函数调用的时候使用，可实际上扩展操作符是可以作用于对象的。 文章目录解构赋值扩展运算符 解构赋值 应该来说，扩展运算符用在解构赋值中更像是rest参数。同样是把目标对象还未读取的字段，分配到指定的对象。例如 let {a, b, ...c} = {a: 12, ...
JS中函数缺少参数的报错
Meskjei的博客
01-18 2979
稍微有过一点JS编程经历的人都知道，JS中的函数，即便是缺少了参数也不会报错，例如 function add(x, y){ return x + y; } console.log(add()); //NaN add函数中并没有传参数，但是可以正常运行不会报错。那如果想要像C/C++或其他一些语言一样在缺少参数的时候会报错该怎么办呢？ ES6规范中允许开发者为函数的参数设置默认值，而这个默认值可...
JS面向对象之对象属性的属性
Meskjei的博客
06-27 2951
ECMAScript的定义中，对象的属性有两种，一种是数据属性，另一种是访问器属性 我们知道JS中有基本数据类型和对象，对象中的属性也无外乎是这些类型，可是作为对象的属性，这些属性本身却也多了一些特殊的属性，而且属性种类的不同也会使属性的属性有些许的差别。下面就来聊聊对象属性的两种类别。   1.数据属性 这种属性包含有一个存放数据值的属性[[Value]],数据属性共有4个描述其行为的属...
滚动到某个HTML元素
Meskjei的博客
03-23 2374
在一些时候，我们想要实现滚动到页面上某个部分的功能，即让页面上某个元素出现在视口内。这个时候就可以借助scrollIntoView这个方法了。这个方法可以在所有元素上调用。 例如 let div = document.querySelector('div'); div.scrollIntoView(); 如果给这个方法传入true作为参数（默认为true），那么窗口滚动之后会让调用元素的顶部与视...
函数的rest参数
Meskjei的博客
01-18 1750
如果想要实现为函数传入多个参数，那么可以使用arguments对象，例如 function foo(){ for(let num of arguments){ console.log(num); } } foo(1,2,3); /* 1 2 3 */ 可是我们都知道arguments只是一个类似数组的对象而并不是数组，所以如果我们想使用一些数组上的方法例如sort...
NodeList和HTMLCollection
Meskjei的博客
03-15 1613
以前从来没怎么注意NodeList和HTMLCollection之间的区别。直到我今天重新看了《JavaScript高级程序设计》才注意到它们之间是有着微妙的区别的。 先来看下面的代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&q
判断元素是否获得焦点以及用户是否在与页面交互
Meskjei的博客
03-21 1369
页面上DOM元素可以通过页面加载、用户的输入和调用focus方法等来获得焦点。 在HTML5中document对象新增了activeElement属性，这个属性会引用当前获得焦点的那个元素。 <html> <head> <meta charset='utf-8'/> <title>foo</title&g...
var关键字的使用
Meskjei的博客
06-27 1078
首先我们来看一段代码 var a = 1 b = 2 console.log(a) //1 console.log(b) //2   我们可以看到a, b都能被正常的输出。区别只是在于a前边有个“var”关键字，而b没有，不过从结果上看似乎并没有什么区别，那到底“var”关键字有什么用呢？再来看下一段代码。   function foo(){ var a = 1 ...
JavaScript与DOM应用教程：实战与库项目详解
《JavaScript 捷径教程》是一本深入浅出的IT专业书籍，主要聚焦于JavaScript编程语言及其在网页开发中的应用，特别是与Document Object Model (DOM) 的结合。DOM是浏览器解析HTML文档并提供接口进行动态更新的技术，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值