JS DOM 编程复习笔记（一）

最新推荐文章于 2022-09-13 10:04:59 发布
最新推荐文章于 2022-09-13 10:04:59 发布
阅读量222 收藏 1
点赞数
分类专栏： 小帅的编程笔记 文章标签： javascript dom 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cmdfas/article/details/120815036
版权

今天我们来复习JavaScript中的文档对象模型----DOM。

什么是DOM

DOM是三个英文单词的缩写，Document Object Model 简称为DOM，是用来操作HTML和XML的编程接口（API）。

DOM文档像一颗节点树，并且提供了API，让我们可以添加、修改和删除文档中的节点。

注意，DOM并不是JavaScript所提供的，DOM是一种跨平台且独立于语言的用来操作HMTL和XML的方式。

文档中的节点

DOM将HTML表示为树形的节点层次结构，比如下面的HTML

<html>
  <head>
    <title>JavaScript DOM</title>
  </head>
  <body>
    <p>Hello DOM!</p>
  </body>
</html>

上面的HTML结构就像下面的树状结构

JavaScript-DOM

在这个DOM树中，Document是根节点，根节点有一个子节点，它是<HTML>元素。<HTML>元素也称之为Document元素。

每个HTML只能有一个Document元素，也就是<html>只能有一个，每个标签都可以由DOM树中的一个节点表示。

Node节点类型

DOM树中的每个节点都有节点类型，JavaScript使用整数来标识节点的类型。

下面是一些节点的类型

常量值描述
Node.ELEMENT_NODE1元素节点，像<p> 或 <div>
Node.TEXT_NODE3元素中的文本节点
Node.CDATA_SECTION_NODE4<!CDATA[[ … ]]>`节点
Node.PROCESSING_INSTRUCTION_NODE7XML文档的<?xml-stylesheet … ?>节点
Node.COMMENT_NODE8注释节点 <!-- … -->
Node.DOCUMENT_NODE9Document节点
Node.DOCUMENT_TYPE_NODE10<!DOCTYPE html>节点
Node.DOCUMENT_FRAGMENT_NODE11DocumentFragment 节点

使用nodeType属性可以获取节点的类型

node.nodeType

根据nodeType去判断节点的类型是否是元素类型

if (node.nodeType == Node.ELEMENT_NODE) {
  // 节点为元素类型
}

nodeName 和 nodeValue 属性

节点还有两个重要属性，分别为nodeName 和 nodeValue ，它们提供关于节点的特定信息

if (node.nodeType == Node.ELEMENT_NODE) {
  let name = node.nodeName; // <div>的nodeName为DIV
}

节点和元素

有时我们会混淆节点（Node）和元素（Element）的叫法。

节点是DOM树中任何对象的通用名称。它可以是任何内置的DOM元素，比如Document，或者它可以是HTML文档中指定的任何HTML标签，比如<div> 或 <p>。

而元素是指Node.ELEMENT_NODE为1的节点。

通过下图可清晰看出Node和Element间的关系和区别

Document-Object-Model-in-JavaScript

getElementById() 和querySelector()方法会返回一个Element类型的对象，而getElementsByTagName()或querySelectorAll()方法返回NodeList，它是节点的集合。

Node节点关系

任何节点都与DOM树中的其他节点有关系，这些关系就像是家谱一样。

比如<body>是<html>节点的子节点，而< html> 是 <body> 节点的父节点，<body> 节点是 <head> 节点的兄弟节点，因为它们有相同的父亲<html>。

下图说明了节点之间的关系：

JavaScript-DOM-Node-Relationships

总结

  • HTML或XML文档的节点树像家谱一样。
  • 每个标签都有nodeType属性来表示它的类型
  • 元素Element一般是指Node.ELEMENT_NODE的节点
  • 在DOM树中，一个节点肯定会与其他节点有关系。

今天我们复习了DOM的一些基础知识，明天继续。

如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新

小帅的编程笔记
关注
专栏目录
JS之DOM操作笔记
飘
04-24 338
 DOM的概述document object modelhtml文档加载到浏览器的内存中后，我们认为形成了一颗DOM树，即html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。我们可以通过js的DOM组件中的方法对内存中的DOM树上的结构和内容进行修改，即通过js动态的修改内存中的那一份html及css的代码。JS的DOM操作（重点！...
JS DOM 编程复习笔记--appendChild、textContent、innerText、innerHTML（五）
小帅的编程笔记
10-21 492
上一篇文章中我们使用appendChild()方法将我们创建的DOM元素插入到指定的父元素的最后位置。今天我们继续来看看这几个API，textContent、innerText、innerHTML，它们都是比较常用的，用来获取和设置HTML的内容或者标签。下面我们从appendChild开始 appendChild() 我们来复习一下语法 parentNode.appendChild(childNode); appendChild()将传入的childNode插入到parentNode的最后一个子元素的后
js dom笔记
PrimaryColor
07-30 229
WebApi API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log()) Web API的概念 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) 此处的Web API特指浏览器提供的API
JS DOM笔记（包含一些其他笔记主要是DOM）
m0_49378755的博客
09-21 235
基本的Dom操作
JSDOM笔记总结
aurora
04-27 402
JSDOM对象讲解1.讲解document对象1.1DOM的含义1.2学习JS DOM中 1.讲解document对象 本章节讲的是document DOM对象： 首先来了解下什么是document以及DOM： Attention： 首先来说一下这个document对象（通俗讲就是窗口文档对象），一个html文档就是一个窗口文档对象 document属于window对象下的一个子对象，所以你会发现使用DOM时，基本上不需要使用window.document 1.1DOM的含义 DOM(documen
JavaScript DOM学习笔记
Samuel的博客
08-13 690
DOM（Document Object Model） dom提供了操作html和xml的机会，他是一个操作html和xml功能的一类对象的集合 DOM的基本操作 document代表整个文档 NodeList，一种节点集合 有item(x)方法（与NodeList[x]效果一样） HTMLCollection，HTML文档中的一种集合类型 该集合是对元素的引用，也就是说不是元素的闪照 有item(x)方法；有namedItem(name)方法，通过标签的name属性获取某一项的引用（可以直接用中括号使用如
JS DOM 编程复习笔记 -- 属性操作（十）
小帅的编程笔记
10-26 204
今天我们来复习HTML属性和DOM对象属性之间的关联和使用。 当浏览器加载HTML页面时，会根据文档的DOM节点生成相应的DOM对象。 比如，下面的HTML中包含一个input元素 <input type="text" id="username"> 浏览器会生成一个HTMLInputElement对象 input元素有两个属性 type属性的值为text id属性的值为username 生成的HTMLInputElement对象也将具有相应的属性 input.type为text inpu
JS DOM 编程复习笔记 -- 操作style样式、class、getComputedStyle（十一）
小帅的编程笔记
10-27 343
今天我们来复习如何使用JavaScript DOM来进行内联样式修改，CSS class的修改，以及获取元素的真实样式，获取元素的真实宽高等。 目录 element.style window.getComputedStyle() element.className element.classList 设置内联样式 我们使用元素 style 属性来操作元素的内联样式。 style属性返回CSS属性的CSSStyleDeclaration只读对象，例如要将元素的color设置为红色 element.styl
JS DOM编程复习笔记 - DOMContentLoaded、load、beforeunload 和 unload（十四）
小帅的编程笔记
10-30 334
今天我们来学习与页面加载相关的事件，包括 DOMContentLoaded、load、beforeunload 和 unload。 简介 当我们打开一个页面时，会依次发生以下的事件： DOMContentLoaded – 浏览器完全加载HTML并构建DOM树。但并没有加载外部样式和图片等外部资源。这时我们可以查找DOM节点或者初始化页面等。 load – 浏览器完全加载了 HTML 以及图片和样式等外部资源。 当我们离开一个页面时，会依次发生以下事件： beforeunload - 在页面被关闭前将触
JS DOM编程复习笔记 - 三种事件绑定方式（十三）
小帅的编程笔记
10-29 222
今天我们将学习在JavaScript 中的三种绑定事件的方法。这在面试中也是一道必考题目。 目录 行内绑定 DOM 0级事件绑定 DOM 2级事件绑定 1）行内绑定事件 行内事件名称通常是以on开头，比如点击事件为onclick，要将事件处理程序和元素关联，我们在元素上增加对应的事件属性，比如： <button onclick="alert('点击我!')">保存</button> 当然事件处理程序可以调用已定义的函数。 例如： <script> functio
DOM课堂笔记
05-22
达*js DOM课堂详细笔记PPT，DOM操作是JS的重要一环，只有熟练的操作DOM才能用好JS
Js DOM学习笔记--回顾
qq_38409944的博客
05-14 727
js和html分离很重要 属性： display：inline；可以实现列表横向显示 外部引用css 注意点： title是鼠标移到上面显示的内容 alt是图片加载不出来显示的内容 为了减少对网站的请求次数 应该将.js文件合并到一个文件中 事件处理函数 如 onclick（“show(this);xx();”） 里面包涵多个js语句的时候 用分号隔开 1.对象有内建对象...
JS之DOM对象常用知识点整理
m0_54861649的博客
03-01 148
JS之DOM对象常用知识点整理 DOM树的介绍 获取元素对象的四种方式 通过元素ID获取对应元素对象—getElementByid(); 通过name属性获取所有需要的对象—getElementsByname() 通过标签名获取符合要求的所有元素 通过class属性获取所有符合要求的元素 获取节点对象的注意事项 元素对象常见属性 value属性 className属性 checked属性 innerHtml属性 DOM树的介绍 获取元素对象的四种方式 通过元素ID获取对应
javascript之dom详细笔记加练习
weixin_49213878的博客
09-13 1142
javascript-dom的详细笔记+小练习
JS原生DOM笔记
mof_geng的博客
12-17 568
获取页面元素方式 document.getElementById("btn"); document.getElementsByClassName("类样式的名字"); document.getElementsByName("name属性的值"); var div = document.getElementsByTagName("img"); document.querySelector(); ele
JavaScriptDOM笔记
qq_40526866的博客
07-06 411
JavaScript-DOM 一. 获取页面中元素的几种方式： 根据ID获取 ①. document.getELementById(“ID选择器”) 根据标签名获取 ②. document.getElementsByTagName(“标签名”) 通过H5新增的方法获取 ①. document.getElementsByClassName(“类名”) ②. document.querySelector(“选择器”)；这个只会返回第一个 ③. document.querySelectorAll(“选择器”)
DOM笔记
菜鸡成长站
03-11 1957
DOM1. DOM 简介1.1 什么是 DOM1.2 DOM 树2. 获取元素2.1 如何获取页面元素1. 根据 ID 获取2. 根据标签名获取3. 通过 HTML5 新增的方法获取4. 特殊元素获取3. 事件基础3.1 事件概述3.2 事件三要素3.3 执行事件的步骤常见的鼠标事件4. 操作元素4.1 改变元素内容4.2 常用元素的属性操作4.4 样式属性操作作业1： 用户名 显示隐藏内容作业2：下拉菜单作业3：开关灯 1. DOM 简介 1.1 什么是 DOM 文档对象模型（Document Objec
js学习笔记：DOM——DOM操作技术
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
10-20 545
动态脚本使用< script>元素可以向页面中插入js代码，一种方式是通过其src特性包含外部文件；另一种方式就是用这个元素本身来包含代码。 而动态脚本指的是，在页面加载时不存在，但在将来的某一时刻通过修改DOM动态添加的脚本。跟操作HTML元素一样，创建动态脚本也有两种方式：插入外部文件和直接插入js代码。 动态加载的外部js文件能够立即执行： var script = document.cre
《JavaScript+DOM编程艺术》笔记与重点解析
"《JavaScript+DOM编程艺术》笔记整理，涵盖了JavaScript的基础语法和DOM操作，适合前端开发人员复习和巩固JavaScript知识。" 这篇笔记详细介绍了JavaScript的语法和DOM编程的基本概念，以下是主要知识点： 1. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值