好家伙，本篇为《JS高级程序设计》第十四章“DOM编程”学习笔记

 

1.Document类型

Document 类型是 JavaScript 中表示文档节点的类型。

在浏览器中，文档对象 document 是 HTMLDocument 的实例（HTMLDocument 继承 Document），表示整个 HTML 页面。

document 是 window 对象的属性，因此是一个全局对象。

（文档节点，html标签的上级）

1.1.文档子节点

　　使用 documentElement 属性可以更快更直接地访问<html>元素

1.2.documentElement和 childNodes[1]都指向同一个值，即 <html>元素。

    console.log(document.documentElement);

    console.log(document.childNodes[0]);

    console.log(document.childNodes[1]);

    console.log(document.firstChild);

 

1.3.定位元素

DOM 最常见的情形可能就是获取某个或某组元素的引用,

HTMLDocument 类型上定义的获取元素的方法有三个

getElementById()这个方法你应该再熟悉不过了

唯一需要注意的就是如果页面中存在多个具有相同 ID 的元素，则 getElementById()返回在文档中出现的第一个元素。

所以我们来讲讲getElementsByTagName()方法

在此之前，我们需要知道两个集合

HTMLCollection 和 NodeList

HTMLCollection 和 NodeList 的区别 - 掘金 (juejin.cn)

(1)HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（与 arguments 相似的类数组 (array-like) 对象），

还提供了用来从该集合中选择元素的方法和属性。

(2)NodeList 对象是节点的集合，通常是由属性，如Node.childNodes 和 方法，如document.querySelectorAll 返回的。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　---来自MDN文档

试用一下：

console.log(document.body.childNodes);

 

所以我们大概可以知道，NodeList 对象是节点的集合，HTMLCollection 是元素的集合，且两者都是实时的。

getElementsByTagName()方法：

getElementsByTagName()是另一个常用来获取元素引用的方法。

这个方法接收一个参数，即要 获取元素的标签名，返回包含零个或多个元素的 NodeList。

在 HTML 文档中，这个方法返回一个 HTMLCollection 对象。

let div = document.getElementsByTagName("div");

    console.log(div)

    console.log(div[1].id)

    console.log(div.item(1).id)

 

2.Element 类型

除了Document 类型，Element 类型就是Web开发中最常用的类型了。

Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。

这个接口描述了所有相同种类的元素所普遍具有的方法和属性。

HTMLElement 接口表示所有的 HTML 元素。

Element 表示XML或HTML 元素，对外暴露出访问元素标签名、子节点和属性的能力。（最常用div元素就是Element类型）

所有 HTML 元素都通过 HTMLElement 类型表示，包括其直接实例和间接实例。

2.1.div属性

 id，元素在文档中的唯一标识符；

 title，包含元素的额外信息，通常以提示条形式展示；

 lang，元素内容的语言代码（很少用）；

 dir，语言的书写方向（"ltr"表示从左到右，"rtl"表示从右到左，同样很少用）；

 className，相当于 class 属性，用于指定元素的 CSS 类（因为 class 是 ECMAScript 关键字， 所以不能直接用这个名字）。

所有这些都可以用来获取对应的属性值，也可以用来修改相应的值。

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

总之他们都是div的属性就对了

2.2.div属性方法

属性相关的 DOM 方法 主要有 3 个：getAttribute()、setAttribute()和 removeAttribute()。

（查，改，删）

    let div = document.getElementById("div1");

    console.log(div);

    console.log(div.getAttribute("id"));

    console.log(div.setAttribute("id","div3"));

    console.log(div.removeAttribute("class"));

2.3.创建元素

使用 document.createElement()方法创建新元素(这个用的多了)

let div = document.createElement("div");

在新元素上设置这些属性只会附加信息。因为这个元素还没有添加到文档树，所以不会影响浏览器 显示。

要把元素添加到文档树，可以使用 appendChild()、insertBefore()或 replaceChild()。（其中appendChild()最常用） 

document.body.appendChild(div);

元素被添加到文档树之后，浏览器会立即将其渲染出来。之后再对这个元素所做的任何修改，都会 立即在浏览器中反映出来。

第121篇: DOM常用类型（Document、Element）的更多相关文章

  1. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  2. 深入理解DOM节点类型第七篇——文档节点DOCUMENT

    × 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...

  3. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  4. 第10章 文档对象模型DOM 10.2 Document类型

    Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示 ...

  5. SVG DOM常用属性和方法介绍(1)

    12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...

  6. Javascript操作DOM常用API总结

    基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...

  7. 【跟着子迟品 underscore】常用类型判断以及一些有用的工具方法

    Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...

  8. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  9. Javascript高级编程学习笔记（37）—— DOM（3）Element

    Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...

  10. [总结]JS操作DOM常用API详解

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

随机推荐

  1. [转帖]远超DDR4，速度可达DDR5 6400！DDR5内存技术、产品解析

    https://www.sohu.com/a/326810241_616364 内存是计算机技术的重要组成部分,经历了长时间的竞争更替和路线选择之后,PC内存技术被稳定在以DDR技术为基础的发展路线上 ...

  2. [翻译]-hugePage的简要说明--部分内容

    hugePage的简要说明 本篇文档的主旨给linux内核支持的大页内存做一个简要的概述. 大页内存的实现是建立在大多数现代架构所都支持的多级页大小的特性之上的. 举例: x86架构下大部署CPU 的 ...

  3. Github搜索代码技巧

    ↵相关链接: 码云(gitee)配置SSH密钥 码云gitee创建仓库并用git上传文件 git 上传错误This oplation equires one of the flowi vrsionso ...

  4. Docker从认识到实践再到底层原理（五）｜Docker镜像

    前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量博客汇总 然后就是博主最近最花时间的一 ...

  5. auto_ptr｜unique_ptr｜shared_ptr｜weak_ptr｜你都搞明白了吗？

    前言 那么这里博主先安利一些干货满满的专栏了! 首先是博主的高质量博客的汇总,这个专栏里面的博客,都是博主最最用心写的一部分,干货满满,希望对大家有帮助. 高质量干货博客汇总https://blog. ...

  6. javascript按钮通过cookie限制60s后才可以点击

    javascript按钮通过cookie限制60s后才可以点击 1️⃣ 首先创建一个html页面,放入一个按钮 2️⃣ 设置点击按钮的触发函数 一般当点击按钮都会有一些业务需要,在需求结束后,触发sa ...

  7. Sea-Search03总结&&un finish

    使用到的设计模式 Facade门面模式 为何使用? 在搜索项目中,由于使用Mvc架构且数据库中各种不同类型的数据源并没有放在同一张表,于是我们不可避免的在Controller中需要注入多个servic ...

  8. 【译】VisualStudio 17.9预览3带来了令人兴奋的代码搜索改变

    随着 VisualStudio17.9预览版3的发布,我们为代码搜索(也称为 All-In-One Search)带来了一些令人兴奋的增强.自从我们上次更新搜索体验以来,我们一直在努力改进体验,并想出 ...

  9. OI中的一些数学小技巧

    在OI比赛中,如果能够灵活地运用一些数学小技巧,是能够很好地优化计算的时间和正确性的. 既然说了是小技巧,那么这些指的都是一些技巧,一般是不会单独成题的. 本博客或会随着作者的见识而更新 Better ...

  10. The Missing Semester - 第五讲 学习笔记

    第五讲 命令行环境 课程视频地址:https://www.bilibili.com/video/BV1Dy4y1a7BW 课程讲义地址:https://missing-semester-cn.gith ...