JS 核心之 DOM

DOM是一棵树（tree）树上有Node。
Node分为Document ( html )，Element（元素）和Text（文本）。以及其他不重要的。

1.Node接口

1.属性

childNodes：子节点，返回的是一个伪数组
firstChild：第一个孩子
innerText：获取内容所有文本
lastChild：最后一个孩子
nextSibling：兄弟节点
nodeName：节点名称，返回的都是**大写**，除了**svg**
nodeType：节点类型
nodeValue：属性返回或设置当前节点的值
outerText：设置(包括标签)或获取(不包括标签)对象的文本
ownerDocument：返回某元素的根元素
parentElement：父元素
parentNode：父节点
previousSibling：上一个兄弟节点
textContent：获取所有内容，包括<script>和<style>标签的内容

如果记不住就背下以下单词：

    child / children / parent
    node
    first / last
    next / previous
    sibling / siblings
    type
    value / text / content
    inner / outer
    element
    然后互相组合

2.方法（函数属性）

 + appendChild()：向标签中插入子节点
 + cloneNode(deep)：传进去一个参数deep，默认不传，就为false，浅拷贝。true为深拷贝。深拷贝递归的复制所有子节点。
 + contains()：包含
 + hasChildNodes()：有子节点
 + insertBefore()：在指定的已有子节点之前插入新的子节点
 + isEqualNode()：相等，两个东西相等
 + isSameNode()：相同，同一个东西。
 + removeChild()：移除子节点
 + replaceChild()：替换子节点
 + normalize() ： 常规化。比如存在两个一样的文本节点，就可以合并成一个

插入文本的方法：
html：<div id=”div1”></div>

1. div1.innerText = ‘hello world’,如果div中本来存在一个标签，里面存在文本会被替换。不好。
   2.div1.appendChild( document.createTextNode(‘hello world’))不会被替换，因为只是插入一个新节点。

2.Document接口

1.属性

anchors：获取页面中的所有a标签，已弃用，只返回拥有name属性的a标签，不返回拥有id的a标签。
body：body标签
characterSet：设置字体
childElementCount：子元素数量
children：子元素
doctype：文本类型
documentElement：document.documentElement就是html元素
domain：管理员
fullscreen：全屏
head：head标签
hidden：隐藏
images：图片
links：链接
location：
onxxxxxxxxx
origin
plugins
readyState
referrer
scripts
scrollingElement
styleSheets
title
visibilityState