《DOM知识点总结》《DOM知识点总结》

DOM(文档对象模型)是针对HTML和XML文档的一个API，描绘了一个层次化的节点树，允许我们添加、移除和修改页面的某一部分。目前流行的各种前端框架，对于页面结构的调整更新构建都是基于DOM的原生API来实现的，而我们平时在进行前端开发时也或多或少会用到DOM原生操作，尤其是“抛弃”jQuery这个框架之后，原生的DOM操作越来越重要，今天就来总结一些常见的DOM属性和操作方法。

Node类型 DOM将文档描绘成了一个多层次节点构成的结构，节点有很多的类型，每个类型又有不同的特点、数据和方法，节点之间也存在着相互的关系，同级关系，子父级关系等等。整个文档就是由一个个节点构建起来的树，就是我们经常说的DOM树。
每个节点（node）都有一个nodeType属性，表明节点的类型，下面先简单列举一下常见的节点类型：

Node.ELEMENT_NODE(1)-----------元素节点，nodeType值为1
Node.ATTRIBUTE_NODE(2)---------属性节点，nodeType值为2
Node.TEXT_NODE(3)--------------文本节点，nodeType值为3
Node.COMMENT_NODE(8)-----------注释节点，nodeType值为8
Node.DOCUMENT_NODE(9)----------文档节点，nodeType值为9
Node.DOCUMENT_TYPE_NODE(10)----doctype节点，nodeType值为10

可以通过节点的nodeType值来判断节点类型

if(someNode.nodeType == 1){ console.log("Node is an element.") }

节点关系节点之间存在着这样或那样的关系，每个node都有一个childNodes属性，其中保存着一个NodeList对象，有length属性，但不是一个Array实例，可以像下面一样访问里面存着的node:

var fistChild = someNode.childNodes[0]; var secondChild = someNode.childNodes.item(1); var count = someNode.childNodes.length;

还有一些属性：

someNode.nextSibling 同级下一个节点
someNode.previousSibling 同级前一个节点
someNode.firstChild 节点的第一个子节点
someNode.lastChild 节点的最后一个子节点
someNode.parentNode 节点的父节点

节点操作方法常见的操作方法

someNode.appendChild(newNode)--------------在节点的childNodes末尾添加一个新节点，返回new
someNode.insertBefore(newNode, whoNode)----在who前面添加一个new节点，返回new
someNode.replaceChild(newNode, whoNode)----将who替换为new节点，返回who
someNode.removeChild(whoNode)--------------将who移除，返回who

以上方法都是在父节点上的操作，没有子节点节点调用这些方法会报错。
两个特例方法
这俩方法有没有子节点都可以使用：
cloneNode() 这个方法用来复制调用它的节点，可以传一个参数true来进行深复制；

//浅复制，只复制节点本身，不会复制节点内部 var copyNode = someNode.cloneNode(false); //深复制，复制节点内部子节点 var deepCopy = someNode.cloneNode(true);

要注意的一点是，cloneNode的默认参数在不同的规范下，取true和false都有可能，建议强制写明参数，不使用默认值（其实也不知道默认值到底是啥）。
normalize() 这个方法是文本节点(Text_Node)的专用方法，在someNode上调用时，如果在其后代节点找到了空文本节点，就删除这个空文本节点；如果找到了相邻的文本节点（一般来说直接写的html都只有一个文本节点，除非我们用createTextNode()这种方法创建文本节点，才有可能出现相邻的文本节点），则合并为一个节点。
元素节点ELement_Node 其实元素节点简单来说就是html中的标签，什么p标签，h1标签等等，先说一下它的特性：

nodeType值为1；
nodeName值为元素标签名；也可以使用tagName获取，注意大小写问题
nodeValue值为null；它也没啥值好用的
parentNode可能为Document或Element；文档的子节点或者其他element的子节点
子节点可能是：Element、Text、Comment等等；

HTML元素所有的HTML元素都是由HTMLElement类型表示，它就是继承自Element，然后添加了一些属性，其实感觉跟ELement一个东西，主要有以下属性：

id; ------------就是div的id么，标识符一个
title; ---------就是那个title
lang和dir; -----很少用
className; -----class的名字结合

其中className属性，这个注意一下，返回的是一个class名称的字符串合集，比如"item active test"，需要自己用字符串方法拆分操作它，后来HTML5就新增了一个classList属性，返回的是个class数组，比['item', 'active', 'test']，可以用数组的方式操作class名称，就很方便了。
classList属性有自己的几个操作方法：

add(value); ----------将给定的字符串添加到列表，如果有，则不添加
contains(value); -----列表里面有没有给定的值，返回true/false
remove(value); -------删除列表中给定的值
toggle(value); -------没有就添加，有就删除

div.classList.remove('item'); div.classList.add('current'); div.classList.toggle('active');

操作特性操作div元素的属性，就是常见的几种方法，列举一下：

getAttribute();
setAttribute();
removeAttribute();

我们还经常自定义属性，比如在标签里定义个id='1'，HTML5规范建议自定义属性加上data-前缀，表明是自定的属性，这样可以使用div.dataset.id取得属性值。
还有一个Attributes属性，不展开说了，不怎么用到。
创建元素节点可以使用document.createElement()方法创建元素节点。再配合node的操作方法，进行各种穿插。
属性节点Attribute_Node 属性节点不被认为是DOM文档树的一部分，简单说一下它的特性：

nodeType值为2；
nodeName值为特性的名称；
nodeValue值为特性的值；
parentNode为null
没有子节点

操作属性一般用上面的getAttribute()、setAttribute()、removeAttribute()。
文本节点Text_Node 文本节点简单说就是标签里的内容，比如hello world中的'hello world'，先说一下它的特性：

nodeType值为3；
nodeName值为#text;
nodeValue值为节点包含的文本；
parentNode可能Element；
没有子节点；

开始和结束标签之间只要有内容，就会创建一个文本节点：

//没有文本节点//有空格，故有一个文本节点 //有内容，故有一个文本节点 hello world var textNode = div.firstChild; textNode.nodeValue; // hello world

创建文本节点可以通过document.createTextNode('hello world')创建一个文本节点，再配合node的操作方法，进行各种穿插。
一般来讲，一个元素只有一个文本节点，但是你要是硬搞几个相邻节点，也是可行的，然后就有了normalize()和spliteText()这俩方法：

var element = document.createElement('div'); element.className = 'message'; var textNode = document.createTextNode('hello world'); element.appendChild(textNode); var anotherTextNode = document.createTextNode('Yep!'); element.appendChild(anotherTextNode); //这样就有了俩文本节点alert(element.childNodes.length); // 2 element.normalize(); alert(element.childNodes.length); // 1 alert(element.firstChild.nodeValue); // 'hello worldYep!'

spliteText()是将文本节点进行分割，具体细节不想讲了，碰见了再查。
文档节点Document_Node 文档节点表示整个HTML页面，document对象也是window对象的一个属性，说一下它的特性：

nodeType值为9；
nodeName值为#document;
nodeValue值为null；
parentNode值为null；
子节点可能是一个DocumentType、Element、Comment；

子节点 document的子节点也就是常见的html、head、body、doctype等，可以用下面的属性取得它们的引用：

var html = document.documentElement; var head = document.head; // HTML5新定义的 var body = document.body; var doctype = document.doctype;

文档信息仅做了解：

var originTitle = document.title; // 取得页面的title document.title = 'New Title'; // 设置页面titlevar url = document.URL; // 取得页面的完整URL var domin = document.domin; // 取得域名 var referrer = document.referrer; // 取得来源页面的URL

查找元素 document.getElementById()
根据id获取元素的引用，如果找不到，就返回null，只能使用document调用。
getElementsByTagName()
根据标签名获取一个HTMLCollection元素列表，跟NodeList对象类似。可以使用document或者element调用

var images = document.getElementsByTagName('img'); // document调用 images.length; // 数量 images[0].src; images.item(0).src; var test = element.getElementsByTagName('a'); // element调用

还可以传入一个*来获取文档中的所有元素。
getElementsByClassName()
根据class类名查找，可以使用document或者element调用

var test = document.getElementsByClassName("item active"); var test1 = element.getElementsByClassName("item");

DOM的扩展 DOM还有一个SelectorsAPI的扩展，另一个是HTML5，下面说一下SelectorsAPI，都可以通过element或者document调用。
querySelector()
接受一个CSS选择符，返回匹配到的第一个元素，没有找到就返回null。

var body = document.querySelector('body'); var myDiv = document.querySelector('#myDiv');

querySelectorAll()
同样接受一个CSS选择符，返回一个NodeList实例。

var ems = document.getElementById('myDiv').querySelectorAll('em'); var strongs = document.querySelectorAll('p strong'); strongs.item(1); strongs[2];

文档写入