JavaScript操作DOM常用API总结

您所在的位置：网站首页 › js在某个节点后添加子节点 › JavaScript操作DOM常用API总结

JavaScript操作DOM常用API总结

#JavaScript操作DOM常用API总结| 来源: 网络整理| 查看: 265

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

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

createDocumentFragment

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

节点修改API

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

不管是新增还是替换节点，如果其原本就在页面上，那么原来位置的节点将被移除；修改之后节点本身绑定的事件不会消失； // 添加、删除子节点 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

通过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总结

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

【本文地址】

JavaScript操作DOM常用API总结

JavaScript操作DOM常用API总结

今日新闻

推荐新闻