JavaScript DOM 操作

创建并放置新的节点

1. 获取元素

   // 获取<section>
   var section = document.querySelector('section');
   /*
   querySelector()调用会匹配它在文档中遇到的第一个<section>元素。如果想对多个元素进行匹配和操作，
   你可以使用Document.querySelectorAll()，这个方法匹配文档中每个匹配选择器的元素，并把它们的引用存储在一个array中。
   */
   

2. 用 Document.createElement() 创建一个新的段落

    var div= document.createElement('div');
    div.textContent = '在section中添加div';
   

3. 用 Node.appendChild() 方法在后面追加新的段落

       section.appendChild(div);
   

4. 用 Document.createTextNode() 创建一个文本节点，并文本节点绑定到div节点上

   var text = document.createTextNode('这是文本内容');
   var textDiv= document.querySelector('div');
   textDiv.appendChild(text);
   

移动和删除元素

1. 把具有内部链接的段落移到sectioin的底部

   section.appendChild(linkPara)
   

2. Node.cloneNode() 方法返回调用该方法的节点的一个副本

   var dupNode = node.cloneNode(deep);
   node:将要被克隆的节点
   dupNode:克隆生成的副本节点
   deep 可选:是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.默认值变成了 false
   

3. 删除节点

   //删除section下的div
   section.removeChild(textDiv);
   
   //要删除一个仅基于自身引用的节点
   textDiv.parentNode.removeChild(textDiv);
   

操作样式

1. 方法一

    //直接在想要动态设置样式的元素内部添加内联样式。这是用HTMLElement.style属性来实现。 
   textDiv.style.color = 'white';
   textDiv.style.backgroundColor = 'black';
   textDiv.style.padding = '10px';
   textDiv.style.width = '250px';
   textDiv.style.textAlign = 'center';
   

2. 方法二 通过添加class

   <style>
   	.highlight {
   	  color: white;
   	  background-color: black;
   	  padding: 10px;
   	  width: 250px;
   	  text-align: center;
   	}
   </style>
   <script>
     textDiv.setAttribute('class', 'highlight');
   </script>
   

从Window对象中获取信息

1. 获取这个div的引用，然后获取视窗（显示文档的内部窗口）的宽度和高度， 并存入变量中 — 这两个值包含在 Window.innerWidth 和 Window.innerHeight 属性中

   var div = document.querySelector('div');
   var WIDTH = window.innerWidth;
   var HEIGHT = window.innerHeight;
   

2. 将动态地改变div的宽度和高度，使其等于视窗的宽度和高度

   div.style.width = WIDTH + 'px';
   div.style.height = HEIGHT + 'px';
   

3. Window 对象有一个称为 resize 的可用事件。每次窗口调整大小时都会触发该事件 — 我们可以通过 Window.onresize 事件处理程序来访问它

   window.onresize = function() {
     WIDTH = window.innerWidth;
     HEIGHT = window.innerHeight;
     div.style.width = WIDTH + 'px';
     div.style.height = HEIGHT + 'px';
   }