回归前端学习第11天——操纵DOM

何为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/" target="_blank" rel="external nofollow" >百度一下</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';
}