DOM

首先我们要理解dom：

dom就是「文档对象模型」，是html和xml文档的编程接口，表示多层节点构成的文档，
通过dom它开发者可以「添加，删除，修改」页面的各个部分，简单说：就是你的页面想要实现增删改查，以及各种交互效果，都需要通过dom来操作，
dom就是你「操作页面的中介」，可以把你的想法「精准」的传达给页面文档，让他们按照你的想法来实现动作，那么如何精准传达呢，dom是一个由节点构成的层级结构，「每个标记都是一个节点」，所以可以通过节点，精准的控制想要实现功能的区域

节点层级

上面说了，节点是精准操作页面的东西，那么节点也分为很多类型，分别拥有自己不同的标记，特性和方法，
document节点：代表每个文档的根节点，他有唯一的子节点元素，我们称为documentElement，这是最外层的文档元素，其他所有元素都存在这个元素之内，每个文档只能有一个文档元素，xml任何元素都可能称为文档元素
DOM中总共有「12种节点类型」，这些类型「都继承一种基本类型」。

node 类型
- JS中所有节点类型都继承自node类型，每个节点都有一个nodeType属性，表示节点类型
我们可以通过常量和节点做比较，如果相等，说明是同一类型节点

if (someNode.nodeType == Node.ELEMENT_NODE){ 
alert("Node is an element."); 
}

小结：这个例子把常量和node的element节点做对比，如果相等，说明常量是元素节点

文档中的节点都与其他节点有关系，这些关系类似家族关系，html>body>页面属性标签，每个节点都有一个childNodes属性和一个NodeList的实例，
- NodeList是一个「类数组」对象，他有长度，用于储存可以按照位子存取的有序节点，就是说，一个元素内的子节点，都在这个里面排列，按照顺序可以取到相应的节点，
  
  例子1：用中括号和对象的方法访问NodeList中的元素

let firstChild = someNode.childNodes[0];//第一个子元素
let secondChild = someNode.childNodes.item(1);//第二个子元素
let count = someNode.childNodes.length;

parentNode属性指向Dom树中的父元素，
childNodes：firstChild 和 lastChild 分别指向 childNodes 中的第一个和最后一个子节点。 someNode.firstChild 的值始终等于 someNode.childNodes[0]
hasChildNodes()，如果返回true。说明节点有一个或者多个子节点

操作节点

因为所有关系指针都是只读的，所以DOM又提供了一些操纵节点的方法。
appendChild()：用于在 childNodes 列表末尾添加节点。
insertBefore() 方法。这个方法接收两个参数：要插入的节点和参照节点

//添加节点
let returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); // true 
alert(someNode.lastChild == newNode); // true
 // 作为新的第一个子节点插入
returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); // true 
alert(newNode == someNode.firstChild); // true

replaceChild() 方法接收两个参数：要插入的节点和要替换的节点。
是 cloneNode() ，会返回与调用它的节点一模一样的节点。 cloneNode() 方法接收一个布尔值参数，表示是否深复制。在传入 true 参数时，会进行深复制，即复制节点及其整个子DOM树

Document 类型

Document是js中文档节点类型：
- nodeType 等于9；
- nodeName值为#document
- 子节点可以是DocumentType(最多一个)，Element（最多一个）
documentElement 属性，始终指向HTML页面中的 html元素
document 对象还有一个 body 属性，直接指向 body元素。

let body = document.body; // 取得对<body>的引用

小结：一般来说， appendChild() 、 removeChild() 和 replaceChild() 方法不会用在 document 对象上。这是因为文档类型（如果存在）是只读的，而且只能有一个 Element 类型的子节点

文档信息

读取文档标题，和获取文档完整的URL

// 读取文档标题
let originalTitle = document.title; 
// 修改文档标题
document.title = "New page title";
// 取得完整的URL 
let url = document.URL; 
// 取得域名
let domain = document.domain; 
// 取得来源
let referrer = document.referrer;

定位元素，也就是选择元素

getElementById()

<div id="myDiv">Some text</div>
let div = document.getElementById("myDiv"); // 取得对这个<div>元素的引用

getElementsByTagName() 是另一个常用来获取元素引用的方法。这个方法接收一个参数，即要

获取元素的标签名，返回包含零个或多个元素的 NodeList

alert(images.length); // 图片数量
alert(images[0].src); // 第一张图片的src属性
alert(images.item(0).src); // 同上

Element类型

getAttribute()：这个方法接收两个参数：要设置的属性名和属性的值。如果属性已经存在，则 setAttribute() 会以指定的值替换原来的值；如果属性不存在，则 setAttribute() 会以指定的值创建该属性
setAttribute()：方法添加指定的属性，并为其赋指定的值。比如给input设置一个type值
removeAttribute() ：可以删除指定的属性
createElement（）：创建新元素。这个方法接收一个参数，即要创建元素的标签名

本文使用 mdnice 排版

最直白的DOM探讨（未完待续）

DOM