JavaScript操作DOM常用API总结

用多了 jQuery 也会有点忘记 原生JavaScript 是如何操作 DOM 的，在此总结：

什么是DOM？如何访问DOM？

MDN 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

开始的时候，JavaScript和DOM是交织在一起的，但它们最终演变成了两个独立的实体。JavaScript可以访问和操作存储在DOM中的内容，因此我们可以写成这个近似的等式：

API (web 或 XML 页面) = DOM + JS (脚本语言)

DOM 被设计成与特定编程语言相独立，使文档的结构化表述可以通过单一，一致的API获得。尽管我们在本参考文档中会专注于使用JavaScript， 但DOM 也可以使用其他的语言来实现， 以Python为例，代码如下：

import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");

总结：API (web 或 XML 页面) = DOM + JS (脚本语言)

Node

Node 是一个接口，我们叫节点，有许多DOM元素的接口都从Node 继承方法和属性。在Node 类型中，比较常用的就是element，text，comment，document，document_fragment attribute这几种类型。

Node 有一个nodeType的属性表示Node 的类型，是一个整数，不同的值代表不同的节点类型。

假设我们要判断一个Node 是不是一个element，即元素，通过查表可知元素的nodeType属性值为1，代码可以这么写：

if(X.nodeType === 1){
  console.log('X 是一个元素');
}

NodeList

NodeList 对象是一个节点的集合，一般由Node.childNodes、document.getElementsByName和document.querySelectorAll返回的。

在一些情况下，NodeList 对象是一个实时集合，也就是说，如果文档中的节点树发生变化，则已经存在的实时 NodeList 对象也会随之变化。例如，Node.childNodes document.getElementsByName返回的NodeList的结果是实时的（此时跟HTMLCollection比较类似），举例如下：

var childNodes = document.body.childNodes;
console.log(childNodes.length); // 假设是“1”
document.body.appendChild(document.createElement('div'));
console.log(childNodes.length); // 此时是“2”

而document.querySelectorAll返回的结果是固定的，NodeList 是一个静态集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。记住这种不同，当选择 NodeList 中所有项遍历的方式，或缓存它的长度的时候，可能有用。

NodeList.length-NodeList 中包含的节点个数。

NodeList.item()-返回 NodeList 对象中指定索引的节点，如果索引越界，则返回null。等价的写法是 nodeList[i]，不过，在这种情况下，越界访问将返回 undefined。

尽管NodeList不是数组，但是都有length属性和forEach方法对其进行迭代。 它也可以使用Array.from（）转换为真实的数组。 但是，一些较旧的浏览器尚未实现NodeList.forEach（）和Array.from（），可以使用Array.prototype.forEach（）。

HTMLCollection

HTMLCollection是比较早期的模型，只能包含HTML元素，早期就有的接口如document.getElementsByClassName, document.getElementsByTagName返回的就是HTMLCollection。NodeList是比较新的模型，相比HTMLCollection更加完善，不光有HTML元素，还可以包含其他节点注释节点、文本节点等等。比较新的接口如document.querySelectorAll，虽然也是返回HTML元素，但返回的就是NodeList，并且是静态的。

HTML DOM 中的 HTMLCollection 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。它也是一个伪数组。

总结：

只有document.querySelectorAll返回的结果是固定的，返回的NodeList 是一个静态集合。

节点查找API

  1. document.getElementById：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
  2. document.getElementsByClassName：根据类名查找元素，多个类名用空格分隔，返回一个HTMLCollection。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持getElementsByClassName方法；
  3. document.getElementsByTagName：根据标签查找元素，*表示查询所有标签，返回一个HTMLCollection。
  4. document.getElementsByName：根据元素的name属性查找，返回一个NodeList。
  5. document.querySelector：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
  6. document.querySelectorAll：返回一个NodeList，IE8+(含）。

节点创建API

createElement创建元素：

 var elem = document.createElement("div");
  elem.id = 'test';
  elem.style = 'color: red';
  elem.innerHTML = '我是新创建的节点';
  document.body.appendChild(elem);

createElement`通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8以下浏览器不支持自定义标签。

通过 createElement 创建的元素并不属于 document 对象，它只是创建出来，并未添加到html文档中，要调用 appendChild 或 insertBefore 等方法将其添加到HTML文档中。

createTextNode创建文本节点：

var node = document.createTextNode("我是文本节点");  
document.body.appendChild(node);

cloneNode 克隆一个节点：

node.cloneNode(true/false) ，它接收一个bool参数，用来表示是否复制子元素。

var from = document.getElementById("test");  
var clone = from.cloneNode(true);  
clone.id = "test2";  
document.body.appendChild(clone);

克隆节点并不会克隆事件，除非事件是用<div onclick="test()"></div>这种方式绑定的，用 addEventListener 和 node.onclick=xxx; 方式绑定的都不会复制。

createDocumentFragment

本方法用来创建一个 DocumentFragment ，也就是文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，大量操作DOM时用它可以优化性能。

节点修改API

节点修改API都具有下面这几个特点：

  1. 不管是新增还是替换节点，如果其原本就在页面上，那么原来位置的节点将被移除；
  2. 修改之后节点本身绑定的事件不会消失；
// 添加、删除子节点
parent.appendChild(child);
parent.removeChild(child);

// 替换子节点
parent.replaceChild(newChild, oldChild); 

// 插入子节点
parentNode.insertBefore(newNode, refNode);

//
element.insertAdjacentHTML(position, text);//text是要被解析为HTML或XML,并插入到DOM树中的字符串。
targetElement.insertAdjacentElement(position, element);

使用insertAdjacentHTML插入用户输入的HTML内容的时候, 需要转义之后才能使用.

如果只是为了插入文本内容(而不是HTML节点), 不建议使用这个方法, 建议使用node.textContent 或者 node.insertAdjacentText() . 因为这样不需要经过HTML解释器的转换, 性能会好一点.

节点关系API

DOM中的节点相互之间存在着各种各样的关系，如父子关系，兄弟关系等。

父关系API

  • parentNode：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；
  • parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；

子关系API

  • children：返回一个实时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持；
  • childNodes：返回一个实时的NodeList，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；
  • firstChild：返回第一个子节点，不存在返回null，与之相对应的还有一个firstElementChild；
  • lastChild：返回最后一个子节点，不存在返回null，与之相对应的还有一个lastElementChild；

兄弟关系型API

  • previousSibling：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
  • nextSibling：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
  • previousElementSibling：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。
  • nextElementSibling：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。

元素属性型API

1、setAttribute 给元素设置属性：

element.setAttribute(name, value);

其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。

2、getAttribute

getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null：

var value = element.getAttribute("id");

3、hasAttribute

var result = element.hasAttribute(name);

var foo = document.getElementById("foo"); 
if (foo.hasAttribute("bar")) { 
    // do something
}

样式相关API

直接修改元素的样式

elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');

动态添加样式规则

var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);

window.getComputedStyle

通过element.sytle.xxx只能获取到内联样式，借助window.getComputedStyle可以获取应用到元素上的所有样式，IE8或更低版本不支持此方法。

var style = window.getComputedStyle(element[, pseudoElt]);

getBoundingClientRect

getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：

var clientRect = element.getBoundingClientRect();

大部分内容是源于参考文章：狼狼的蓝胖子
http://luopq.com/2015/11/30/javascript-dom/和小茗同学 JavaScript常见原生DOM操作API总结

在此表示感谢，我根据自己的理解重新组织并添加了一些东西。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,525评论 6赞 507
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,203评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,862评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,728评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,743评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,590评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,330评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,244评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,693评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,885评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,001评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,723评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,343评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,919评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,042评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,191评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,955评论 2赞 355