JavaScript 笔记(12)- DOM

原创 乘风逐月 随笔 JavaScript 258阅读 2018-05-25 17:46:10 举报

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

一、document

JavaScript 通过 Document 类型表示文档。document 对象是 Document 的一个实例,表示整个 HTML 页面,也是 window 对象的一个属性,可当成全局对象来访问。

1.document 的属性:

a.document.title: 保存页面标题-包含在 title 元素中的文本,也可以修改这个属性,结果反映在浏览器的标题栏中,但不会改变 title 元素。
b. document.URL: 保存页面完整的URL
c. docuemnt.domain: 保存页面的域名,可以修改该属性,只能修改为URL中包含的域。在页面包含框架时,不同子域的页面通讯,可以通过修改该属性设为相同的值即可。
d. document.referrer: 保存着链接到当前页面的那个页面的URL,没有源页面,则为空字符串
e. document.activeElement: 始终引用DOM中当前获得焦点的元素。(元素获得焦点的方式有:页面加载、用户输入、调用foucs()方法)
f. document.readyState: 判断文档是否加载完成,有两个值:loading 表示正在加载;complete 表示已经加载完成
g. document.compatMode : 检测页面的兼容模式,有两个值: CSSlCompat 表示标准模式, BackCompat 表示混杂模式

2. document 的方法

a. document.hasFoucs() : 判断文档是否获得焦点,是返回true,否则返回false。(主要用于提高web的无障碍性)

二、节点

1.节点类型

每个节点都有三个属性:nodeType,nodeName,nodeValue。
a.nodeType属性,表示节点的类型

节点nodeType值
元素节点1
属性节点2
文本节点3
document9

b.节点名称 nodeName
判断节点是哪种元素,可以根据节点的 nodeName 属性

节点nodeName值
元素节点大写的元素标签名
document#document
文本节点#text
属性节点属性名

c.节点的值 nodeValue

节点nodeValue值
元素节点null或undefined
文本节点文本内容
属性节点属性值
documentnull
2.节点关系
父子关系

a. node.childNodes: 该属性保存一个 NodeList 对象,是一个类数组对象,获得 node 下的所有直接子节点。childNodes 返回的是动态集合,不保存所有的节点,只保存节点的引用,每次访问该集合都要重新查找 DOM 树。
b. node.parentNode: 该属性获得 node 的直接上级父节点。
c. node.firstChild: 获取 node 的第一个子节点
d. node.lastChild: 获取 node 的最后一个子节点

兄弟关系

a. node.previousSibling: node 的上一个兄弟元素
b. node.nextSibling: node 的下一个兄弟元素
注:除 praentNode 外,其他关系属性都会受到看不见的空字符干扰,包括:回车,制表符,空格

三、操作节点

1.查找节点

a. docuemnt.getElementById(id): 通过 id 查找元素,无返回 null
b. document.getElementsByTagName(标签名): 返回包含一个包含指定标签名的 NodeList
c. document.getElementsByName(name名): 返回所有包含 给定 name 名的元素集合
d. document/node.getElementsByClassName(classname): 返回所有包含 给定 classname 名的元素集合
e. document.querySelector(css选择符): 返回匹配选择符的第一个元素
f. document.querySlectorAll(css选择符): 返回匹配选择符的所有元素集合
g. dcoument.forms: 返回所有 form 元素
h. document.links: 返回文档所有带 href 属性的 a 元素
i. document.anchors: 返回文档所有带 name 属性的 a 元素
j. document.images: 返回所有 img 元素

2.创建节点

a. node.cloneNode(boolean): 该方法会创建 node 的一个完全相同的副本。boolean 为 true,会深复制,即会复制 node 节点及其所有子节点;boolean 为 false ,会执行浅复制,即只复制 node 节点本身。
b. documen.createElement(标签名): 创建一个新元素
c. document.createTextNode(要插入到节点的文本):创建一个新的文本节点
d. document.createDocumentFragment():创建一个文档片段对象。当要创建多个平行子节点时,可以先创建文档片段对象,再将新子节点临时追加到里面,最后将文档片段追加到父元素中。避免多次修改DOM。

3.增加节点

a. node.appendChild(newNode): 向 node 的子元素末尾添加一个 newNode 节点。newNode 如果是一个页面已有的元素,那该节点会从原来的位置移到新位置。
b. node.insertBefore(newNode,someChild): 将 newNode 插入到 node 的子元素 someChild 前面。若 someChild 为null ,则会插入到末尾。

4.删除节点

a. node.replaceChild(newNode,someChild): 将 node 的子节点 someChild 替换为 newNode
b. node.removeChild(someChild): 从 node 的子元素中移除 someChild 节点
注: replaceChild和 removeChild 方法都返回移除的节点 someChild,someChild 节点还在文档中,但是页面上没有自己的位置。

5.读写节点内容

a.node.innerHTML: 读写元素的所有子节点的HTML内容
b.node.outerHTML: 读写元素及其所有子节点的HTML内容

6.节点属性

a. node.getAttribute(属性名): 获取元素属性值,不存在该属性,返回null
b. node.setAttribute(属性名,属性值): 设置元素属性
c. node.removeAttribute(属性名): 删除元素的属性

7.classList 属性

元素的 classList 属性是 DOMTokenList 类型的实例,是一个类数组对象。里面保存了元素的 class 类名。有 length 属性表示类名的个数,value属性表示 class 值的字符串。这个类型的方法有:
a.div.classList.remove(类名):删除给定的类名
b.div.classList.add(类名):添加给定的类名
c.div.classList.contains(类名):判断给定的类名是否存在,存在返回true,否则返回false
d.div.classList.toggle(类名):如果存在给定的类名,则删除它,如果不存在则添加它

8.节点样式

node.style: 节点的 style 属性,保存着通过HTML的style特性指定的所有样式信息,不包含通过外部样式表或嵌入样式表层叠而来的样式。在 style 特性中指定的css样式属性都将表现为这个style对象的属性。

9.元素大小

(1)偏移量
a. node.offsetHeight: 元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的宽度、上边框高度和下边框高度。
b. node.offsetWidth: 元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。
c. node.offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。
d. node.offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。
(2)内容大小
a. node.clientWidth: 元素内容区高度加上上下内边距高度
b. node.clientHeight: 元素内容区宽度加上左右内边距宽度
(3)滚动大小
a. node.scrollHeight: 滚动元素内的滚动内容的总高度
b. node.scrollWidth: 滚动元素内的滚动内容的总宽度
c. node.scrollLeft: 被隐藏在内容区域左侧的像素数,设置这个属性可以改变元素的横向滚动位置
d. node.scrollTop: 被隐藏在内容区域上方的像素数,设置这个属性可以改变元素的纵向滚动位置

四、其他方法

1.scrollIntoView()方法:

scrollIntoView() 方法可以在所有 HTML 元素上调用,通过滚动浏览器窗口或者某个容器元素,调用元素就可以出现在视口中。如果给该方法传入 true 作为参数,或者不传参数,那么窗口滚动之后会让调用云阿苏的顶部与视口顶部尽可能平齐。如果传入false作为参数,调用元素会尽可能全部出现在视口中。

2. contains() 方法

contains() 方法用于检测某个节点是不是调用该方法节点的子节点。例如:

3.contentDocument属性

contentDocument 属性是 Document 类型的实例,它包含一个指针,指向表示框架内容的文档对象,通过这个属性可以直接通过元素获取文档对象,例如:

评论 ( 8 )
最新评论
lawrence 7F 2018-05-26 16:41:42 8F

这个函数好像没什么用,但是不看高级JS,就不知道有这个函数

乘风逐月 6F 2018-05-26 16:14:40 7F

没用过,也是第一次见。还是习惯用以前经常用的。

lawrence 5F 2018-05-26 15:48:51 6F

matches函数你用过几次?我是第一次见这个函数

https://www.qdfuns.com/issue/11999/96b26094d3d2ca4d9b2e6b2b822c3f0b.html

乘风逐月 4F 2018-05-26 15:41:17 5F

一次看多少不知道,没注意过。浏览器相关函数只会注意实际项目中可能会用到的,有些太生僻或者没见过的就了解一下。

lawrence 2F 2018-05-26 13:07:53 4F

看这本书,发现一个新的函数。 document.body.webkitMatchesSelector
你平时注意这些浏览器相关函数么?

lawrence 2F 2018-05-26 12:00:24 3F

你看这本书你一次看多少页啊

乘风逐月 1F 2018-05-26 11:47:49 2F

在看JavaScript 高级程序设计,做笔记的时候其实删除了好多东西。每次看的时候我也心累,太多内容了。

lawrence 2018-05-26 11:05:28 1F

楼主在看什么书?一个document有这么多东西