何为DOM
DOM:JavaScript操作网页的接口,全称为“文档对象模型”(Document Object Model)。
主要特点:
1.整个文档是一个文档节点
2.每个标签是一个元素节点
3.包含在元素中的文本是文本节点
4.每一个属性是一个属性节点
5.注释是注释节点
DOM树是什么?
DOM树是结构,展现元素和元素之间的关系.
理解节点的具体含义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM 学习</title>
</head>
<body>
<section>
<img src="a.jpg" alt="图片">
<p>点击跳转 <a href="https://baidu.com/">百度一下</a></p>
</section>
</body>
</html>
1.元素节点: 一个元素,存在于DOM中。
2.根节点: 树中顶层节点,在HTML的情况下,总是一个HTML节点(其他标记词汇,如SVG和定制XML将有不同的根元素)。
3.子节点: 直接位于另一个节点内的节点。例如上面例子中,IMG是SECTION的子节点。
4.后代节点: 位于另一个节点内任意位置的节点。例如 上面例子中,IMG是SECTION的子节点,也是一个后代节点。IMG不是BODY的子节点,因为它在树中低了BODY两级,但它是BODY的后代之一。
5.父节点: 里面有另一个节点的节点。例如上面的例子中BODY是SECTION的父节点。
6.兄弟节点: DOM树中位于同一等级的节点。例如上面例子中,IMG和P是兄弟。
7.文本节点: 包含文字串的节点
DOM操作
操作DOM方法
目前流行的操作DOM方法为Document.querySelector()
,假如你想操作<a>元素
,则可以:
var link = document.querySelector('a');
现在有了一个存储在变量link 中的元素引用,你可以使用它的可用属性和方法来操作它(在<a>
元素的情况下定义为接口HTMLAnchorElement,它更常常用的父接口是HTMLElement和表示DOM中所有节点的Node)。首先,更新 Node.textContent属性的值来修改链接中的文字。
link.textContent = 'Mozilla Developer Network';
也能修改链接指向的URL,使得它被点击时不会走向错误的位置。
link.href = 'https://aaa.com';
注:
1.如果想对多个元素进行匹配和操作,你可以使用Document.querySelectorAll(),这个方法匹配文档中每个匹配选择器的元素,并把它们的引用存储在一个array中。
2.在较老的浏览器中使用以下两种方法较多,但是并没有querySelector()方便。
2.1 Document.getElementById(),选择一个id属性值已知的元素,例如<p id="myId">My paragraph</p>
。ID作为参数传递给函数,即
var elementRef = document.getElementById('myId')。
2.2 Document.getElementsByTagName(),返回页面中包含的所有已知类型元素的数组。如<p> <a>
。元素类型作为参数传递给函数,即
var elementRefArray = document.getElementsByTagName('p').
通过DOM创建、增删元素
创建:
1.获取到<section>
元素的引用
2.用Document.createElement()创建一个新的段落
3.用Node.appendChild()方法在后面追加新的段落
4.在内部链接的段落中添加文本节点
5.获取内部连接的段落的引用,并把文本节点绑定到这个节点上
//1.
var sect = document.querySelector('section');
//2.
var para = document.createElement('p');
para.textContent = '欢迎光临.';
//3.
sect.appendChild(para);
//4.
var text = document.createTextNode(' — 增加片段文字');
//5.
var linkPara = document.querySelector('p');
linkPara.appendChild(text);
移动与删除元素:
1.把具有内部链接的段落移到sectioin的底部
2.删除节点
3.删除一个仅基于自身引用的节点
//1.
sect.appendChild(linkPara);
//2.
sect.removeChild(linkPara);
//3
linkPara.parentNode.removeChild(linkPara);
DOM操纵CSS样式
有2种方法,通过JavaScript以不同的方式来操作CSS样式;
方法1:
在想要动态设置样式的元素内部添加内联样式。
用HTMLElement.style属性来实现:
para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.padding = '10px';
para.style.width = '250px';
para.style.textAlign = 'center';
改变后:
改变前:
方法2:
Element.setAttribute()方法,直接设置你想进行修改的元素属性的值
para.setAttribute('class', 'highlight');
操作DOM实现自适应窗口大小
1.获取这个div的引用,然后获取视窗(显示文档的内部窗口)的宽度和高度, 并存入变量中 — 这两个值包含在Window.innerWidth 和 Window.innerHeight属性中
2.动态地改变div的宽度和高度,使其等于视窗的宽度和高度
3.resize的可用事件调整div的大小,通过Window.onresize 事件处理程序来访问它,并返回每次改变大小的代码(每次窗口调整大小时都会触发该事件 )
//1
var div = document.querySelector('div');
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
//2
div.style.width = WIDTH + 'px';
div.style.height = HEIGHT + 'px';
//3
window.onresize = function() {
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
div.style.width = WIDTH + 'px';
div.style.height = HEIGHT + 'px';
}