189 8069 5689
本文中简要罗列了JavaScript操作Dom的基本方法，其中包括元素查询、文档结构遍历、属性及内容操作、创建节点、插入节点及删除节点等内容。虽然JQuery更便利，但我还是喜欢用原生的API。
为泸水等地区用户提供了全套网页设计制作服务，及泸水网站建设行业解决方案。主营业务为成都做网站、成都网站制作、泸水网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
通过ID选取元素是最简单和常用的选取元素的方法，ID选择器性能优于其它选择器。
var title = document.getElementById("title");ID不存在，返回 null 。
查看示例程序
基于name属性的值选取元素区别于ID选择器。其一，name属性值 不是必须唯一，多个元素可能有同样的名称；其二，name属性只在少数HTML元素中有效，包括表单、表单元素、iframe 及 img 元素。
var sports = document.getElementsByName("sports");查看示例程序
利用HTML元素的标签名称选取指定类型的元素。
var h2 = document.getElementsByTagName("h2");查看示例程序
通过HTML的 class 属性值选择元素。
var title = document.getElementsByClassName("title");查看示例程序
通过CSS样式表选择器的强大语法，来选择元素。返回第一个匹配的元素。
var title = document.querySelector("#title"); // CSS ID选择
var h2 = document.querySelector("h2"); //选取第一个h2元素查看示例程序
这是最强大的终极选择器
var h2s = document.querySelectorAll("h2"); //返回所有h2标签元素查看示例程序
返回父节点，如果 document 对象调用则返回 null。
var parent = node.parentNode;查看示例程序
返回所有子节点，即NodeList对象。
var children = node.childNodes;查看示例程序
返回第一个子节点。
var first = node.firstChild;查看示例程序
返回最后一个子节点。
var last = node.lastChild;查看示例程序
返回下一个兄弟节点。
var next = node.nextSibling;查看示例程序
返回前一个兄弟节点。
var previous = node.previousSibling;查看示例程序
返回节点类型的数字表示。
Element 节点Text 节点Comment 节点Document 节点DocumentFragment 节点查看示例程序
返回 Text 节点 或 Comment 节点的值。
var value = node.nodeValue;查看示例程序
返回元素的标签名，以大写形式表示。
var name = node.nodeName;查看示例程序
返回所有子元素。
var children = node.children;查看示例程序
元素是节点的一种。
返回所有子元素中的第一个。
var first = node.firstElementChild;查看示例程序
返回所有子元素中的最后一个。
var last= node.lastElementChild;查看示例程序
返回下一个兄弟元素。
var next = node.nextElementSibling;查看示例程序
返回前一兄弟元素。
var previous = node.previousElementSibling;查看示例程序
返回子元素的数量。
var count = node.childElementCount;查看示例程序
表示HTML文档元素的 HTMLElement 对象定义了读/写属性，它们对应于元素的HTML属性。HTMLElement 定义了通用的HTML属性，包括id、lang、dir、事件处理程序 onclick 及表单相关属性等。
form.action = "http://30ke.cn";
form.method = "post";查看示例程序
返回非标准的HTML属性的值。
var width = img.getAttribute("width");查看示例程序
设置非标准的HTML属性的值。
img.setAttribute("width","400px");查看示例程序
返回布尔值，用来检测属性是否存在。
var result = img.hasAttribute("width");查看示例程序
删除某一属性。
img.removeAttribute("width");查看示例程序
在HTML5文档中，任意以 data- 为前缀的小写的属性名字都是合法的。这些 “数据集属性” 定义了一种标准的、附加额外数据的方法。
var x = img.dataset.x;查看示例程序
Node节点定义了 attributes 属性，针对 Element 对象，attributes 是元素所有属性的类数组对象。
var attributes = img.attributes;索引 attributes 对象得到的值是 Attr 对象。Attr 的 name 和 value 返回该属性的名字和值。
查看示例程序
innerHTML 属性以字符串形式返回这个元素的内容。也可以用来替换元素当前内容。
var innerHTML = parent.innerHTML; // 获取节点的内容
parent.innerHTML = "三十课
"; //替换节点的内容查看示例程序
outerHTML 属性以字符串形式返回这个元素及内容。也可以用来替换当前元素及内容。
var outerHTML = parent.outerHTML; // 获取节点及内容
parent.outerHTML= "三十课
"; //替换节点及其内容查看示例程序
查询或替换纯文本元素内容的标准方法是用Node的textContent属性来实现。在IE中，可以用 Element 的 innerText 属性来代替。
console.log(title.textContent);
title.textContent = "三十课2";查看示例程序
使用 document 对象的 createElement() 方法创建新的 Element节点。
var h2 = document.createElement("h2");查看示例程序
创建纯文本节点。
var txt = document.createTextNode("三十课");查看示例程序
使用文档片段通常会带来更好的性能。因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。
var fragment = document.createDocumentFragment();查看示例程序
创建注释节点不经常使用。
var comment = document.createComment("Created by 毛瑞");查看示例程序
通过复制已存在的节点来创建新的文档节点。传参数 true 表示深克隆，false表示浅复制。
var title2 = title.cloneNode(true);查看示例程序
在指定元素上插入子节点，并使其成为该节点的最后一个子节点。
parent.appendChild(h3); 查看示例程序
parent.insertBefore(h2,h3); // h2插入到h3之前。查看示例程序
parent.removeChild(h3);查看示例程序
parent.replaceChild(h3n , h3); 查看示例程序
本人知识水平有限，在汇编的过程中时有错误发生，如发现请不吝指正！多谢。