一、内容结构

DOM模型
节点与节点树
DOM节点操作
- 创建添加
- 删除
- 查找
- 替换修改
- CSS操作
BOM 概念
Window 对象
Navigator 对象
History 对象
Location 对象

二、文档及视频资源

w3school HTML 教程 w3school HTML 标签参考手册 MDN HTML 教程 MDN HTML 元素参考 w3school CSS 教程 w3school CSS 参考手册 MDN CSS 教程 MDN CSS 参考手册 w3school JS 教程 MDN JS 教程阮一峰 JavaScript 教程阮一峰 ECMAScript 6 教程在线文档用于查阅参考资料

黑马程序员web前端开发HTML与CSS入门教程尚硅谷Web前端零基础入门HTML5+CSS3基础教程黑马程序员JavaScript入门教程尚硅谷JavaScript基础入门完整版在线视频学习资源用来辅助学习，帮助理解不太清楚的知识点

三、知识点总结

1. DOM 模型

（1）DOM

DOM 即“文档对象模型”Document Object Model
DOM是 JavaScript 操作网页的接口
DOM将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作

W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

这里我们只介绍HTML DOM 标准模型

（2）HTML DOM模型

HTML DOM 是 HTML 的标准对象模型和编程接口包括：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

2. 节点 Node

DOM 的最小组成单位叫做节点（node）

（1）分类

文档节点 document

整个 HTML 文档，整个文档树的顶层节点

元素节点 element

HTML 元素

属性节点 attr

元素的属性

文本节点 text

元素中的文本内容

文档类型节点 documenttype

即doctype标签

注释节点 comment

文档或元素中的注释内容

文档片段节点 documentfragment

所有节点都继承自原生的节点对象Node，具有一些共同的属性和方法

（2）共有属性

节点所有共有属性都继承自Node接口原型对象的属性及方法以下仅介绍常用的部分属性方法：

nodeType 表示节点的类型

返回一个整数值 Node 对象定义有分别对应这些节点类型的数值类型常量

文档节点（document） 9 or Node.DOCUMENT_NODE
元素节点（element） 1 or Node.ELEMENT_NODE
属性节点（attr） 2 or Node.ATTRIBUTE_NODE
文本节点（text） 3 or Node.TEXT_NODE
文档片断节点（DocumentFragment） 11 or Node.DOCUMENT_FRAGMENT_NODE
文档类型节点（DocumentType） 10 or Node.DOCUMENT_TYPE_NODE
注释节点（Comment） 8 or Node.COMMENT_NODE
nodeName 表示节点的名称

返回一个字符串

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

返回一个字符串

文本节点（text）文本内容
注释节点（comment）注释内容
属性节点（attr）属性值
其他 null

其他部分属性后续会陆续介绍，参考链接

3. 节点树 Node Tree

（1）简介

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

（2）结构

浏览器原生提供document节点，代表整个文档文档的第一层有两个节点，第一个是文档类型节点（<!doctype html>），第二个是 HTML 网页的顶层容器标签；后者构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点

节点都有三种层级关系

父节点关系 parentNode 直接的那个上级节点
子节点关系 childNodes 直接的下级节点
同级节点关系 siblingNodes 拥有同一个父节点的节点

DOM 提供操作接口，用来获取与操作这三种关系的节点

4. NodeList 节点集合接口与 HTML Collection 元素节点集合接口

两者都是节点集合，可以容纳多个节点，是类数组对象，可以简单理解为一种特殊的数组区别是，NodeList可以包含各种类型的节点，HTMLCollection只能包含 HTML 元素节点

length 属性获取包含节点/元素节点个数
[ ] 运算符或 item(index) 方法根据下标访问相应的节点/元素节点

item方法index越界或负数会返回null

forEach(function) 方法遍历所有成员，每次遍历调用一次回调函数

仅 NodeList 节点集合拥有该方法

namedItem() 方法根据id属性或name属性值访问对应的元素节点

可以利用slice方法转为数组 Array 对象

var children = document.body.childNodes;
var nodeArr = Array.prototype.slice.call(children);

参考链接

5. Document 节点

document 节点对象代表整个网页文档 document 对象有不同的办法可以获取：

正常的网页，直接使用 document 或 window.document
iframe框架内的网页，使用 iframe 节点的 contentDocument 属性
Ajax 操作返回的文档，使用 XMLHttpRequest 对象的 responseXML 属性
内部节点的 ownerDocument 属性

参考链接

6. Element 节点

Element节点对象对应网页的 HTML 元素每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象，即元素节点参考链接

7. DOM 节点操作

虽然节点类型很多，但一般我们只操作元素节点和document节点，通过以上节点来操作其他的节点，以下操作基本上只针对元素节点

（1）查询 DOM 节点

（i）获取元素节点

document.getElementById(id) 通过 id 属性 获取一个元素节点对象

返回一个元素节点

document.getElementsByTagName(tag) 通过 标签名 获取一组元素节点对象

返回一个 HTML Collection 对象

document.getElementsByName(name) 通过 name 属性获取一组元素节点对象

返回一个 HTML Collection 对象

document.getElementsByClassName(class) 通过 class 属性 获取一组元素节点对象

返回一个 HTML Collection 对象

document.querySelector(selector) 通过 CSS 选择器形式获取第一个匹配元素节点对象

返回匹配到的第一个元素节点对象

document.querySelectorAll(selector) 通过 CSS 选择器形式获取一组元素节点对象

返回一个 HTML Collection 对象

<ul class="list">
  <li id="first"></li>
  <li name="second"></li>
  <li></li>
</ul>

<script>
  document.getElementById("first");								// 返回 <li id="first"></li>
  document.getElementsByTagName("li");						// 返回 HTMLCollection
  document.getElementsByName("second");						// 返回 NodeList
  document.getElementsByClassName("list");				// 返回 HTMLCollection
  document.querySelector(".list>#first");					// 返回 <li id="first"></li>
  document.querySelectorAll(".list>#first");			// 返回 NodeList
</script>

（ii）获取元素子节点

需要通过指定元素节点对象调用

el.getElementsByTagName(tag) 获取当前节点的指定标签名

返回一个 HTML Collection 对象

document.querySelector(selector) 通过 CSS 选择器形式获取第一个匹配元素节点对象

返回匹配到的第一个元素节点对象

document.querySelectorAll(selector) 通过 CSS 选择器形式获取一组元素节点对象

返回一个 HTML Collection 对象

el.innerHTML 表示当前节点内部的 HTML 代码

返回 HTML 代码字符串相应的 el.outerHTML 返回包含该节点在内的 HTML 代码

el.childNodes 表示当前节点的所有子节点

返回 NodeList 对象

el.children 表示当前节点的所有子元素节点

返回 HTML Collection 对象

el.firstChild 表示当前节点的第一个子节点

返回节点对象

el.firstElementChild 表示当前节点的第一个子元素节点

返回元素节点对象

el.lastChild 表示当前节点的最后一个子节点

返回节点对象

el.lastElementChild 表示当前节点的最后一个子元素节点

返回元素节点对象

el.childElementCount 表示当前节点的所有元素子节点的数目

返回一个整数

el.dataset.attr ** 读取当前元素节点自定义属性**

元素节点自定义属性应为data-开头的属性，且只能包含小写英文字母、数字、连词线（-）、点（.）、冒号（:）和下划线（_）；转为dataset属性名会省略data-并把连词线（-）去除转其后小写英文字母为大写如：data-abc-def对应dataset.abcDef，data-abc-1对应dataset["abc-1"] 该属性在事件传参中应用非常广

<ul>
  <li></li>
  <!--  -->
  <li></li>
</ul>

<script>
  var lis = document.getElementsByTagName("ul")[0];
  
  console.log(lis.innerHTML);												// 打印 <li></li>...
  console.log(lis.childNodes.length);								// 打印 7
  console.log(lis.children.length);									// 打印 2
</script>

（iii）获取元素父节点

需要通过指定元素节点对象调用

el.parentNode 表示当前节点的父亲节点

返回元素节点对象或文档节点或文档片段节点

el.parentElement 返回当前节点的父元素节点

返回元素节点对象实际使用时两者差别不大，因为父节点除了文档节点等外都是元素节点

（iv）获取元素兄弟节点

el.previousSibling 表示当前节点的前一个兄弟节点

返回节点对象

el.previousElementSibling 表示当前节点的前一个兄弟元素节点

返回元素节点对象

el.nextSibling 表示当前节点的后一个兄弟节点

返回节点对象

el.nextElementSibling 表示当前节点的后一个兄弟元素节点

返回元素节点对象

<ul>
  <li></li>
  <!--  -->
  <li></li>
</ul>

<script>
  var first = document.getElementsByTagName("li")[0];

  console.log(first.parentNode);							        // 打印 <ul>...</ul>
  console.log(first.previousSibling);							    // 打印 #text
  console.log(first.previousElementSibling);					// 打印 null
  console.log(first.nextSibling);							        // 打印 #text
  console.log(first.nextElementSibling);							// 打印 <li><li>
</script>

（v）其他查询方法

document.doctype 获取节点
document.body 获取 body 元素
document.head 获取 head 元素
document.documentElement 获取 html 元素
document.all 获取文档中所有元素
document.scrollingElement 获取文档的滚动元素

正常情况下返回html元素可以利用其属性让页面滚动到浏览器顶部document.scrollingElement.scrollTop = 0;

document.activeElement 获取获得当前焦点的 DOM 元素

通常会返回表单元素，若无焦点返回body元素或null

document.fullscreenElement 获取当前以全屏状态展示的 DOM 元素

若非全屏状态返回null 可以用于判断video元素有无处于全屏状态

document.scripts 获取所有<script>节点

返回 HTML Collection 实例

document.styleSheets 获取网页内嵌或引入的 CSS 样式表集合

返回的是 Style Sheet List 实例

document.title 获取与修改HTML网页的标题

（2）创建 DOM 节点

document.createElement(tag) 根据标签名创建元素节点

返回一个元素节点对象

document.createTextNode(text) 根据文本内容创建文本节点

返回一个文本节点对象

el.cloneNode() 克隆节点

返回一个节点，会拷贝节点所有属性除了该节点上的事件回调函数注意克隆时可能出现id和name属性相同的情况，可能需要进行处理

（3）添加 DOM 节点

father.appendChild(son) ** 向父节点中添加新的子节点**

插入位置默认为最后一个节点之后返回添加的直接点

father.append(son or text) 向父节点中添加新的子节点或文本节点

插入位置默认是最后一个子元素节点之后允许多个参数无返回值 prepend()方法类似，添加位置为第一个子元素节点之前

father.insertBefore(sonNew, sonPos) ** 向父节点的指定子节点前**插入新的子节点
son.after(son or text) 当前节点的后面插入同级节点

允许多个节点参数 before()方法类似

（4）删除 DOM 节点

father.removeChild(son) ** 删除父节点中指定子节点**

可用 son.fatherNode.removeChild(son) 移除本元素

son.remove() 移除当前节点

（5）替换 DOM 节点

father.replaceChild(sonNew, sonOld) 将父节点的指定子节点替换为新的子节点
son.replaceWith(node) 使用参数节点替换当前节点

该节点需为子节点

（6）比较 DOM 节点

isConnected 表示当前节点是否在文档之中

可以检测创建的节点有无插入文档中

el.contains(el) 表示参数节点是否为当前节点或其子节点或后代节点
isEqualNode(el) 检测两个节点是否相等

相等指的是类型相同、属性相同、子节点相同

isSameNode(el) 检测两个节点是否相同

以上方法均返回一个布尔值

（7）获取与设置 DOM 元素节点属性

el.attr 获取及设置属性值

特例：class 属性需使用 className；for属性需使用htmlFor

<input id="demo"/>

<script>
  // 获取输入框元素节点并将其value属性值改变为 "demo"
  var demo = document.getElementById("demo");
  demo.value = "demo";
</script>

el.getAttribute(attr) 获取元素节点相应属性
el.setAttribute(attr, value) 设置元素节点相应属性
el.hasAttribute(attr) 检测元素节点是否有相应属性
el.removeAttribute(attr) 删除元素节点相应属性

（8）获取与设置 DOM 元素节点CSS样式

el.style.attr 读取或设置元素内联样式

通过该方法读取和设置的都是内联样式，会覆盖style标签内的样式或外部样式表导入的样式，但是覆盖不了设置了 !important 的样式 CSS 中属性名中含有 "-" 的，需要将属性名改为驼峰式，例如 background-color -> backgroundColor 如果 CSS 属性名是 JavaScript 保留字，则规则名之前需要加上字符串css 所有属性值都是字符串，可能需要添加单位

el.style.getPropertyValue(attr) 获取元素内联样式
el.style.removeProperty(attr) 删除元素内联样式
el.style.setProperty(attr) 设置元素内联样式
window.getComuptedStyle(element) 读取元素当前样式（可以了解元素所有样式设置）

var elem = document.getElementById("test");
var prop = window.getComputedStyle(elem, null).getPropertyValue("background-color");

（9）其他

下列属性都只读

el.clientWidth、el.clientHeight，获取元素可见宽度和可见高度
- 返回数值
- 包括内容区和内边距
el.offsetWidth、el.offsetHeight，获取元素宽度和高度
- 返回数值
- 包括内容区、内边距和边框
el.offsetParent，获取当前元素的定位（position）父元素
- 返回元素节点对象
el.offsetTop、el.offsetLeft，获取当前元素相对于定位父元素的偏移量
- 返回数值
el.scrollWidth、el.scrollHeight，获取元素滚动区域的宽高
- 返回数值
- 当父元素的宽高比子元素的小时，子元素会溢出父元素，此时子元素的可滚动区域宽高可以由父元素的 scrollWidth、scrollHeight 得到
el.scrollLeft、el.scrollTop，获取元素水平或垂直滚动的距离
- 返回数值
- 可滚动区域的水平和垂直滚动距离可以由父元素的 scrollWidth、scrollHeight 得到
- 当满足 scrollHeight - scrollTop == clientHeight 时，滚动到底部

8. BOM 模型

BOM 即浏览器对象模型（Browser Object Model）在 BOM 中为我们提供了一组对象，用来完成对浏览器的操作

Window 代表整个浏览器窗口

同时 window 也是网页的全局对象

Navigator 代表当前浏览器的信息

通过该对象可以用来识别不同的浏览器

Location 代表当前浏览器地址栏信息

通过该对象可以获取地址信息，或者操作浏览器跳转页面

History 代表浏览器的历史记录

可以通过该对象来操作浏览器历史记录由于隐私原因，该对象不能够获取具体的历史记录，只能操作浏览器向前或向后翻页

Screen 代表用户屏幕信息

通过该对象可以获取到用户的显示器相关信息

9. Window 对象

window 对象代表浏览器窗口，也是网页的全局对象可参考链接

（1）全局对象

所有全局 JS 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性

innerHeight、innerWidth 等变量 document、navigator 等对象

全局函数是 window 对象的方法

alert()、open() 、promote() 、confirm()等函数

全局对象可以直接用变量名调用，省略 window. 前缀

document、location、history、navigator、console、screen、localStorage、sessionStorage 等对象比如 window.document 或 document 都可

（2）定时调用

setInterval(fun, time) 方法

可以将一个函数每隔一段时间调用一次第一个参数为回调函数第二个参数为数值，表示每次调用的间隔时间，单位为毫秒返回值为数值，用来作为定时器的唯一标识在绑定定时器前记得清除同一元素上的定时器

clearInterval() 方法

可以关闭定时调用参数为定时器的唯一标识

（3）延时调用

用法同 clearInterval

setTimeout(fun, time) 方法

可以将一个函数隔一段时间后执行，且只会执行一次

clearTImeout() 方法

关闭延时调用延时调用和定时调用可以互相代替

（4）用户交互

alert()
prompt()
confirm()

三个方法样式均由浏览器决定，JS无法修改三个方法都具有堵塞效应，一旦弹出对话框，整个页面就是暂停执行，直至用户做出反应

谷歌浏览器演示如下 alert('a')
promote('a') confirm('a')

10. Navigator 对象

Navigator 对象包含浏览器和系统信息由于历史原因，navigator 对象中的大部分属性都不常使用一般只使用 userAgent 来判断浏览器信息，但仍存在误判的可能（因为用户可以改变userAgent）判断浏览器类型目的主要是为了检测用户是否支持选定的属性，现在更推荐按需检测的方法，即分别判断将要使用的属性是否为浏览器支持其余属性方法可参考链接这里不做过多介绍

（1）userAgent 属性

○ 火狐
	■ Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecklo/20100101 Firefox/50.0
○ Chrome
	■ Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
○ Edge
	■ Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 Edg/92.0.902.73
○ IE8
	■ Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; /NET4.0E
○ IE11 (Edge)
	■ Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; /NET4.0E; rv:11.0) like Gecko
	■ 在 IE11 中已经将微软和 IE 相关的标识已经去除了，userAgent 不能区分 IE11
	■ 可以通过 IE 特有的对象来判断浏览器类型，ActiveXObject

（2）判断浏览器

var ua = navigator.userAgent;
if(/firefox/i.test(ua)){
  console.log("Firefox");
}else if(/chrome/i.test(ua)){
  console.log("Chrome");
}else if(/msie/i.test(ua)){
  console.log("IE");
}else if("ActiveXObject" in window){
  console.log("IE11(Edge)");
}

11. Screen 对象

表示当前窗口所在的屏幕，提供显示设备的信息

Screen.height：浏览器窗口所在的屏幕的高度（单位像素）

除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率

Screen.width：浏览器窗口所在的屏幕的宽度（单位像素）
Screen.availHeight：浏览器窗口可用的屏幕高度（单位像素）

因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度

Screen.availWidth：浏览器窗口可用的屏幕宽度（单位像素）

其余属性可参考链接

12. History 对象

History 对象，它表示当前窗口的浏览历史由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航

length 属性

可以获取到当前访问的链接数量

back() 方法

可以用来回退到上一个页面

forward() 方法

可以用来跳转到下一个页面

go() 方法

可以用来跳转到指定页面需接收一个整数作为参数

1，向前跳转一个页面，相当于 forward()
2，向前跳转两个页面
-1，向后跳转一个页面，相当于 back()
-2，向后跳转两个页面
等等

以上三个方法若超出实际存在范围则无效

history.go(0)相当于刷新当前页面

其余方法可参考链接

13. Location 对象

Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法直接打印 location 对象，可以打印当前页面的完整路径。直接给 location 对象赋值为新的路径（相对或绝对路径），则页面会自动跳转到该路径，并且会生成历史记录

href 属性

返回当前页面完整路径，相当于直接打印 location 对象允许跨域写入

hostname 属性

返回路径上主机名

path 属性

返回路径名

protocol 属性

返回协议名

port 属性

返回端口号

assign() 方法

用来跳转到其他页面，相当于直接给 location 赋值

reload() 方法

用来重新加载页面参数 true 会重新请求，false 不会重新请求而是从缓存中加载

replace() 方法

用来跳转到其他页面，不会生成历史记录

可以应用于当脚本发现当前是移动设备时，就立刻跳转到移动版网页

其余可参考链接

四、作业及提交方式

1. 提交作业

提交课后作业和笔记可以积累积分，积累积分可以获得奖励课后作业发我的邮箱3305614186@qq.com
发送邮件主题按如下格式前端-姓名-第x周-第x次，如前端-陈思远-第1周-第1次本次课程作业在2月18日之前发送到我的邮箱

2. 作业内容

完成一个添加及删除学生信息，可以练习DOM节点相关操作，参考效果如下图可以通过下面表单提交学生信息并在上面表格显示表格各列后有按钮可以删除表格该项

可以利用onclick属性给元素绑定点击事件处理函数
如:

<button type="button" id="g"></button>

<script>
  document.getElementById('g').onclick = function () {
    // 当按钮被点击时会调用该函数
  };
</script>

可以根据自己需要添加查找修改等功能

3. 作业参考代码

参考代码已上传Gitee和Github仓库 Gitee链接 Github链接

Files

前端 · 第4周第2次 · JS学习-3· 2022_2_11.md

Latest commit

History

前端 · 第4周第2次 · JS学习-3· 2022_2_11.md

File metadata and controls

一、内容结构

二、文档及视频资源

三、知识点总结

1. DOM 模型

（1）DOM

（2）HTML DOM模型

2. 节点 Node

（1）分类

（2）共有属性

3. 节点树 Node Tree

（1）简介

（2）结构

4. NodeList 节点集合接口 与 HTML Collection 元素节点集合接口

5. Document 节点

6. Element 节点

7. DOM 节点操作

（1） 查询 DOM 节点

（i）获取元素节点

（ii）获取元素子节点

（iii）获取元素父节点

（v）其他查询方法

（2） 创建 DOM 节点

（3） 添加 DOM 节点

（4） 删除 DOM 节点

（5） 替换 DOM 节点

（6） 比较 DOM 节点

（7） 获取与设置 DOM 元素节点属性

（8） 获取与设置 DOM 元素节点CSS样式

（9） 其他

8. BOM 模型

9. Window 对象

（1）全局对象

（2）定时调用

（3）延时调用

（4）用户交互

10. Navigator 对象

（1）userAgent 属性

（2）判断浏览器

11. Screen 对象

12. History 对象

13. Location 对象

四、作业及提交方式

1. 提交作业

2. 作业内容

3. 作业参考代码

4. NodeList 节点集合接口与 HTML Collection 元素节点集合接口

（1）查询 DOM 节点

（2）创建 DOM 节点

（3）添加 DOM 节点

（4）删除 DOM 节点

（5）替换 DOM 节点

（6）比较 DOM 节点

（7）获取与设置 DOM 元素节点属性

（8）获取与设置 DOM 元素节点CSS样式

（9）其他