DOM(Document Object Model),是浏览器提供给JavaScript操控HTML网页的接口,可以理解为是HTML文档的JavaScript形态
根据DOM会将HTML转换成一系列的节点,呈树状结构(DOM Tree),我们能够通过DOM提供的各种API来实现对HTML文档的,增,删,查,改等各种操作
12.01 - DOM 的结构
DOM 树结构图
节点(Node)
节点是DOM 中最基本的单位,像一颗树中的每根树枝。通过节点与节点之间的关系可以分为:
父节点 2. 子节点 3. 兄弟节点
而 document 对象中包含了所有的节点代表了整个DOM树的最上层,其下只有一个根节点<html>(rootnode)和一个文档类型节点<!doctype html>(DocumentType)
节点的类型
节点的类别可以通过 node.nodeType 属性得知其返回值对应如下的节点
元素节点(element):1
属性节点(attr):2
文本节点(text):3
注释节点(Comment):8
文档节点(document):9
文档类型节点(DocumentType):10
文档片段节点(DocumentFragment):11
12.02 - DOM相关
文档结构的加载顺序
解析HTML结构 ==> 加载外部的样式和脚本文件 ==> 解析并执行脚本代码 ==> 构键HTML DOM模型(触发DOMContentLoaded事件) ==> 加载图片等外部文件 ==> 界面加载完毕(触发load事件)
12.03 - Node的属性与方法
所有的节点都有一些属性和方法有的是共同有的是单独的,我们可以通过这些属性和方法进行对DOM的一系列操作
属性
nodeType:节点的类型,返回一个整数
nodeName:节点的名称
文档节点(document):
#document
元素节点(element):大写的标签名
属性节点(attr):属性的名称
文本节点(text):
#text
文档片断节点(DocumentFragment):
#document-fragment
文档类型节点(DocumentType):文档的类型
注释节点(Comment):
#comment
nodeValue:节点的文本值
只有文本节点(text)和注释节点(comment)有文本值
textContent:节点和它的所有后代节点的文本内容
与innerText一致,标签将不会被解析
baseURI:当前网页的绝对路径
console.log(document.baseURI);// file:///F:/home/js/t1.html
nextSibling / previousSibling:距离最近的前后同级节点
可以是元素节点,文本节点,注释节点等等
parentNode:返回元素的父节点
通过这种方式返回的父节点,肯能是
元素节点
,文档节点
,文档片段节点
parentElement:返回元素文档节点父节点
firstChild / lastChild:返回当前元素的第一个 / 最后一个子节点
包括所有的节点
childNodes:返回当前节点的所有子节点的集合,包含length属性
方法
appendChild(node):将node作为其最后一个子节点插入
hasChildNodes():判断一个元素是否有子节点,返回一个布尔值
任何类型的节点都参与判断
cloneNode([boolean]):克隆节点
布尔值参数代表是否需要同时克隆子节点
但是会失去所有绑定的事件
insertBefore(newNode, referenceNode):在referenceNode节点前插入newNode
referenceNode必须是父节点中的子节点
referenceNode如果为null则插入的元素的最后 但是不能省略元素
<div id="box"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <p id="addElement">new</p> <script> box.insertBefore(addElement,box.firstChild);// 添加到最前面 </script>
removeChild(childNode):移除子节点,并且返回被移除的节点
此方法需要在父级节点上调用然后找到自己再进行删除
<div id="box"> <p>1</p> <p>2</p> <p id="rmChild">3</p> <p>4</p> </div> <script> rmChild.parentNode.removeChild(rmChild);// 移除第三个p标签 </script>
replaceChild(newNode, oldChild):将oldChild替换为newNode,返回oldChild
oldChild 必须是元素的子节点
<div id="box"> <p>1</p> <p>2</p> <p id="rmChild">3</p> <p>4</p> </div> <p id="addElement">new</p> <script> box.replaceChild(addElement,rmChild);// 将box 里面的第三个p标签替换为 addElement </script>
contains(node):检测node是否为元素的后代节点,返回一个布尔值
12.04 - 元素节点的属性与方法
属性
children:获取元素的所有元素子节点,类似与css的 > 选择器
firstElementChild / lastElementChild:返回元素的(第一个 / 最后一个)
childElementCount:返回拥有的子节点数
tagName:元素的标签名
innerHTML:元素包含的HTML内容
outerHTML:元素自身以及包含的HTML内容
offsetParent:获取元素的定位父级节点
方法
append(node[, node ...]) / prepend(node[, node ...]):往前 / 后,添加一个或者多个
子节点
before(node[, node ...]) / after(node[, node ...]):往前 / 后,添加一个或者多个
兄弟节点
remove():从dom中删除自己
replaceWith(child):替换当前节点
宽高位置相关属性
clientWidth / clientHeight:元素自身的
可视
宽度 / 高度 (content+padding)
宽度不包括滚动条的宽度,不计算超出内容的宽度
offsetWidth / offsetHeight:元素自身的
总
宽度 / 高度 (content+padding+border)
宽度包括滚动条的宽度,不计算超出内容的宽度,同时需要获取整个网页的高度,需要从 document.documentElement (HTML对象)上获取
scrollWidth / scrollHeight:元素以及超出内容的
总
宽度 / 高度(content+padding)
宽度包括滚动条的宽度,计算超出内容的宽度
scrollTop / scrollLeft:元素垂直 / 水平 滚动条滚动的距离
一般结合 scroll 事件使用,同时需要获取整个网页的滚动高度,需要从 document.documentElement (HTML对象)上获取
offsetLeft / offsetTop:获取元素相对与定位父级的水平 / 垂直 距离
// 获取元素相对整个网页的位置
function getElePosition(ele){
var x,y,p;
do{
x = ele.offsetLeft,y = ele.offsetTop;
p = ele.offsetParent;
}while(p !== null);
return {x:x,y:y};
}
Element.getBoundingClientRect():方法返回元素的大小及其相对于视口的位置。
12.05 - document对象
document 对象为整个文档的最上层的对象,DOM中所有的节点都是document对象的子节点,并且包含了许多与DOM相关的方法与属性
属性
doctype:返回文档的文档申明
documentElement:返回根元素( HTML )
方法
createElement(nodeName):创建一个元素节点,参数为标签名
var newDiv = document.createElement('div');
newDiv.innerHTML = 'hello DOM!';
document.body.append(newDiv);
createTextNode(text):创建一个文本节点,参数为需要创建的文本的字符串
此方法与innerHTML添加的区别在于,不会影响到原有节点的属性或者方法的绑定,而innerHTML相当于重新添加了所有元素,将会失去事件的绑定
write() writeln()
cookie
浏览器在本地暂时存储数据的机制,通常为一些用户名,等等用户信息的存储
cookie相关
存储的数据会暂时被浏览器保存到本地
每个浏览器的cookie保存位置和方法不同 不能通用
存储的位置以域名为单位存储
chrome浏览器不能在本地的环境存储或使用必须在后台环境
默认情况下cookie只能保存到浏览器关闭,可以通过设置时间戳调整时间
cookie的读写
cookie实际上就是存储了一对一对的字符串的键与值,所以我们只需要给cookie赋值那么就可以存储cookie但是需要注意字符串有特定的格式:
存储格式:'key=value;'
读取格式:'name=amo; password=666666'
PS:每次只能存储一条数据,读取的时候为全部读取,多条数据之间用分号和空格隔开
// 设置
document.cookie = "name=amo;";
document.cookie = "password=666666;";
// 获取
console.log( document.cookie );// name=amo; password=666666
cookie生命周期
默认情况下cookie只能保存到浏览器关闭,如果我们需要cookie在一段时间内保存,我们在存储cookie的时候设置过期的时间戳
时间戳写在每条数据后的 expires 属性中代表当前数据的过期时间
时间戳需要转换为 UTC 的格式
// 设置固定时间戳
var dateUser = 'Sat, 07 Apr 2018 13:56:21 GMT';
document.cookie = "name=amo;expires=" + dateUser;
// 设置未来某个时间的时间戳
var datePassword = new Date( new Date().getTime() + 10000 ).toUTCString();// 设置未来10000毫秒后的时间戳
document.cookie = "password=666666;expires=" + date;
12.05 - 练习
自动悬浮导航
楼梯导航