DOM编程艺术（第七章）

DOM编程艺术（第七章）

## 1.innerHTML属性：

可以用来读、写某给定元素里的HTML内容。在需要把一大段HTML内容插入一份文档时，innterHTML属性可以又快又简单的完成，不过他不会返回任何让你可以用来对刚插入内容进行处理的内容。如果你相对刚插入的内容进行处理，你将需要DOM方法提供的精确性。

2.setAttribute()方法的神奇之处：
当用这个方法改变了DOM节点树上的某个属性节点时，有关文档在浏览器里呈现效果就会发生相应改变。不过，setAttribute()并未改变文档的物理内容。我们只有用浏览器打开那份文档时才能看到文档呈现效果方面的变化。这是因为浏览器实际显示的是那颗DOM节点树。在浏览器看来，DOM节点数才是文档。
根据DOM，一个文档就是一棵节点树。如果你想在节点树上添加内容，就必须插入新的节点。
如果你想把一些HTML内容添加到文档里，就是必须在相应的DOM节点树上插入元素节点。
3.DOM方法动态创建HTML内容
**document.createElement(nodeName)😗*创建一个元素节点对象。（只能是元素节点）
**父节点.appendChild(子节点)😗*向文档的某个现有节点插入一个子节点。
**document.createTextNode(text)😗*创建一个文本节点。
4.insertBefore()方法：
parentElement.insertBefore(newElement,targetElement)
(1）想插入的新元素（newElement）
（2）想把这个新元素插入到哪个现有元素（targetElement）的前面
（3) 这两个元素共同的父元素（parentElement）
我们不必知道这个父元素到底是哪个，因为 targetElement.parentNode===parentElement
在DOM中，元素节点的父元素必须是另一个元素节点（属性节点和文本节点的子元素不允许是元素节点）
5.编写insertBefore()方法：
DOM未提供

 function insertAfter(newElement,targetElement){
        let parent = targetElement.parentNode;
        if(parent.lastChild == targetElement){
            parent.appendChild(newElement)
        }else{
            //targetElement.nextSibling表示targetElement节点的后一个兄弟节点
            parent.insertBefore(newElement,targetElement.nextSibling)
        }
    }
      //targetElement节点的前一个兄弟节点
    targetElement.previousSibling